How to reuse view and reducer with more than one model?

[cameroncooke]

I'm just starting out with TCA but I am unsure how to create reusable views and reducers that can be used with different models.

As an example, I've created a reusable View that has a reducer factory that allows a different concrete type to be used for the view state as long as it conforms to a protocol:

EditableItemView.swift

protocol EditableItemConformable: Equatable, Identifiable {
    var id: UUID { get }
    var title: String { get set }
}

enum EditableItemAction: Equatable {
    case textFieldChanged(String)
}

func makeItemReducer<T>() -> Reducer<T, EditableItemAction, AppEnvironment> where T: EditableItemConformable {
    return Reducer { item, action, environment in
        switch action {
        case .textFieldChanged(let string):
            item.title = string
            return .none
        }
    }
}

struct EditableItemView<T>: View where T: EditableItemConformable {

    let store: Store<T, EditableItemAction>

    var body: some View {
        WithViewStore(store) { viewStore in
            TextField(
                viewStore.title,
                text: viewStore.binding(get: \.title, send: EditableItemAction.textFieldChanged)
            )
        }
    }
}

Given I have the following models:

Models.swift

struct ChildModel: EditableItemConformable {
    let id: UUID
    var title: String

    // other unrelated fields
    var isPopular: Bool
}

struct GroupModel: EditableItemConformable {
    let id: UUID
    var title: String
    var items: IdentifiedArrayOf<ChildModel> = []
}

Both of those can be used as the state for the EditableItemView.

Now putting this all together I have two screens that list items, the first screen is a list of "groups" that should have editable titles, the second screen is a list of "child" items that belong to the select group.

GroupsView.swift

enum GroupsViewAction: Equatable {
    case addGroup
    case delete(IndexSet)
    case move(IndexSet, Int)
    case editModeChanged(EditMode)
    case item(id: GroupModel.ID, action: GroupDetailsAction)
    case item2(id: GroupModel.ID, action: EditableItemAction)
}

struct GroupsViewState: Equatable {
    var items: IdentifiedArrayOf<GroupModel> = []
    var editMode: EditMode = .inactive
}

/// How can I use this reducer for a single view (EditableItemView) below?
let groupReducer: Reducer<GroupModel, EditableItemAction, AppEnvironment> = makeItemReducer()

let groupsViewReducer = Reducer<GroupsViewState, GroupsViewAction, AppEnvironment>.combine(
    groupDetailsReducer.forEach(
        state: \.items,
        action: /GroupsViewAction.item(id:action:),
        environment: { $0 }
    ),
    Reducer { state, action, environment in
        switch action {
        case .addGroup:
            let item = GroupModel(
                id: environment.uuid(),
                title: "Test",
                items: []
            )
            state.items.append(item)
            return .none

        case let .editModeChanged(editMode):
            state.editMode = editMode
            return .none

        case .item, .item2:
            return .none

        case let .delete(indexSet):
            state.items.remove(atOffsets: indexSet)
            return .none

        case let .move(source, destination):
            state.items.move(fromOffsets: source, toOffset: destination)
            return .none
        }
    }
)
.debugActions(actionFormat: .prettyPrint)

struct GroupsView: View {

    let store: Store<GroupsViewState, GroupsViewAction>

    var body: some View {

        WithViewStore(store) { viewStore in

            NavigationView {
                List {
                    ForEachStore(
                        self.store.scope(
                            state: \.items,
                            action: GroupsViewAction.item(id:action:)
                        )
                    ) { itemStore in
                        NavigationLink {
                            GroupDetailsView(store: itemStore)
                        } label: {

                            /// Cannot convert value of type 'Store<GroupModel, GroupDetailsAction>' to expected argument type 'Store<GroupModel, EditableItemAction>'
                            /// Need to be able to scoped version of `itemStore`for each item that works with the `EditableItemAction`, how
                            /// can I achieve this?
                            EditableItemView<GroupModel>(store: itemStore)
                                .padding()
                                .border(Color.red, width: 1)
                            Spacer()
                                .frame(width: 100)

//                            WithViewStore(itemStore) { viewStore in
//                                Text(viewStore.title)
//                            }
                        }
                    }
                    .onDelete { viewStore.send(.delete($0)) }
                    .onMove { viewStore.send(.move($0, $1)) }
                }
                .navigationTitle("Items")
                .toolbar {
                    HStack {
                        EditButton()
                        Button {
                            viewStore.send(.addGroup)
                        } label: {
                            Image(systemName: "plus")
                        }
                    }
                }
            }
            .environment(
              \.editMode,
               viewStore.binding(get: \.editMode, send: GroupsViewAction.editModeChanged)
            )
        }
    }
}

The detail screen looks like this:

GroupDetailsView.swift

enum GroupDetailsAction: Equatable {
    case addItem
    case delete(IndexSet)
    case move(IndexSet, Int)
    case item(id: ChildModel.ID, action: EditableItemAction)
}

let childReducer: Reducer<ChildModel, EditableItemAction, AppEnvironment> = makeItemReducer()

let groupDetailsReducer = Reducer<GroupModel, GroupDetailsAction, AppEnvironment>.combine(
    childReducer.forEach(
        state: \.items,
        action: /GroupDetailsAction.item(id:action:),
        environment: { $0 }
    ),
    Reducer { state, action, environment in
        switch action {
        case .addItem:
            let item = ChildModel(
                id: environment.uuid(),
                title: "Test",
                isPopular: false
            )
            state.items.append(item)
            return .none

        case .item:
            return .none

        case let .delete(indexSet):
            state.items.remove(atOffsets: indexSet)
            return .none

        case let .move(source, destination):
            state.items.move(fromOffsets: source, toOffset: destination)
            return .none
        }
    }
)
.debugActions(actionFormat: .prettyPrint)

struct GroupDetailsView: View {

    let store: Store<GroupModel, GroupDetailsAction>

    var body: some View {

        WithViewStore(store) { viewStore in

            List {
                ForEachStore(
                    self.store.scope(
                        state: \.items,
                        action: GroupDetailsAction.item(id:action:)
                    )
                ) { groupDetails in
                    HStack {
                        EditableItemView<ChildModel>(store: groupDetails)
                        WithViewStore(groupDetails) { viewStore in
                            if viewStore.isPopular {
                                Text("Popular!")
                            }
                        }
                    }
                }
                .onDelete { viewStore.send(.delete($0)) }
                .onMove { viewStore.send(.move($0, $1)) }
            }
            .toolbar {
                HStack {
                    EditButton()
                    Button {
                        viewStore.send(.addItem)
                    } label: {
                        Image(systemName: "plus")
                    }
                }
            }
            .navigationTitle(viewStore.title)
        }
    }
}

If you want to try building this you'll need an entry point:

main.swift

import ComposableArchitecture
import SwiftUI

@main
struct testApp: App {
    var body: some Scene {
        WindowGroup {
            GroupsView(
                store: Store(
                    initialState: GroupsViewState(items: .mock),
                    reducer: groupsViewReducer,
                    environment: AppEnvironment(
                        uuid: UUID.init
                    )
                )
            )
        }
    }
}

struct AppEnvironment {
    var uuid: () -> UUID
}

extension IdentifiedArray where ID == GroupModel.ID, Element == GroupModel {
  static let mock: Self = [
    GroupModel(
      id: UUID(uuidString: "DEADBEEF-DEAD-BEEF-DEAD-BEEDDEADBEEF")!,
      title: "Group 1",
      items: .mock
    ),
    GroupModel(
      id: UUID(uuidString: "CAFEBEEF-CAFE-BEEF-CAFE-BEEFCAFEBEEF")!,
      title: "Group 2",
      items: .mock
    ),
    GroupModel(
      id: UUID(uuidString: "D00DCAFE-D00D-CAFE-D00D-CAFED00DCAFE")!,
      title: "Group 3",
      items: .mock
    ),
  ]
}

extension IdentifiedArray where ID == ChildModel.ID, Element == ChildModel {
  static let mock: Self = [
    ChildModel(
      id: UUID(uuidString: "2A543D97-844A-4BAA-B648-86B6478D475A")!,
      title: "Item 1",
      isPopular: false
    ),
    ChildModel(
      id: UUID(uuidString: "9C4436EF-6D5A-4CE0-9321-08FA8C7DD0D7")!,
      title: "Item 2",
      isPopular: true
    ),
    ChildModel(
      id: UUID(uuidString: "FC604136-38E0-4306-BFF2-3CCBE8FB5E34")!,
      title: "Item 3",
      isPopular: false
    ),
  ]
}

The issue I'm having is this code in the GroupsView.swift:

                    ForEachStore(
                        self.store.scope(
                            state: \.items,
                            action: GroupsViewAction.item(id:action:)
                        )
                    ) { itemStore in
                        NavigationLink {
                            GroupDetailsView(store: itemStore)
                        } label: {

                            /// Cannot convert value of type 'Store<GroupModel, GroupDetailsAction>' to expected argument type 'Store<GroupModel, EditableItemAction>'
                            /// Need to be able to scoped version of `itemStore`for each item that works with the `EditableItemAction`, how
                            /// can I achieve this?
                            EditableItemView<GroupModel>(store: itemStore)
                                .padding()
                                .border(Color.red, width: 1)
                            Spacer()
                                .frame(width: 100)

It's unclear to me how to scope the already scoped itemStore so that it uses the GroupsViewAction.item2(id:action:) which is needed because the action is EditableItemAction which is needed to perform the editing action on the EditableItemView's reducer.

Can anyone advise how I can work with a scoped array using ForEach with two different actions?

I'm wondering if I'm approaching this all wrong but it feels like I should be able to have shared views that have their own reducers that can work with different concrete types as long as they conform to a protocol.

Here is a video of how it looks currently:

Simulator.Screen.Recording.-.iPhone.13.-.2022-02-25.at.18.58.44.mp4

Gist: https://gist.github.com/cameroncooke/fea9126060ec6ad3661ff711e66926ce
Cross-posting from: https://forums.swift.org/t/how-to-reuse-view-and-reducer-with-more-than-one-model/55568

[cameroncooke]

Can I assume the lack of replies means that it's just not possible to reuse views with different models like this? Really would love some advice or help on this as I really want to give TCA ago, but I'm now considering rolling my own lightweight unidirectional redux style framework.

[mbrandonw]

The lack of replies may be due to there being a lot of code in your post to understand. Is there a simpler way to explain what you are trying to achieve, and a smaller code snippet that shows the problem you are having?

From briefly looking at the point you highlight in the code I'm not sure I understand how the domain is modeled. You have an itemStore with type:

itemStore: Store<GroupModel, GroupDetailsAction>

And you somehow want to transform that into a:

Store<GroupModel, EditableItemAction>

However, GroupModel holds onto an entire array of ChildModels:

struct GroupModel: EditableItemConformable {
  ...
  var items: IdentifiedArrayOf<ChildModel> = []
}

And GroupDetailsAction identifies the actions for a particular ChildModel in that array:

enum GroupDetailsAction: Equatable {
  ...
  case item(id: ChildModel.ID, action: EditableItemAction)
}

Looking at this domain modeling makes it seem impossible to speak about GroupModel and EditableItemAction together. Instead it seems like GroupModel and GroupDetailsAction are describing a list of ChildModels, which means you could use a ForEachStore to further scope that to something that deals with ChildModel and EditableItemAction.

My gut reaction tells me that the domain modeling is just not quite right. It seems the GroupView domain describes a list of Group domains, and the Group domain describes a list of ChildModel domains, yet somehow you want views to take state from the Group domain and actions from the ChildModel domain. And that doesn't look right to me.

but I'm now considering rolling my own lightweight unidirectional redux style framework.

Curious what features you would include in your framework that are not currently present in TCA. Maybe that would help me and others see the problems you are having.

FWIW, the repo has a few examples of reusable components, in case you haven't seen it:

• A reusable favoriting component
• A download component
• And lots of other case studies here, including other higher-order reducers.

[iampatbrown]

The lack of replies may be due to there being a lot of code in your post to understand.

This was definitely part of it :P I kept forgetting to revisit this post. I'm still not 100% on the question but are you asking:

How do I rescope a child action to a different child action on the root action that share the same state?

You might need to introduce an intermediary action. eg:

enum GroupItemAction: Equatable {
  case details(GroupDetailsAction)
  case edit(EditableItemAction)
}

enum GroupsViewAction: Equatable {
  case addGroup
  case delete(IndexSet)
  case move(IndexSet, Int)
  case editModeChanged(EditMode)
  case item(id: GroupModel.ID, action: GroupItemAction)
}

Then created an item reducer to pullback with .forEach:

let groupItemReducer = Reducer<GroupModel, GroupItemAction, AppEnvironment>.combine(
  groupDetailsReducer
    .pullback(state: \.self,
      action: /GroupItemAction.details,
      environment: { $0 }
    ),
  groupReducer.pullback(
    state: \.self,
    action: /GroupItemAction.edit,
    environment: { $0 }
  )
)

let groupsViewReducer = Reducer<GroupsViewState, GroupsViewAction, AppEnvironment>.combine(
  groupItemReducer.forEach(
    state: \.items,
    action: /GroupsViewAction.item(id:action:),
    environment: { $0 }
  ),
  ...

Then scope .details and .edit separately:

ForEachStore(
  self.store.scope(
    state: \.items,
    action: GroupsViewAction.item(id:action:)
  )
) { itemStore in
  NavigationLink {
    GroupDetailsView(
      store: itemStore
        .scope(state: { $0 }, action: GroupItemAction.details)
    )
  } label: {
    EditableItemView<GroupModel>(
      store: itemStore
        .scope(state: { $0 }, action: GroupItemAction.edit)
    )
  }
}

Like I said, I'm not sure if that is the problem you're facing, so if you have a smaller example that would be awesome.

[cameroncooke]

Sorry, that's my bad, I kind of assumed presenting a fully worked example of my problem would be easier to understand as I was struggling to articulate the issue. Though I do agree it's a bit off-putting a post due to the amount of code.

Essentially all I'm trying to do is use make a reusable view with its own reducer that can work on different shape domain models as long as they satisfy the requirements needed by the view i.e. conform to a protocol. My issues are almost certainly due to a lack of a full understanding of how TCA works.

I'm going to have a play with the feedback you've kindly provided and then update this post with my findings. Thanks so much!

[iampatbrown]

Sorry, that's my bad, I kind of assumed presenting a fully worked example of my problem would be easier to understand

It's fine to include code like you did and don't stress about not being able to articulate the issue. I'm glad you posted. It was more I hadn't taken then time to fully look at it and sometimes I'll be on my phone too :)

Essentially all I'm trying to do is use make a reusable view with its own reducer that can work on different shape domain models as long as they satisfy the requirements needed by the view i.e. conform to a protocol. My issues are almost certainly due to a lack of a full understanding of how TCA works.

As in you want to be able to use generic state with a store? I think you have kind of done that correctly already. The issue from your example seems more related to the ForEachStore scoping.

@mbrandonw included some examples with generic types that are worth checking out.

I'm going to have a play with the feedback you've kindly provided and then update this post with my findings.

Awesome :)

[cameroncooke]

@iampatbrown Thank you for your suggestion it worked perfectly! I think I've not fully grasped how actions are used as part of scoping as this feels somewhat opaque to me, though I do understand the concept of scoping global state to local state and vice-versa.

Here is the working example: https://gist.github.com/cameroncooke/fea9126060ec6ad3661ff711e66926ce

I do feel in some of the TCA examples there is repetition because each part of the state being worked on is unique so you can end up with multiple reducers performing the same actions/logic on different parts of state. I guess my experience told me to avoid some duplication and try and make reusable components that can work with any part of state as long as it conforms to an interface as this is a common pattern used in most other architectures, it feels a bit more effort to do that with TCA. Also, a lot of examples have a single reducer per screen and I essentially wanted to have a reducer for a component view but that view might be backed by a different part of state depending on the context in which it's used.

What I would like to understand is what I'm trying to achive fighting the architecture or is it perfectly reasonable?

[cameroncooke]

Curious what features you would include in your framework that are not currently present in TCA. Maybe that would help me and others see the problems you are having.

I didn't mean I was trying to create an alternative to TCA it was more than some of the complexity I'm struggling with seems to be related to the fact that it's composable but for a simple app like I'm trying to build feels a bit daunting so it might be easier for me to build my own lightweight one-off reducer, store for my specific needs etc as currently using TCA feels like I'm using a sledgehammer to crack a nut but I agree TCA seems pretty feature complete.