Not getting expected parent domain state mutations when implementing stack based navigation

[catienza022]

I'm attempting to learn/ use TCA while writing my son a side project app to help him practice reading. I am either misunderstanding something or implementing something wrong (or both!). I'm following along with episode 246 but things start to become unexpected (to me) once I compose child reducers with the path reducer.

In constructing a Story domain, where a user can customize a story and then read it after, I have the following:

@Reducer
public struct StoryFeature: Reducer {
    
    public var body: some ReducerOf<Self> {
        Reduce { state, action in
            ...
        }
        .ifCaseLet(\.create, action: \.create) {
            CreateStoryFeature()
        }
        .ifCaseLet(\.read, action: \.read) {
            ReadStoryFeature()
        }
    }
    
    public enum State: Equatable {
        case create(CreateStoryFeature.State)
        case read(ReadStoryFeature.State)
    }
    
    public enum Action: Equatable {
        case create(CreateStoryFeature.Action)
        case read(ReadStoryFeature.Action)
    }
}

I've implemented state as an enum as you're either creating a story or reading one, but never both at the same time. I can see the argument for having create and read as separate domains/ screens but I still want to figure this out.

The create story domain consists of a series of smaller sub-features (as I like to think of them) and looks something like this:

public struct CreateStoryFeature {      
    ...
    public var body: some ReducerOf<Self> {
        Scope(state: \.mainCharacter, action: \.mainCharacter) {
            SelectMainCharacterFeature()
        }

        Reduce { state, action in
            switch action {
                   ...
                     returning no effect here for everything
                   ...
                }
            }
        }.forEach(\.path, action: \.path) {
            Path()
        }
        ._printChanges()
    }
    
    // MARK: Action
    public enum Action: Equatable {
        case path(StackAction<Path.State, Path.Action>)
        case mainCharacter(SelectMainCharacterFeature.Action)
        case secondaryCharacters(SelectSecondaryCharactersFeature.Action)
        case genre(SelectStoryGenreFeature.Action)
        case topics(SelectStoryTopicsFeature.Action)
        case reset
        case createStory
        case delegate(Delegate)
        
        public enum Delegate: Equatable {
            case storyGenerated(Story)
            case storyGenerationFailed
        }
    }
}

public extension CreateStoryFeature {
    struct State: Equatable {
        // Navigation paths
        var path: StackState<Path.State>
        
        // Sub-features
        var mainCharacter: SelectMainCharacterFeature.State
        var secondaryCharacters: SelectSecondaryCharactersFeature.State
        var genre: SelectStoryGenreFeature.State
        var topics: SelectStoryTopicsFeature.State
        ...
    }
}

The path reducer looks like:

public extension CreateStoryFeature {
    @Reducer
    struct Path: Reducer {
        public var body: some ReducerOf<Self> {
            Scope(state: \.secondaryCharacters, action: \.secondaryCharacters) {
                SelectSecondaryCharactersFeature()
            }
            Scope(state: \.genre, action: \.genre) {
                SelectStoryGenreFeature()
            }
            Scope(state: \.topics, action: \.topics) {
                SelectStoryTopicsFeature()
            }
        }
        
        // MARK: State
        public enum State: Equatable {
            case secondaryCharacters(SelectSecondaryCharactersFeature.State)
            case genre(SelectStoryGenreFeature.State)
            case topics(SelectStoryTopicsFeature.State)
        }
        
        // MARK: Action
        public enum Action: Equatable {
            case secondaryCharacters(SelectSecondaryCharactersFeature.Action)
            case genre(SelectStoryGenreFeature.Action)
            case topics(SelectStoryTopicsFeature.Action)
        }
    }
}

The root view of the story domain looks like this:

public struct StoryView: View {

    private let store: StoreOf<StoryFeature>
    
    public var body: some View {
        SwitchStore(self.store) { state in
            switch state {
            case .create:
                CaseLet(
                    /StoryFeature.State.create,
                     action: StoryFeature.Action.create,
                     then: CreateStoryRootView.init
                )
            case .read:
                CaseLet(
                    /StoryFeature.State.read,
                     action: StoryFeature.Action.read,
                     then: ReadStoryView.init
                )
            }
        }
    }
}

And the root view of the create story domain looks like this:

public struct CreateStoryRootView: View {
    
    let store: StoreOf<CreateStoryFeature>
    
    public var body: some View {
        NavigationStackStore(self.store.scope(state: \.path, action: { .path($0) })) {
            SelectMainCharacterView(store: self.store.scope(
                state: \.mainCharacter,
                action: { .mainCharacter($0) }
            ))
        } destination: { state in
            switch state {
            case .secondaryCharacters:
                CaseLet(
                    /CreateStoryFeature.Path.State.secondaryCharacters,
                     action: CreateStoryFeature.Path.Action.secondaryCharacters,
                     then: SelectSecondaryCharactersView.init(store:)
                )
            case .genre:
                CaseLet(
                    /CreateStoryFeature.Path.State.genre,
                     action: CreateStoryFeature.Path.Action.genre,
                     then: SelectStoryGenreView.init(store:)
                )
            case .topics:
                CaseLet(
                    /CreateStoryFeature.Path.State.topics,
                     action: CreateStoryFeature.Path.Action.topics,
                     then: SelectStoryTopicsView.init(store:)
                )
            }
        }
    }
}

I use navigation links in each of the sub-feature/ domain views to drive navigation/ path state changes like in the video. I'm monitoring the parent reducer with printChanges and I've written a few tests and what I'm noticing is that whenever I perform an action in the SelectMainCharacter domain, I get the expected state change. That is, StoryFeature.create.mainCharacter.relevantProperties are mutated. Note that this main character domain isn't combined with my path reducer, as its the root domain and view of the create story feature. Once I reach the "second level" of this flow, the SelectSecondaryCharacters domain, I stop seeing any mutations at all in the parent domain of StoryFeature. Any action performed in the SelectSecondaryCharacters domain start triggering breakpoints as expected in my path reducer, its own reducer, even the parent StoryFeature domain reducer, but its state is never actually mutated. printChanges spits out "no state changes" in the console and unit tests like this, fail:

let testStore = TestStore(
            initialState: CreateStoryFeature.State()
        ) {
            CreateStoryFeature()
        }
        let topic = ...
        await testStore.send(.topics(.selectTopic(topic))) {
            $0.topics.selectedTopic = topic // expected state mutation but none occurred...
        }

but this test passes:

let testStore = TestStore(
            initialState: CreateStoryFeature.State()
        ) {
            CreateStoryFeature()
        }
        let user = ...
        await testStore.send(.mainCharacter(.setSelectedCharacter(user))) {
            $0.mainCharacter.mainCharacter = user
        }
        await testStore.send(.mainCharacter(.setSelectedCharacter(nil))) {
            $0.mainCharacter.mainCharacter = nil
        }

I must not be understanding something when composing the higher order reducer with path and friends. This was a long post, any tips or insight or timestamps in relevant episodes are greatly appreciated!

[mbrandonw]

Hi @catienza022, can you share a minimal project that demonstrates the behavior you are seeing?

[catienza022]

@mbrandonw Thanks for your time 🙏 . Here's a little sample with that logic extracted out of it. The UI is a little confusing in the minimal version - if any "next" button is disabled, tapping on the text at the top left of the screen will enable it. This mimics the real app behavior of selecting stuff from that screen in the flow. All of the issues I described above are reproducible in this sample

[catienza022]

@mbrandonw I was able to get the tests working. I wasn't scoping all of my child domains into the parent, however even with those changes I am still seeing the issues I described above. When all the components are selected and it's time to create a story, the child states are somehow all nil, even though I see the reducer printChanges show state changes.

You'll see this snippet in the sample project I linked above and it crashes every time with genre being nil:

guard let mainCharacter = state.mainCharacter.mainCharacter, let genre = state.genre.selectedGenre 
else { fatalError() }

[catienza022]

Even stranger, on performing actions in the child domain, the state changes but the console says no state change:

received action:
  CreateStoryFeature.Action.mainCharacter(.fetchUsers)
  (No state changes)

received action:
  CreateStoryFeature.Action.mainCharacter(
    .setUsers(
      [
        [0]: User(
          id: "91199535-4BF1-4031-B7D6-40615A51DFA0",
          username: "user -1",
          avatar: Avatar(
            id: "CE8E2CF2-25F3-418A-8B3E-A7CB453B8001",
            image: UIImage()
          )
        ),
        [1]: User(
          id: "6EDDEA6F-02B3-4FC7-A8EE-A9E1FFB8AF5B",
          username: "user 0",
          avatar: Avatar(
            id: "CE5177D2-6F36-4488-9EFD-434200098567",
            image: UIImage#2()
          )
        )
      ]
    )
  )
  (No state changes)

received action:
  CreateStoryFeature.Action.mainCharacter(
    .setSelectedCharacter(
      User(
        id: "91199535-4BF1-4031-B7D6-40615A51DFA0",
        username: "user -1",
        avatar: Avatar(
          id: "CE8E2CF2-25F3-418A-8B3E-A7CB453B8001",
          image: UIImage()
        )
      )
    )
  )
  (No state changes)

[catienza022]

Alright, I may have figured it out. On episode 246 at about the 31 minute mark you mention that the features aren't actually completely integrated together at this point. We need a way for children to let the parent know that data has updated by pattern matching on path actions (or the nested delegate action pattern). In your video example you popFrom and update at that point. I missed this because I don't need to update parent data on popping, but rather pushing/ navigating from the last screen of the flow.

[catienza022]

So now I've got it working using

.onChange(of: \.mainCharacter) { oldValue, newValue in
                Reduce { state, action in
                    .send(.delegate(.mainCharacterSelected(newValue)))
                }
        }

I don't see a version of onChange that observes the entire state, not just a property on the state. So in my use case the child domains will be out of sync with the parent on a variety of random properties. This might be okay(?) since I don't necessarily care about those specific properties in the parent domain 🤔 but may be nice to have in the future

[jshier]

You may be able to observe \.self to get the whole state value, but it doesn't always work.

[catienza022]

@jshier I can't seem to figure out how to get that to work and not sure I even want to if it doesn't always work haha 😓

[jshier]

Yeah, looks like onChange takes the closure and Swift never implemented the identity KeyPath to closure transform it won't work. But you can use a closure directly:

.onChange(of: { $0 }) { _, newValue in
    Reduce { _, _ in
        print("New State: \(newValue)")
        return .none
    }
}