How to sync together model's layer and view's layer

[Otbivnoe]

I'm working on a feature that displays a list of products using the following general model:

struct Product: Equatable, Identifiable {
    let id: Int
    let name: String
    let description: String
    let price: Double
    let madeBy: Country
    let tags: [Tag]
}

This screen depends on a few parameters (name and price) only, so we don't need the whole model for displaying a single product:

extension ProductListItem {
    struct State: Equatable, Identifiable {
        let id: Int
        let name: String
        let price: Double
    }
}

Using the technique I need to persist the two separate arrays (the actual models and state models). The original Product model is required for a details screen that is presented from this list:

extension ProductsList {
    struct State: Equatable {
        var products: IdentifiedArrayOf<Product>
        var productsStates: IdentifiedArrayOf<ProductListItem.State>
    }
}

I don't like this approach since you should keep these both properties in sync - extra space for making a mistake. On the other hand I don't like passing a whole Product model to list item - it makes testing harder by generating fake models.

Could someone suggest a proper solution?

[Alex293]

Don't scope at the state level. State should strive to be normalised, the smallest possible.
Somewhere up in the state hierarchy you should have a IdentifiedArrayOf<Product> then in you list feature simply have a IdentifiedArrayOf<ProductListItem.State>. Now when you construct you listItem view instead of passing the whole store scope it from one IdentifiedArrayOf to the other. If from the list you need a full item to navigate to the detail simply delegate this action to the parent which have the in it's state IdentifiedArrayOf<Product>.

In the end you get
Parent (State = IdentifiedArrayOf) -> List (State = IdentifiedArrayOf<ProductListItem.State>)-> Detail (State = Product)

[Otbivnoe]

Thanks for the answer! But what if only this list feature is responsible for storing these products? I load them on appearing , so I’m not sure I can move it somewhere up 🤔

[mbrandonw]

Hi @Otbivnoe, I personally do not think it is worth the work to try to maintain the slimmer ProductListItem just because the view only needs name and `price. I would just pass along the full product and not worry about it. I'm not sure I see how it complicates testing, perhaps you can explain more about that?

[alobanov11]

I solved this problem to have two layers. One for data and one for view. Like:

struct ProductList: ReducerProtocol {
    struct State: Equatable {
        var view = View.State()
        var products: [Product] 
    }

    enum Action: Equatable {
        case view(View.Action)
    }

    enum View {
        struct State: Equatable {
            struct Item {...}     

            var items: [Item]
        }

        enum Action: Equatable {
            case viewAppeared
        }
    }
}

And I use \.view, send: { .view($0) } { viewStore in in view layer.

It's also a bit complicated to construct features like this, but I've not found a better solution.