Clever Geek Handbook

可组合架构-应用架构的全新视角

移动应用程序的平衡架构延长了项目和开发人员的寿命。



历史



认识亚历克斯。他需要开发一个用于制作购物清单的应用程序。Alex是一位经验丰富的开发人员，首先对产品提出了要求：



  1. 可以将产品移植到其他平台（watchOS，macOS，tvOS）
  2. 全自动应用程序回归
  3. iOS 13+支持


Alex最近熟悉了pointfree.com项目，在该项目中，Brandon和Stephen共享了他们对现代应用程序体系结构的见解。这就是Alex发现有关Composable Architecutre的方式。



可组合架构



在查看了Composable Architecture文档之后，Alex确定他正在处理符合设计要求的单向体系结构。从小册子中得出：



  1. 将项目分为模块；
  2. 数据驱动的UI-界面配置由其状态决定；
  3. 所有模块逻辑都包含在单元测试中。
  4. 接口的快照测试；
  5. 支持iOS 13 +，macOS，tvOS和watchOS;
  6. SwiftUI和UIKit支持。


在深入研究建筑学之前，让我们看一下诸如智能雨伞之类的对象。



图片替代

如何描述伞的布置系统？



伞系统包含四个组件：



. : .



. .



. .



. 10 .



composable architecture . .





? , .



UI — [];



Action — ;



State — [];



Environment — [ ];



Reducer — , [] ;



Effect — , action reducer.



( 1)







.



. , .



struct ShoppingListState {
    var products: [Product] = []
}

enum ShoppingListAction {
    case addProduct
}


reducer :



let shoppingListReducer = Reducer { state, action, env in
    switch action {
    case .addProduct:
        state.products.insert(Product(), at: 0)
        return .none
    }
}


:



struct Product {
    var id = UUID()
    var name = ""
    var isInBox = false
}

enum ProductAction {
    case toggleStatus
    case updateName(String)
}

let productReducer = Reducer { state, action, env in
    switch action {
    case .toggleStatus:
        state.isInBox.toggle()
        return .none
    case .updateName(let newName):
        state.name = newName
        return .none
    }
}


, reducer , , . reducer .



UI .



UI





iOS 13+ Composable Architecture SwiftUI, .



, Store:



typealias ShoppingListStore = Store<ShoppingListState, ShoppingListAction>

let store = ShoppingListStore(
    initialState: ShoppingListState(products: []),
    reducer: shoppingListReducer,
    environment: ShoppingListEnviroment()
)


Store viewModel MVVM — .



let view = ShoppingListView(store: store)

struct ShoppingListView: View {
    let store: ShoppingListStore

    var body: some View {
        Text("Hello, World!")
    }
}


Composable Architecture SwiftUI. , store ObservedObject, WithViewStore:



var body: some View {
    WithViewStore(store) { viewStore in
        NavigationView {
            Text("\(viewStore.products.count)")
            .navigationTitle("Shopping list")
            .navigationBarItems(
                trailing: Button("Add item") {
                    viewStore.send(.addProduct)
                }
            )
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}


Add item, . send(Action) .



, , :



struct ProductView: View {
    let store: ProductStore

    var body: some View {
        WithViewStore(store) { viewStore in
            HStack {
                Button(action: { viewStore.send(.toggleStatus) }) {
                    Image(
                        systemName: viewStore.isInBox
                            ? "checkmark.square"
                            : "square"
                    )
                }
                .buttonStyle(PlainButtonStyle())
                TextField(
                    "New item",
                    text: viewStore.binding(
                        get: \.name,
                        send: ProductAction.updateName
                    )
                )
            }
            .foregroundColor(viewStore.isInBox ? .gray : nil)
        }
    }
}




. ? .



enum ShoppingListAction {
        //       
    case productAction(Int, ProductAction)
    case addProduct
}

//      
// ..   ,   
let shoppingListReducer: Reducer<ShoppingListState, ShoppingListAction, ShoppingListEnviroment> = .combine(
        //  ,     
    productReducer.forEach(
                // Key path
        state: ShoppingListState.products,
                // Case path
        action: /ShoppingListAction.productAction,
        environment: { _ in ProductEnviroment() }
    ),
    Reducer { state, action, env in
        switch action {
        case .addProduct:
            state.products.insert(Product(), at: 0)
            return .none
                //      productReducer
        case .productAction:
            return .none
        }
    }
)




. .



UI :



var body: some View {
    WithViewStore(store) { viewStore in
        NavigationView {
            List {
        //   
                ForEachStore(
            //  store
                    store.scope(
                        state: \.products,
                        action: ShoppingListAction.productAction
                    ),
            //  
                    content: ProductView.init
                )
            }
            .navigationTitle("Shopping list")
            .navigationBarItems(
                trailing: Button("Add item") {
                    viewStore.send(.addProduct)
                }
            )
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}


150 , .





2 — (in progress)



第3部分-扩展功能，添加产品删除和分类（正在进行中）



第4部分-添加列表缓存并转到商店（正在进行中）



资料来源



产品清单第1部分：github.com



方法作者门户：pointfree.com



可组合架构的来源：https : //github.com/pointfreeco/swift-composable-architecture



More articles:


All Articles