Leave view updating parent view and messing with navigation

[alvarezGarciaMarcos]

Hi everyone,

I am trying to develop a new application using TCA and I am currently loving it! However, I am encountering a behaviour that I don't really know how to fix. I wrote a little project to recreate the problem so that anyone that has encountered something similar can help me to overcome this. In the code below I have three screens: RootView, IntermediateView, and CounterView. RootView is the main view of the application and has to listen to some changes in the state of a child (in this case the Counter). The IntermediateView simply shows a Form with a NavigationView that leads to the CounterView. There, in the CounterView, user can increment or decrement the counter. However, when the user interacts with the counter, the user is taken to the previous screen, the IntermediateView.

As I tested, removing the WithViewStore in the RootView, solves the problem, but I do need to read data from the child in the RootView.

Any kind of help will be so much appreciated as I am starting to mess with this awesome library.

import SwiftUI
import ComposableArchitecture

@main
struct BlankProjectApp: App {
    var body: some Scene {
        WindowGroup {
            RootView(
                store: Store(
                    initialState: Root.State(),
                    reducer: Root()
                )
            )
        }
    }
}

// MARK: - Counter
struct Counter: ReducerProtocol {
    struct State: Equatable {
        var count: Int = 0
    }
    
    enum Action {
        case increment, decrement
    }
    
    func reduce(into state: inout State, action: Action) -> EffectTask<Action> {
        switch action {
        case .increment:
            state.count += 1
            return .none
            
        case .decrement:
            state.count -= 1
            return .none
        }
    }
}

struct CounterView: View {
    var store: StoreOf<Counter>
    
    var body: some View {
        WithViewStore(store, observe: { $0 }) { viewStore in
            VStack {
                Text(String(viewStore.state.count))
                HStack {
                    Button {
                        viewStore.send(.decrement)
                    } label: {
                        Text("-")
                    }

                    Button {
                        viewStore.send(.increment)
                    } label: {
                        Text("+")
                    }
                }
            }
        }
    }
}

// MARK: - Intermediate screen
struct Intermediate: ReducerProtocol {
    struct State: Equatable {
        var counter = Counter.State()
    }
    
    enum Action {
        case counter(Counter.Action)
    }
    
    var body: some ReducerProtocol<State, Action> {
        Scope(state: \.counter, action: /Action.counter) {
            Counter()
        }
    }
}

struct IntermediateView: View {
    var store: StoreOf<Intermediate>
    
    var body: some View {
        Form {
            NavigationLink {
                CounterView(store: store.scope(state: \.counter, action: Intermediate.Action.counter))
            } label: {
                Text("Counter")
            }

        }
    }
}

// MARK: - Root
struct Root: ReducerProtocol {
    struct State: Equatable {
        var intermediate = Intermediate.State()
    }
    
    enum Action {
        case intermediate(Intermediate.Action)
    }
    
    var body: some ReducerProtocol<State, Action> {
        Scope(state: \.intermediate, action: /Action.intermediate) {
            Intermediate()
        }
    }
}

struct RootView: View {
    var store: StoreOf<Root>
    
    var body: some View {
        WithViewStore(store, observe: { $0 }) { viewStore in
            NavigationView {
                Form {
                    Text(String(viewStore.intermediate.counter.count))
                    
                    NavigationLink {
                        IntermediateView(store: store.scope(state: \.intermediate, action: Root.Action.intermediate))
                    } label: {
                        Text("Intermediate")
                    }
                }
            }
        }
    }
}

[mbrandonw]

This is sadly a SwiftUI bug, and it's even reproducible in vanilla SwiftUI. If you ever have a navigation hierarchy Screen A > Screen B > Screen C, such that Screen A has a navigation link and its body recomputes for any reason, then the navigation stack will be popped for some reason.

For your particular situation you can hyper focus the WithViewStore to be only around the part that needs the state, in particular don't wrap the NavigationLink inside it:

struct RootView: View {
  var store: StoreOf<Root>

  var body: some View {
    NavigationView {
      Form {
        WithViewStore(store, observe: { $0 }) { viewStore in
          Text(String(viewStore.intermediate.counter.count))
        }

        NavigationLink {
          IntermediateView(
            store: store.scope(state: \.intermediate, action: Root.Action.intermediate))
        } label: {
          Text("Intermediate")
        }
      }
    }
  }
}

That trick may not always be possible, but if it is, then it works.

Separately, we highly recommend not doing observe: { $0 }, especially at root and intermediate views. See this article for more info why. Chiseling away the state doesn't help this specific use case because your root really does need that child state, but it does still help in a wide variety of scenarios.

[alvarezGarciaMarcos]

Thank you very much for your quick response! I didn't know this was a SwiftUI bug, I really thought it was me using the library int he wrong way. Using your approach of not having the NavigationLink inside of the WithViewStore really fixed it!.

And thank you so much for the article, it has been so helpful and I have already improved my code with a couple things I could read on it.

[mbrandonw]

Glad it helped!

BTW, there was a critical typo in my previous comment:

Separately, we highly recommend NOT doing observe: { $0 }...

Just wanted to make sure to clarify that 🙂

[alvarezGarciaMarcos]

Yes, from the article that you linked I understood that you meant not doing it, but thanks for clarifying ☺️