Combining Stores

[GreatApe]

Hello, I have been trying to solve this conundrum for several days now, but can't find a good solution.

Short version

The short version is that I have two Stores and I want to create a store that takes state from both, given a transform function that combines the states. For my purposes it is fine to ignore the actions from the second store. I have a suggestion for a function that does this in a later post.

Full version

My situation is that I have

• A number of Pages in a TabView
• On each page I have a number of Cards in a VStack
• In each Card I have a number of Words

To make this nice I have a MainState with an let pages: IdentifiedArrayOf<Page> property. In each Page I have an IdentifiedArrayOf<Card> etc

I have two levels of ForEachStore, and this all works pretty well, except I get some excessive rendering of invisible Pages, and for some reason I can't make the VStack lazy. But this is not the issue now. Instead it's this:

• The appearance of each Word is derived both from the metadata in each IconState, inside the the array of arrays in MainState, and from a property let seenWords: Set<Word.ID> on MainState.

The way I see it there are three options:

1. Pre-combine seenWords and pages already in MainState, and then feed into the ForEachStores.

Now this would be simple to use, there would be a computed property "pageViewStates" that automatically was kept updated, but this would involve re-calculating the entire list of lists so that each Word gets a proper let seen: Bool value, even when just a single value was added to seenWords. It would probably be computed a lot more than that, considering how SwiftUI works.

2. Manually update the seen property on the affected words when seenWords or pages changes

This is efficient, since we only flip the state, and only on the relevant words. We don't touch all the other metadata in each Word, and especially not on the Cards and Pages. On the other hand it gets very messy (in reality it's more complex than just seenWords, there are at least three different inputs, and the seen state actually has five different values). It also seems to go against the idea of SwiftUI and reactive paradigms.

3. Apply the seenWords list on each Word, and the leaf so to speak.

This is what seems most appealing to me. We can do this in a straightforward way on each word, for example a function:

extension Word {
    func seenState(using seenWords: SeenWords) -> SeenState {
        // ...
    }
}

We don't care how often this function gets called since it would only happen on visible Words. In fact I wouldn't mind doing it at the Card level either, that shouldn't be an issue.

The problem is that I can't get the Card to render when SeenWords changes in this scenario.

struct CardState: Equatable, Identifiable {
    let id: UUID
    let metadata: MetaData
}

struct CardViewState: Equatable, Identifiable {
    let id: UUID
    let metadata: MetaData
    let seen: SeenState
}

extension CardState {
    func viewState(with seenWords: SeenWordsState) -> CardViewState {
        .init(id: id,
              metadata: metadata,
              seen: seenState(using: seenWords))
    }
}

struct CardView: View {
    @ObservedObject private var viewStore: Store<CardViewState, CardAction>

    init(store: Store<CardState, CardAction>, seenWordsStore: Store<SeenWordsState, Never>) {
        let seenWordsState = ViewStore(seenWordsStore).state
        let viewStateStore = store.scope { cardState in
            // Combine the list in seenWordsState with the card state
            cardState.viewState(with: seenWordsState)
        }
        self.viewStore = ViewStore(store)
    }
    // ...
}

This doesn't trigger a re-render (or even init) when seenWordsStore changes. It doesn't help to move the state out of the init, and extract it in the "superview":

struct CardView: View {
    @ObservedObject private var viewStore: Store<CardViewState, CardAction>

    init(store: Store<CardState, CardAction>, seenWordsState: SeenWordsState) {
        let viewStateStore = store.scope { cardState in
            // Combine the list in seenWordsState with the card state
            cardState.viewState(with: seenWordsState)
        }
        self.viewStore = ViewStore(store)
    }
}

I'm thinking that what I want is something like

WithViewStore(store1, store2) { state1, state2 in
     // Combine state1 and state2 and return a third kind of state, which will be the state of our ViewStore
     // As long as this third state doesn't change, the view will not be re-rendered
}

[GreatApe]

By the way, I've tested with nested WithViewStores, but that seems to always cause every single Card to render, even the ones where nothing in the resulting, inner state changes. Maybe because the state in the outer one does change?

[GreatApe]

OK, so when I flip the viewstores around it works, only the relevant view gets redrawn when SeenWordsState changes.

struct CardView: View {
    let store: ViewStore<CardState, CardAction>
    let seenWordsStore: Store<SeenWordsState, Never>

    var body: some View {
        WithViewStore(store) { viewStore in
            let scopedStore = seenWordsStore.scope { viewStore.state.viewState(with: $0) }
            WithViewStore(scoped) { scopedViewStore in
                // ...
            }
        }
    }
}

where

viewStore is ViewStore<CardState, CardAction>
scopedStore is Store<CardViewState, Never>
scopedViewStore is ViewStore<CardViewState, Never>

Come to think of it, perhaps I just need a new scope function, something like

extension Store {
    func scope<OtherState: Equatable, OtherAction: Equatable, ChildState: Equatable>(
                with otherStore: Store<OtherState, OtherAction>,
                childState: (State, OtherState) -> ChildState)
    -> Store<ChildState, Action> {
        //...
    }
}

Then it would just be

struct CardView: View {
    let store: ViewStore<CardState, CardAction>
    let seenWordsStore: Store<SeenWordsState, Never>

    var body: some View {
        let scopedStore = store.scope(with: seenWordsStore) { $0.state.viewState(with: $1) }
        WithViewStore(scopedStore) { viewStore in
            // ...
        }
    }
}

Question: Where can I read about how and when redrawing is triggered with ViewStores? Or with SwiftUI in general.

[GreatApe]

Would something like this work? And a corresponding WithViewStore.

    public init<SomeState, OtherState, OtherAction>(
        _ store: Store<SomeState, Action>,
        combiningStateFrom otherStore: Store<OtherState, OtherAction>,
        removeDuplicates isDuplicate: @escaping (State, State) -> Bool
        _ combine: @escaping (SomeState, OtherState) -> State,
    ) {
        self._send = { store.send($0) }
        self._state = CurrentValueRelay(combine(store.state.value, otherStore.state.value))
        self.viewCancellable = store.state.combineLatest(otherStore.state, combine)
        .removeDuplicates(by: isDuplicate)
        .sink { [weak objectWillChange = self.objectWillChange, weak _state = self._state] in
          guard let objectWillChange = objectWillChange, let _state = _state else { return }
          objectWillChange.send()
          _state.value = $0
        }
    }

Then I'd be able to do this:

let viewStore_ = ViewStore(store, combiningStateFrom: seenWordsStore, removeDuplicates: ==) { (cardState, seenState) in
    cardState.viewState(with: seenState)
}

[GreatApe]

I think this will have a very different effect. Remember that store1 is a global thing, which is the same for all leaf views in my array of arrays. So I don't want them all to rerender every time store1 changes. I only want to re-render when my combined value changes.

The concept of having a single store per view is nice in theory, but I've found it much easier to organise stores around responsibilities, like the audio system, navigation state etc.

In my case store2 is a leaf of a leaf so to speak, it comes from an array in an array (with some metadata at each level. So the only other alternative, following the one-view-one-store concept, would be to bake together the global state with my nested structure at the root level. That actually seems to be too expensive to do in a computed property fashion, so I would need to manage it manually, which becomes really messy.

[mbrandonw]

I think this will have a very different effect. Remember that store1 is a global thing, which is the same for all leaf views in my array of arrays. So I don't want them all to rerender every time store1 changes. I only want to re-render when my combined value changes.

You can still scope the stores however you want before observing:

struct ContentView: View {
  let store1: Store<State1, Action1>
  let store2: Store<State2, Action2>
  @ObservedObject var viewStore1: ViewStore<ViewState1, Action1>
  @ObservedObject var viewStore2: ViewStore<ViewState2, Action2>
  
  init(store1: Store<State1, Action1>, store2: Store<State2, Action2>) {
    self.store1 = store1
    self.store2 = store2
    self.viewStore1 = ViewStore(self.store1.scope(state: ViewState1.init))
    self.viewStore2 = ViewStore(self.store2.scope(state: ViewState2.init))
  }

  …
}

You can make each view store observe as little as they need to get the job done.

The concept of having a single store per view is nice in theory, but I've found it much easier to organise stores around responsibilities, like the audio system, navigation state etc.

It goes beyond theory. Slicing the domain horizontally like that makes it easier to create features that "work" in isolation yet are completely broken when integrated. The only way to test the integration of those parts is to test the view layer, which is difficult and flakey.

Slicing vertically, by feature, allows things to be built and tested in isolation, but then also their integrations can also be easily unit tested. And it's still possible to have the concept of "services", but they are handled mostly in the dependency layer and as higher-order reducers (see the haptics and sounds reducers in isowords for examples).

[GreatApe]

In terms of data, this is a simplified version of what I'm dealing with:

struct AppState: Equatable {
    var books: IdentifiedArrayOf<BookModel>

    var globalReadState: GlobalReadState
}

// Mostly static data

struct MetaData: Hashable { ... }

struct BookModel: Identifiable, Hashable {
    let id: UUID
    let metadata: MetaData
    let cards: IdentifiedArrayOf<CardModel>
}

struct CardModel: Identifiable, Hashable {
    let id: UUID
    let metadata: MetaData
    let cards: IdentifiedArrayOf<WordModel>
}

struct WordModel: Identifiable, Hashable {
    let id: UUID
    let text: String
}

// Dynamic state

struct GlobalReadState: Equatable {
    var readWords: Set<UUID>
    var wordCurrentlyBeingRead: UUID?
}

enum ReadState: Equatable {
    case read
    case unread
    case reading

    init(wordID: UUID, globalReadState: GlobalReadState) {
        if wordID == globalReadState.wordCurrentlyBeingRead {
            self = .reading
        } else {
            self = globalReadState.readWords.contains(wordID) ? .read : .unread
        }
    }
}

extension WordView.ViewState {
    init(word: WordModel, globalReadState: GlobalReadState) {
        self.text = word.text
        self.readState = .init(wordID: word.id, globalReadState: globalReadState)
    }
}

// View

struct WordView: View {
    struct ViewState: Equatable {
        let text: String
        let readState: ReadState
    }

    let viewState: ViewState

    var body: some View {
        // ...
    }
}

[GreatApe]

You can still scope the stores however you want before observing

Yes, I can scope the individual states, but that doesn't help. I need to scope the combination, I need to merge the states first, and then scope it!

[GreatApe]

To merge the static and dynamic data in the root, would mean something like this:

struct AppState: Equatable {
    var books: IdentifiedArrayOf<BookModel>

    var globalReadState: GlobalReadState

    var bakedBooks: IdentifiedArrayOf<BakedBookModel> {
        let baked = books.map { $0.baked(using: globalReadState) }
        return .init(uniqueElements: baked)
    }
}

extension BookModel {
    func baked(using global: GlobalReadState) -> BakedBookModel {
        let baked = cards.map { $0.baked(using: global) }
        return .init(id: id, metadata: metadata, cards: .init(uniqueElements: baked))
    }
}

extension CardModel {
    func baked(using global: GlobalReadState) -> BakedCardModel {
        let baked = words.map { $0.baked(using: global) }
        return .init(id: id, metadata: metadata, words: .init(uniqueElements: baked))
    }
}

extension WordModel {
    func baked(using global: GlobalReadState) -> BakedWordModel {
        .init(id: id, text: text, readState: .init(wordID: id, globalReadState: global))
    }
}

struct BakedBookModel: Identifiable, Hashable {
    let id: UUID
    let metadata: MetaData
    let cards: IdentifiedArrayOf<BakedCardModel>
}

struct BakedCardModel: Identifiable, Hashable {
    let id: UUID
    let metadata: MetaData
    let words: IdentifiedArrayOf<BakedWordModel>
}

struct BakedWordModel: Identifiable, Hashable {
    let id: UUID
    let text: String
    let readState: ReadState
}

This is very simple to deal with, but it seems to be way too slow. Even with my very limited data it takes something like 7 ms to generate. So I would have to manually update bakedBooks whenever any of the input variables change. Or is there another way that I'm missing?

Btw, as to testing, the merged viewstore is only used for visual information, it doesn't affect any logic, so it's not something I am interested in testing anyway.