ForEach scope reducers with different types.

[vadimkrutovlv]

Hello. 👋

I wanted to ask for an advice on how to scope reducers with a different types and preserve data order.
Suppose I'm working on potential feature Survey this feature has multiple question types such as list of choices, free text, numeric answer and date answer. Since all question types are different from each other and might have different requirements on how to handle answers for me it makes sense each question to have its own reducer. So my initial idea was to use something what is suggested here because by end of the day survey is nothing but list with different row types, but I can't figure out what would be the best approach to hold on multiple state types and actions. I hope I did explain myself clear enough.

Here's a code example to represent better what I'm trying to achieve.

Survey model:

struct Survey {
    let title: String
    let description: String
    let questions: [AnySurveyQuestion] // Type erasure wrapper to keep Equatable conformance for existential.
}

struct SurveyQuestionChoice: SurveyQuestionProtocol {
    let questionText: String
    let choices: [SurveyQuestionChoiceAnswer]
}

struct SurveyQuestionChoiceAnswer {
    let text: String
}

struct SurveyQuestionFreeText: SurveyQuestionProtocol {
    let questionText: String
    let maxLength: String
    let answer: String
}

struct SurveyQuestionNumeric: SurveyQuestionProtocol {
    let questionText: String
    let allowedRange: ClosedRange<Double>
    let answer: Double
}

struct SurveyQuestionDate: SurveyQuestionProtocol {
    let questionText: String
    let maxDate: Date
    let minDate: Date?
    let answer: Date
}

Reducer

@Reducer
struct SurveyReducer {
    @ObservableState
    struct State: Equatable {
        var survey: Survey
        var questions: IdentifiedArrayOf<AnySurveyQuestionState> = [] // Here we can insert different survey question states 
    }

    enum Action {
        case questions(IdentifiedActionOf<AnySurveyQuestionReducer>) // Here we hold on different actions from different question reducers
    }

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .questions:
                // Handle action from every question type
                return .none

            }
        }
        .forEach(\.questions, action: \.questions) { AnySurveyQuestionReducer() }
    }
}

SwiftUI View:

struct SurveyView: View {
    @Bindable var store: StoreOf<SurveyReducer>

    var body: some View {
        ForEach(store.scope(state: \.questions, action: \.questions)) { store in
            switch store {
            case let choice as SurveyChoiceReducer:
                SurveyChoiceView(store: choice)
            case let freeText as SurveyFreeTextReducer:
                SurveyFreeTextView(store: freeText)
            case let numeric as SurveyNumericReducer:
                SurveyNumericView(store: numeric)
            case let date as SurveyDateReducer:
                SurveyDateView(store: date)
            }
        }
    }
}

Update

After spending some time learning how the Destination and Path reducers work I was able to achieve what I want, here is the code, in case anyone has better ideas I'd be very happy to hear them. In the example we have some sort of List feature where list items of different types are arranged in a specific order.

Reducers:

@Reducer
struct ListToggleFeature {
    @ObservableState
    struct State: Identifiable, Equatable {
        let id: UUID
        var item: ListToggleItem = .init(title: "", isToggled: false)
        var isOn = false
    }
    enum Action: BindableAction {
        case onAppear
        case binding(BindingAction<State>)
    }

    var body: some ReducerOf<Self> {
        BindingReducer()
        Reduce { state, action in
            return .none
        }
    }
}

@Reducer
struct ListFreeTextFeature {
    @ObservableState
    struct State: Identifiable, Equatable {
        let id: UUID
        var item: ListFreeTextItem = .init(title: "Text", text: "taxi")
    }
    enum Action {
        case onAppear
    }

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            return .none
        }
    }
}

@Reducer
struct ListFeature {
    @ObservableState
    struct State: Equatable {
        var items: IdentifiedArrayOf<ListItems.State> = .init(
            uniqueElements: [
                .toggle(.init(id: .init(1))),
                .text(.init(id: .init(3))),
                .toggle(.init(id: .init(2), item: .init(title: "Toggle 2", isToggled: false)))
            ]
        ) // Populate state with different reducers
    }

    enum Action {
        case items(IdentifiedActionOf<ListItems>)
    }

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .items(.element(id: _, action: .text(.onAppear))):
                print("text appeared")
                return .none
            case .items(.element(id: _, action: .toggle(.onAppear))):
                print("toggle appeared")
                return .none
            case .items(.element(id: _, action: .toggle(.binding(\.isOn)))):
                print("toggle state changed")
                return .none
            case .items:
                return .none
            }
        }
        .forEach(\.items, action: \.items)
    }
}

Here's an actual reducer which does the thing, it's very similar to what @Reducer macro generates for Path and Destination reducers with small addition to it which is State conformance to Identifiable, this is needed to satisfy requirements of IdentifiedArrayOf type.

I think an alternative approach might be to update the @Reducer macro by adding new "identifiable" option for the state parameter.
@Reducer(state: .identifiable).

@Reducer
struct ListItems: CaseReducer {
    @ObservableState
    enum State: Identifiable, Equatable, CaseReducerState {
        var id: UUID {
            switch self {
            case let .toggle(state): 
                state.id
            case let .text(state): 
                state.id
            }
        }

        typealias StateReducer = ListItems
        case toggle(ListToggleFeature.State)
        case text(ListFreeTextFeature.State)
    }

    @CasePathable
    enum Action {
        case toggle(ListToggleFeature.Action)
        case text(ListFreeTextFeature.Action)
    }

    static var body: ReducerBuilder<State, Action>
        ._Sequence<
            Scope<State, Action, ListToggleFeature>,
            Scope<State, Action, ListFreeTextFeature>
        >  {
        Scope(state: \Self.State.Cases.toggle, action: \Self.Action.Cases.toggle) {
            ListToggleFeature()
        }
        Scope(state: \Self.State.Cases.text, action: \Self.Action.Cases.text) {
            ListFreeTextFeature()
        }
    }

    enum CaseScope {
        case toggle(StoreOf<ListToggleFeature>)
        case text(StoreOf<ListFreeTextFeature>)
    }

    static func scope(_ store: Store<State, Action>) -> CaseScope {
        switch store.state {
        case .text:
            return .text(store.scope(state: \.text, action: \.text))
        case .toggle:
            return .toggle(store.scope(state: \.toggle, action: \.toggle))
        }
    }
}

Small extension which enables store.case syntax in the view similarly as path and destination reducers.

extension Reducer {
    func forEach<ElementState: CaseReducerState, ElementAction, ID>(
        _ state: WritableKeyPath<State, IdentifiedArray<ID, ElementState>>,
        action: CaseKeyPath<Action, IdentifiedAction<ID, ElementAction>>
    ) -> some Reducer<State, Action> where ElementState : CaseReducerState, ElementAction == ElementState.StateReducer.Action {
        self.forEach(state, action: action) {
            ElementState.StateReducer.body
        }
    }
}

And finally SwiftUI views

struct ListView: View {
    @Bindable var store = Store(initialState: ListFeature.State()) { ListFeature() }

    var body: some View {
        VStack {
            ForEach(store.scope(state: \.items, action: \.items)) { store in
                switch store.case {
                case let .text(store):
                    ListItemTextView(store: store)
                case let .toggle(store):
                    ListItemToggleView(store: store)
                }
            }
        }
    }
}

struct ListItemToggleView: View {
    @Bindable var store: StoreOf<ListToggleFeature>

    var body: some View {
        VStack {
            HStack {
                Text(store.item.title)
                Toggle("Toggle", isOn: $store.isOn)
            }
        }
        .onAppear { store.send(.onAppear) }
    }
}

struct ListItemTextView: View {
    @Bindable var store: StoreOf<ListFreeTextFeature>

    var body: some View {
        VStack(alignment: .leading) {
            Text(store.item.title)
                .font(.system(size: 13))
                .foregroundStyle(.gray)
                .padding(.leading, 10)
            TextField("Textfield", text: $store.text)
                .textFieldStyle(.roundedBorder)
        }
        .onAppear { store.send(.onAppear) }
    }
}

If you try this code you will see that order in which reducers are scoped is exactly the same as we populated items property of type IdentifiedArrayOf<ListItems.State> in ListItemsFeature, which is ListToggleFeature -> ListFreeTextFeature -> ListToggleFeature.