Shared state best practices?

[dmeehan1968]

I'm exploring TCA and trying some simple applications to better understand the architecture and see how it maps to some of problems I've encountered with SwiftUI development.

I got a simple demo which implements a Parent and Child view, with corresponding TCA State, Actions and reducers.

In the demo source,

• Parent holds a list of items (Strings for simplicity)
  • is responsible for establishing navigation and searching, providing the filtered items to the Child
  • Child state is recomputed each time the query changes (real apps would likely debounce the input)
• Child view implements the List view, using ForEach on the items
  • applying the onMove and onDelete modifiers to enable delete and visual reordering, sending actions when these occur

The problem I have is that I can't figure out how to propogate changes to the filtered list back to the Parent. I'm aware I can add a case to the Parent reducer to observe the move/delete actions occuring on the Child, but the offsets that are provided are relative to the Child's filtered version of the list, which has already been modified due to combine order (it's not clear if I can reverse the reducer order in combine without other unwanted side effects).

I've played around with a separate object type to hold the items and propogate changes but this seems undesirable as it starts to allow for state changes outside of TCA. It seems like there should be a TCA state associated with a collection of items, the 'source of truth', and a subset is passed to the Child but is linked, so that changes also occur in the Parent list.

Logically the Child view should be responsible for its own actions, i.e. operations on its own list of items should be propagated back to the parent, without the parent having to repeat the changes, or perform them on behalf of the Child so that updates trickle back to the Child. The Child view -should- both function as a standalone view, and be reusable.

I can't really fathom from the SharedState and Search examples how those techniques would apply.

Here is some boilerplate for the application, which works up to the point of needing to propagate the changes between Parent and Child.

Thanks in advance for any pointers.

Parent.swift - Parent view, state, actions and reducer

import SwiftUI
import ComposableArchitecture

// MARK: S T A T E

struct ParentState: Equatable {
    var items: [String]
    var child: ChildState
    @BindableState var query: String = ""

    init(items: [String]) {
        self.items = items
        self.child = ChildState(items: items)
    }
}

extension ParentState {
    static var testData = [
        "First",
        "Second",
        "Third",
        "Fourth",
    ]
}

// MARK: A C T I O N

enum ParentAction: Equatable, BindableAction {
    case binding(BindingAction<ParentState>)
    case child(action: ChildAction)
}

// MARK: R E D U C E R

let parentReducer = Reducer<ParentState, ParentAction, Void>.combine(

    childReducer.pullback(
        state: \.child,
        action: /ParentAction.child,
        environment: { _ in Void() }
    ),

    Reducer { state, action, _ in

        switch action {

        case .binding(\.$query):
            state.child = ChildState(items: state.items.filter({ state.query.isEmpty || $0.lowercased().contains(state.query.lowercased()) }))

        case .child(action: .move(fromOffsets: let source, toOffset: let destination)):
            // TODO: apply to state.items, recalculate state.child to reapplying filter
            // NB: offsets are relative to child (filtered) view, so not
            // valid in parent
            break

        case .child(action: .delete(atOffsets: let source)):
            // TODO: apply to state.items, recalculate state.child to reapplying filter
            // NB: offsets are relative to child (filtered) view, so not
            // valid in parent
            break

        default:
            break
        }

        return .none
    }
    .binding()
)

// MARK: S T O R E

typealias ParentStore = Store<ParentState, ParentAction>

// MARK: V I E W

struct Parent: View {
    var store: ParentStore

    var body: some View {
        WithViewStore(self.store) { viewStore in
            NavigationView {
                IfLetStore(
                    self.store.scope(state: { $0.child }, action: ParentAction.child(action:)),
                then: { store in
                    Child(store: store)
                }) {
                    Text("No Child")
                }
                .toolbar {
                    ToolbarItem(placement: .primaryAction, content: { EditButton() })
                }
                .navigationTitle("Searchable List")
                .navigationBarTitleDisplayMode(.inline)
            }
            .navigationViewStyle(.stack)
            .searchable(text: viewStore.binding(\.$query))
        }
    }
}

// MARK: P R E V I E W

struct Parent_Previews: PreviewProvider {
    static var previews: some View {
        Parent(
            store: ParentStore(
                initialState: ParentState(
                    items: ParentState.testData
                ),
                reducer: parentReducer,
                environment: Void()
            )
        )
    }
}

Child.swift - Child view, state, actions and reducer

//
//  Child.swift
//  architectures
//
//  Created by Dave Meehan on 04/11/2021.
//

import SwiftUI
import ComposableArchitecture

// MARK: S T A T E

struct ChildState: Equatable {
    var items: [String] = []
}

// MARK: A C T I O N

enum ChildAction: Equatable {
    case move(fromOffsets: IndexSet, toOffset: Int)
    case delete(atOffsets: IndexSet)
}

// MARK: R E D U C E R

let childReducer = Reducer<ChildState, ChildAction, Void> { state, action, _ in

    switch action {
    case .move(fromOffsets: let source, toOffset: let destination):
        print("Action: \(action), source: \(source.map({ $0 })), destination: \(destination)")
        // TODO: apply changes to state.items
        // NB: changes not propagated to parent, so must be repeated there
        break

    case .delete(atOffsets: let source):
        print("Action: \(action), source: \(source.map({ $0 }))")
        // TODO: apply changes to state.items
        // NB: changes not propagated to parent, so must be repeated there
        break
    }
    return .none
}

// MARK: S T O R E

typealias ChildStore = Store<ChildState, ChildAction>

// MARK: V I E W

struct Child: View {
    var store: ChildStore

    var body: some View {
        WithViewStore(self.store) { viewStore in
            if viewStore.items.count > 0 {
                List() {
                    ForEach(viewStore.items, id: \.self) { item in
                        Text(item)
                    }
                    .onMove(perform: { viewStore.send(.move(fromOffsets: $0, toOffset: $1)) })
                    .onDelete(perform: { viewStore.send(.delete(atOffsets: $0)) })
                }
            } else {
                Text("No matches")
            }
        }
    }
}

struct Child_Previews: PreviewProvider {
    static var previews: some View {
        Child(
            store: ChildStore(
                initialState: ChildState(items: ParentState.testData),
                reducer: childReducer,
                environment: Void()
            )
        )
    }
}

[tgrapperon]

One way to do it would be to make child a computed property of Parent:

struct ParentState: Equatable {
  var items: [String]
  @BindableState var query: String = ""

  init(items: [String]) {
    self.items = items
  }
  var child: ChildState {
    get { .init(items: items) }
    set { items = newValue.items }
  }
}

If your child feature have some internal state you don't want to handle with your parent, you can use a private storage property:

struct ParentState: Equatable {
  var items: [String]
  @BindableState var query: String = ""

  init(items: [String]) {
    self.items = items
  }
  private var _child: ChildState = .init(items: [])
  var child: ChildState {
    get { 
      var state = _child
      state.items = items
      return state
    }
    set { 
      _child = newValue
      items = newValue.items 
    }
  }
}

This allows to preserve any internal state set by the child, while ensuring it always receives an up to date items array from its parent.

You can furthermore append additional behaviors when reducing child actions in parentReducer if needed.

[tgrapperon]

I'm not using Snapshot testing, but if I did, I would use a standard TCA store.
You're ultimately not testing the same thing in both setups:

• TestStore -> You're testing the validity of your model and business logic, regardless of the UI.
• Snapshot testing -> You're testing that things (most likely the UI) stay the same as you evolve the app. This doesn't check the validity of what's represented (your reference snapshot can be wrong). In this spirit, I would put the app in the closest configuration it will effectively run on devices. TestStore is not a Store, and you won't be able to extract ViewStore's. You will also need to acknowledge effects when snapshot testing, which doesn't seem to make sense.

[dmeehan1968]

Thanks, that was the clarification I needed.

[remlostime]

@tgrapperon For snapshot testing, since in View, we use ViewStore to send the action, and we cannot access ViewStore in our snapshot test. How do we mimic each action flow to the ViewStore and compare the screenshot?

[tgrapperon]

I'm not a specialist with snapshot testing, and I think @mbrandonw or @stephencelis may provide better insights, but I would create a stateless ViewStore (ViewStore(store.stateless)) to send actions to the store from outside the View. The ViewStore from the View should update the view accordingly.

With snapshot testing, you want to check that the UI is reflecting your state, so I would say that, in many cases, you can even forgo the ViewStore and push new Stores with different initial states and snapshot the results.

As I'm getting it, snapshot testing is your test harness against UI regressions. It doesn't check that the submit button is visible when it should: it only checks that the snapshot is the same as the one you reviewed and validated.

For this reason, I don't think testing the business logic at the same time as snapshots (i.e., in the same test) would be a good practice if this is something you envisaged.

Now, as you will generate many states when testing the business logic, it may be possible to exploit TestStore to snapshot some codable state values and feed them later to a snapshot testing pass.

Again, I'm providing some very naive advice, as I'm not using snapshot testing myself (yet). Please take it with a pinch of salt.

[hibernat]

@tgrapperon I like the idea of updating the child state VERY much! Great, thanks!
I dislike initializing new child state in the getter, your idea is just brilliant.

[dmeehan1968]

I've done some more work on this and come up with a possible solution, although I'm not sure quite whether there might be some hidden gotchas. I've not seen another example of passing more than one store to a view, but this seemed to open up some possibilities.

There were several parts to the solution:

1. Turn the array of strings into a State/Action/Reducer/Store as ItemArray
2. Each item turned into an identifable Item
3. State an alias for IdentifiableArrayOf<Item>
4. Use pullback to integrate it into the Parent state.
5. Move the @BindableState var query: String property into the Child state
6. Pass both the Child store and the Item store into the Child view
7. Send the CRUD actions to the Item Store from within the child view
8. Sprinkle some syntactic sugar via extensions to the ItemArray to aid with the conversion from IndexSet/Int to Item.ID
9. I opted to group the State/Action/Reducer/Store under a struct that can't be instantiated (private init() { }) as a way of namespacing (I know people do with enum but the reducer can't be placed in an enum, so this seems to be an alternative).

Item.swift

import Foundation

struct Item: Identifiable, Equatable {
    var id = UUID()
    var title: String
}

ItemArray.swift

import Foundation
import ComposableArchitecture

struct ItemArray {

    private init() {}

    // MARK: S T A T E

    typealias State = IdentifiedArrayOf<Item>

    // MARK: A C T I O N

    enum Action: Equatable {
        case append(Item)
        case update(Item)
        case move(ids: [Item.ID], toId: Item.ID?)
        case remove(ids: [Item.ID])
    }

    // MARK: R E D U C E R

    static let reducer = Reducer<State, Action, Void> { state, action, _ in
        switch action {

        case .append(let item):
            state.append(item)

        case .update(let item):
            guard let index = state.firstIndex(where: { $0.id == item.id }) else { break }
            state.update(item, at: index)

        case .move(ids: let ids, toId: let toId):
            // convert Item.ID into [Int] offsets
            let source = ids
                // convert Id to offset?
                .map({ id in state.firstIndex(where: { $0.id == id })})
                // remove nil
                .filter({ $0 != nil })
                // unwrap
                .map({ $0! })

            // dest is either valid offset or out of range
            let dest = state.firstIndex(where: { $0.id == toId })
            // move source offsets to dest offset (or end of list if nil)
            state.move(fromOffsets: IndexSet(source), toOffset: dest ?? state.count)

        case .remove(ids: let ids):
            // convert Item.ID to [Int] offsets
            let source = ids.map({ id in state.firstIndex(where: { $0.id == id })}).filter({ $0 != nil }).map({ $0! })
            state.remove(atOffsets: IndexSet(source))

        }
        return .none
    }

    // MARK: S T O R E

    typealias Store = ComposableArchitecture.Store<State, Action>

}

Parent.swift

import SwiftUI
import ComposableArchitecture

struct Parent {

    // MARK: S T A T E

    struct State: Equatable {
        var items: ItemArray.State
        var child: Child.State

        init(items: [Item]) {
            self.items = ItemArray.State(uniqueElements: items)
            self.child = Child.State()
        }
    }

    // MARK: T E S T   D A T A

    static var testData = [
        Item(title: "Item 1"),
        Item(title: "Item 2"),
        Item(title: "Item 3"),
        Item(title: "Item 4"),
    ]

    // MARK: A C T I O N

    enum Action: Equatable, BindableAction {
        case binding(BindingAction<State>)
        case child(action: Child.Action)
        case items(action: ItemArray.Action)
    }

    // MARK: R E D U C E R

    static let reducer = Reducer<State, Action, Void>.combine(

        ItemArray.reducer.pullback(
            state: \.items,
            action: /Action.items,
            environment: { _ in Void() }
        ),

        Child.reducer.pullback(
            state: \.child,
            action: /Action.child,
            environment: { _ in Void() }
        ),

        Reducer { state, action, _ in
            return .none
        }
        .binding()
    )

    // MARK: S T O R E

    typealias Store = ComposableArchitecture.Store<State, Action>

    // MARK: V I E W

    struct View: SwiftUI.View {
        var store: Store

        var body: some SwiftUI.View {
            WithViewStore(self.store) { viewStore in
                NavigationView {
                    Child.View(
                        childStore: self.store.scope(state: { $0.child }, action: Parent.Action.child(action:)),
                        itemStore: self.store.scope(state: { $0.items }, action: Parent.Action.items(action:))
                    )
                    .toolbar {
                        ToolbarItem(placement: .primaryAction, content: { EditButton() })
                        ToolbarItem(placement: .bottomBar) {
                            Button("Add Item") { viewStore.send(.items(action:.append(Item(title: "Item \(viewStore.items.count+1)"))))}
                        }
                    }
                    .navigationTitle("Searchable List")
                    .navigationBarTitleDisplayMode(.inline)
                }
                .navigationViewStyle(.stack)
                .searchable(text: viewStore.binding(\.child.$query))
            }
        }
    }

}

// MARK: P R E V I E W

struct Parent_Previews: PreviewProvider {
    static var previews: some View {
        Parent.View(
            store: Parent.Store(
                initialState: Parent.State(
                    items: Parent.testData
                ),
                reducer: Parent.reducer,
                environment: Void()
            )
        )
    }
}

Child.swift

import SwiftUI
import ComposableArchitecture

struct Child {

    private init() {}

    // MARK: S T A T E

    struct State: Equatable {
        @BindableState var query: String = ""
    }

    // MARK: A C T I O N

    enum Action: Equatable, BindableAction {
        case binding(BindingAction<State>)
    }

    // MARK: R E D U C E R

    static let reducer = Reducer<State, Action, Void> { state, action, _ in

        return .none
    }
    .binding()

    // MARK: S T O R E

    typealias Store = ComposableArchitecture.Store<State, Action>

    // MARK: V I E W

    struct View: SwiftUI.View {
        var childStore: Store
        var itemStore: ItemArray.Store

        var body: some SwiftUI.View {
            WithViewStore(self.childStore) { childViewStore in
                WithViewStore(self.itemStore) { itemViewStore in
                    let filtered = itemViewStore.state.filtered(query: childViewStore.query)
                    if filtered.count > 0 {
                        List {
                            ForEach(filtered) { item in
                                HStack {
                                    Text(item.title)
                                    Spacer()
                                    Button("Update") {
                                            itemViewStore.send(.update(Item(id: item.id, title: item.title + ".")))
                                        }
                                }
                            }
                            .onMove { itemViewStore.onMove(items: filtered, fromOffsets: $0, toOffset: $1) }
                            .onDelete { itemViewStore.onDelete(items: filtered, atOffsets: $0) }
                        }
                    } else {
                        Text("No matches")
                    }
                }
            }
        }
    }
}

// MARK: E X T E N S I O N

extension ItemArray.State where Element == Item {
    func filtered(query: String) -> IdentifiedArrayOf<Element> {
        self.filter({
            query.isEmpty || $0.title.lowercased().contains(query.lowercased())
        })
    }

    func mapIds(from indexset: IndexSet) -> [Element.ID] {
        indexset.map({ self[$0].id })
    }

    subscript(safe index: Int) -> Element.ID? {
        self.indices.contains(index) ? self[index].id : nil
    }
}

extension ViewStore where State == ItemArray.State, Action == ItemArray.Action {
    func onMove(items: ItemArray.State, fromOffsets: IndexSet, toOffset: Int) -> Void {
        self.send(
            .move(
                ids: items.mapIds(from: fromOffsets),
                toId: items[safe: toOffset]
            )
        )
    }

    func onDelete(items: ItemArray.State, atOffsets: IndexSet) -> Void {
        self.send(
            .remove(
                ids: items.mapIds(from: atOffsets)
            )
        )
    }
}

struct Child_Previews: PreviewProvider {

    static var previews: some View {
        Child.View(
            childStore: Child.Store(
                initialState: Child.State(),
                reducer: Child.reducer,
                environment: Void()
            ),
            itemStore: ItemArray.Store(
                initialState: ItemArray.State(uniqueElements: Parent.testData),
                reducer: ItemArray.reducer,
                environment: Void()
            )
        )
    }
}

[mfclarke]

I'm still quite new to Composable Architecture, so please bear with me. Why isn't this a simple case of the parent reducer using the items array in the child property of state to translate the index to the full array and delete/move in the parent items accordingly?

This seems like a pretty basic use case and I'm surprised the answer would be to use 2 stores?

[mfclarke]

Ah sorry, the filtered array has already been modified by the time the parent reducer gets the actions. What about the parent reducer holding onto the previous filtered array in it's state as well? And updating that to the new filtered whenever it receives child move/delete actions, after applying the move/delete referencing the old filtered?

[dmeehan1968]

Whether the child collection has been modified or not is dependent on the order the reducers are combined. In practive I've realised that its less likely that you'd use index based logic, and more likely use id based logic (so the child translates the indexes provided by ForEach's onMove/onDelete into id's, then sends those as an action to the reducer - the parent can then intercept the child action and make the same changes to its own unfiltered collection. The simplicity of my sample actually made it hard to solve that adding a little complexity elsewhere.

[mfclarke]

Ah yes that all makes sense, and it's a much simpler solution than having 2 stores. Nice.

I feel like this should be one of the case studies. This scenario would crop up in a lot of apps. Even though in this particular example I would personally put it all into 1 reducer (since it's all the same screen/feature anyway), there are definitely cases where state needs to be shared across features where it's represented and worked on differently in each feature.