Creating a list view with sections

[corysullivan]

I am just getting started with compositional architecture, so I could be overlooking something that is obvious.

I am trying to construct a list that contains sections. For example, if I have a list of categorized products

struct CategorizedProducts: Equatable, Identifiable {
    let id: UUID
    let category: Category
    let products: [Product]
}

Each section is represented by a category that lists the corresponding products.

I have reviewed the todo example app, but this doesn't contain sections. So how would I create a parent reducer and view considering this data model?

struct ProductsState: Equatable {
    let categorizedProducts: [CategorizedProducts]
}

enum ProductsActions: Equatable {
    case product(id: Product.ID, action: ProductAction)
}

struct ProductsEnvironment {}

let productsReducer = Reducer<ProductsState, ProductsActions, ProductsEnvironment>.combine
(

    productReducer.forEach(
        state: \. ???? // Not sure how to create this,
      action: /ProductsActions.product(id:action:),
      environment: { _ in ProductsEnvironment() }
    ),

    Reducer { _, action, _ in
        switch action {
        case .product(id: let id, action: .someButtonTapped):
            return .none
        }
    }
)

struct ProductsView: View {
    let store: Store<ProductsState, ProductsActions>

    var body: some View {
        WithViewStore(self.store) { viewStore in
            List {
                ForEach(viewStore.state.categorizedProducts) { info in
                    Section(header: Text(info.category.rawValue)) {
                        // Not sure how to create the child stores
                    }
                }
            }
        }
    }
}

// Product

struct ProductState: Equatable {}

enum ProductAction: Equatable {
    case someButtonTapped
}

struct ProductEnvironment {}


let productReducer = Reducer<ProductsState, ProductAction, ProductEnvironment> { _, action, _ in
    switch action {
    case .someButtonTapped:
        return .none
    }
}

[tgrapperon]

There are several ways to solve your problem, but I would go with the simplest when using TCA: composing features.

I would introduce an intermediary "categorized products" feature, with CategorizedProducts as a state, a CategorizedProductsAction, a CategorizedProductsEnvironment and a categorizedProductsReducer. You can also define a SwiftUI CategorizedProductsView that presents the flat list of products it contains¹.

You embed the productReducer in categorizedProductsReducer using forEach. Because the "product" feature has no knowledge of its outside world, it doesn't have to change its internals when it is embedded in a "categorized products" feature.

Each "categorized products" feature is responsible for managing a flat list of Product. Like the "product" feature, It should work in isolation, unaware of potential siblings or parent.

Now that you have a "categorized product" feature working, you can embed it in some "Products" feature. ProductsState stays unchanged ². In your ProductsAction, you declare case categorizedProducts(CategorizedProductsAction) (and the existing case product(id: Product.ID, action: ProductAction) should have moved to CategorizedProductsAction instead). In the productsReducer, you compose CategorizedProducts as a whole, foregoing the existence of individual Product's. You use forEach(state: \ categorizedProducts… to pullback the categorizedProductsReducers of each section.

In your view, you can replace your List->ForEach->Section> by List->ForEachStore to embed a CategorizedProductsView for each category, and it should work as you expect.

The ability to compose domains like this is one of the killer-feature of TCA. Each feature can be considered as a top-level feature, as a whole app by itself. When you develop things in TCA, you tend to think "backward": "How do I embed this feature into another, bigger, one". In your case, this quite naturally leads to embedding "product" into "categorized products", which is the next level of complexity, instead of "products", which force us to go in the other way when going back to "categorized products".

There are other solutions of course, and you can drill down to individual products directly from the main "products" feature, but you will have to fight a little with the built-in tools provided by the architecture, or define your owns.

Footnotes

1. The trick here is to have a top-level Section view in your body instead of a List. Otherwise, you will nest sections' Lists in the main List when you will compose CategorizedProductsView in your main View. You can use SwiftUI previews to present CategorizedProductsView inside a List when working on it. ↩

2. The canonical way to handle a flat list of sub-states in TCA is to use IdentifiedArrayOf<CategorizedProducts> instead of a simple [CategorizedProducts] array. This is important because array indices are not a stable identifier for the elements it contains. Think of this type as some kind of ordered dictionary, where elements are identified using their key. Because CategorizedProducts is Identifiable, you should only have to cast categorizedProducts: IdentifiedArrayOf<CategorizedProducts> in ProductsState. This comment also applies for products: [Product] in CategorizedProducts. As you should see while composing reducers, forEach using [Element] are deprecated. You can learn more about IdentifiedArray at https://www.pointfree.co/blog/posts/60-open-sourcing-identified-collections. ↩

[corysullivan]

Thanks! That's very helpful.