state based navigation

[JaapWijnen]

Hi! I'm having some trouble trying to do state based navigation. I have three views of which one is reused in this example:
ViewA: a card linking to a more detailed view (ViewB) OR directly into the edit view
ViewB: a detail view with a button linking to the edit view
ViewC: an edit view
The navigation flow from ViewA therefore looks like this:

   B --- C
  /
 /
A --- C

ViewB navigates to C using the following:

struct ViewB: View {
  var body: some View {
    WithViewStore(store) { viewStore in 
      ViewBInternals {
        // view layout
      }.background(
        NavigationLink(
          destination: ViewC(store: store.scope(
            state: \.cState,
            action: B.Action.cAction
          )),
          isActive: viewStore.binding(\.$showCView)
        )
      )
    }
  }
}

ViewA navigates to both B and C using:

struct ViewA: View {
  var body: some View {
    WithViewStore(store) { viewStore in 
      ViewAInternals {
        // view layout
      }.background(
        NavigationLink(
          destination: ViewB(store: store.scope(
            state: \.bState,
            action: A.Action.bAction
          )),
          isActive: viewStore.binding(\.$showBView)
        )
      )
      .background(
        NavigationLink(
          destination: ViewC(store: store.scope(
            state: \.cState,
            action: A.Action.cAction
          )),
          isActive: viewStore.binding(\.$showCView)
        )
      )
    }
  }
}

Now whenever I navigate from A to B and then try to navigate to C. C shows up shortly and then B is rerendered and shown instead of C.
I've read in some discussions that this has to do with rerendering of parent views but I'm not sure how to stop that from happening in my current situation.
Does having computed state also influence this? What is best practice in this regard? I can't really find a fully explained navigation story/best practices and examples for TCA at the moment is that correct?

[mbrandonw]

Is it possible to provide some code that shows the problem that we can run locally? It seems a little weird that B shows up at all if you are navigating to C. That could only happen if showBView is true at some point.

[mbrandonw]

It does not currently play nicely with @BindableState, but we do have experiments to make things better, and we hope to finalize some of that stuff soon. For the demo you posted it doesn't seem like it would be much more verbose to ditch the @BindableState, so I would recommend doing that for now.

And it shouldn't be necessary to use multiple WithViewStore's in order to hyper focus the observations. Feel free to do so if you want, but it should be enough to just use WithViewStore a single time and chisel away the state to the bare essentials of what the view needs.

[JaapWijnen]

This unfortunately does not seem to work. As it opens up as if it navigated to an empty view. When you press back you arrive at A but here the buttons are unresponsive unfortunately.

Group {
    WithViewStore(store.stateless) { viewStore in
        VStack {
            Text("This is A")
            Button {
                viewStore.send(.buttonBTapped)
            } label: {
                Text("Button to B")
            }
            Button {
                viewStore.send(.buttonCTapped)
            } label: {
                Text("Button to C")
            }
        }
    }
    WithViewStore(store, observe: { $0.showB }) { viewStore in
        NavigationLink(
            destination: ViewB(store: store.scope(
                state: \.bState,
                action: A.Action.b
            )),
            isActive: viewStore.binding(get: { state in
                state
            }, send: .dismissB) ,
            label: { EmptyView() }
        )
    }
    WithViewStore(store, observe: { $0.showC }) { viewStore in
        NavigationLink(
            destination: ViewC(store: store.scope(
                state: \.cState,
                action: A.Action.c
            )),
            isActive: viewStore.binding(get: { state in
                state
            }, send: .dismissC) ,
            label: { EmptyView() }
        )
    }
}

[mbrandonw]

Here is a simplified version of your code that works: https://gist.github.com/mbrandonw/baed47c03fbf4ab405e33dd1525fadc4

I got rid of the hidden navigation links. They aren't necessary. You can just use the links as your buttons. I also got rid of the bindable state, and the action for showing/dismiss a destination needs to take a boolean in order to work with the isActive binding for links.

[JaapWijnen]

@mbrandonw thanks for the great advice!
My ViewA now looks as follows. works like a charm :)! I know the NavigationLink using an EmptyView as a NavigationLink label isn't the best solution unfortunately but hoping to find a replacement for that in the future. This is so the button action and NavigationLink firing are only coupled in the reducer to maximise reuse of these views.

public struct ViewA: View {
    var store: Store<A.State, A.Action>
    
    public init(store: Store<A.State, A.Action>) {
        self.store = store
    }
    
    struct ViewState: Equatable {
        var showB: Bool
        var showC: Bool
    }
    
    public var body: some View {
        WithViewStore(
            store,
            observe: { state in
                ViewState(showB: state.showB, showC: state.showC)
            }
        ) { viewStore in
            VStack {
                Text("This is A")
                Button {
                    viewStore.send(.buttonBTapped)
                } label: {
                    Text("Button to B")
                }
                Button {
                    viewStore.send(.buttonCTapped)
                } label: {
                    Text("Button to C")
                }
            }
            .background(
                NavigationLink(
                    destination: ViewB(store: store.scope(
                        state: \.bState,
                        action: A.Action.b
                    )),
                    isActive: viewStore.binding(
                        get: \.showB,
                        send: .bDismissed
                    ),
                    label: { EmptyView() }
                )
            )
            .background(
                NavigationLink(
                    destination: ViewC(store: store.scope(
                        state: \.cState,
                        action: A.Action.c
                    )),
                    isActive: viewStore.binding(
                        get: \.showC,
                        send: .cDismissed
                    ),
                    label: { EmptyView() }
                )
            )
        }
    }
}

[JaapWijnen]

Ah only just now saw the code you provided thanks a lot @mbrandonw! Ah yeah I've separated the buttons and NavigationLink since I have a special case where the view is used in such a way that in the reducer when a certain piece of state is set to true it will navigate to 1 view and if it is false it will navigate to another view.
So say in the reducer action switch statement:

case .aAction(.buttonBTapped):
  if state.didRead {
    state.showB = true
  } else {
    state.showC = true
  }
  return .none

This happens in a parent feature however so that's how I customise how viewA is used.
In another instance the parent feature's reducer will just look like:

case .aAction(.buttonBTapped):
  state.showB = true
  return .none

I'm working in a codebase where these kinds of NavigationLinks with labels: EmptyView() are used throughout but I'd love to get a cleaner approach if you have any advice on that!