Navigation

[xspyhack]

Hey everyone!

How to use navigation with multiple optional page in TCA?
In the simple demo project, after clicking push button on the First View, the Second View appears and then disappears immediately.

demo project

struct AppState: Equatable, Identifiable {
  var id = UUID()
  var first: Identified<FirstState.ID, FirstState?>?
}

enum AppAction {
  case first(FirstAction)
  case setNavigation(selection: UUID?)
}

struct AppEnvironment {
}

let appReducer = Reducer<AppState, AppAction, AppEnvironment>.combine(
  Reducer { state, action, env in
    switch action {
    case let .setNavigation(selection: .some(navigatedId)):
      state.first = Identified(FirstState(), id: navigatedId)
    case .setNavigation(selection: .none):
      state.first = nil
    default:
      ()
    }
    return .none
  },
  firstReducer
    .optional()
    .pullback(state: \Identified.value, action: .self, environment: { $0 })
    .optional()
    .pullback(
      state: \AppState.first,
      action: /AppAction.first,
      environment: { $0 }
    )
)

struct ContentView: View {
  let store: Store<AppState, AppAction>

  var body: some View {
    NavigationView {
      WithViewStore(store) { viewStore in
        VStack {
          Text(viewStore.id.uuidString.prefix(5))
          NavigationLink(
            tag: viewStore.id,
            selection: viewStore.binding(
              get: \.first?.id,
              send: AppAction.setNavigation(selection:))
          ) {
            IfLetStore(store.scope(
              state: \.first?.value,
              action: AppAction.first
            ), then: FirstView.init(store:))
          } label: {
            Text("Push")
          }
        }
        .navigationTitle("Root View")
      }
    }
  }
}

struct FirstState: Equatable, Identifiable {
  var id = UUID()
  var second: Identified<SecondState.ID, SecondState?>?
}

enum FirstAction {
  case second(SecondAction)
  case setNavigation(selection: UUID?)
}

let firstReducer = Reducer<FirstState, FirstAction, AppEnvironment> { state, action, env in
  switch action {
  case let .setNavigation(selection: .some(navigatedId)):
    state.second = Identified(SecondState(), id: navigatedId)
  case .setNavigation(selection: .none):
    state.second = nil
  default:
    ()
  }
  return .none
}

struct FirstView: View {
  let store: Store<FirstState, FirstAction>

  var body: some View {
    WithViewStore(store) { viewStore in
      VStack {
        Text(viewStore.id.uuidString.prefix(5))
        NavigationLink(
          tag: viewStore.id,
          selection: viewStore.binding(
            get: \.second?.id,
            send: FirstAction.setNavigation(selection:))
        ) {
          IfLetStore(store.scope(
            state: \.second?.value,
            action: FirstAction.second
          ), then: SecondView.init(store:))
        } label: {
          Text("Push")
        }
      }
    }
    .navigationTitle("First View")
  }
}


struct SecondState: Equatable, Identifiable {
  var id = UUID()
}

enum SecondAction {
}

struct SecondView: View {
  let store: Store<SecondState, SecondAction>

  var body: some View {
    WithViewStore(store) { viewStore in
      VStack {
        Text(viewStore.id.uuidString.prefix(5))
      }
      .navigationTitle("Second View")
    }
  }
}

[netspencer]

i'm experiencing the same issue. i present a screen and it immediately dismisses itself

[stephencelis]

A thing you have to be careful about when using SwiftUI is parent views observing too much state. If a parent is observing state that changes, it may re-compute its body, and if its body contains an active navigation link, the whole thing may be popped and re-presented.

This behavior is observable in vanilla SwiftUI, though comes up more quickly in the Composable Architecture, where you keep all your state in one place. The problem is usually in the form of this line:

WithViewStore(store) { viewStore in

This WithViewStore is observing all state and its body will recompute whenever a single field inside it changes. Instead, you should use scope to pluck out just the state the view needs.

In this case you can scope to just the id, which will prevent the WithViewStore view from re-computing when first changes:

WithViewStore(store.scope(state: \.id)) { viewStore in
  VStack {
    Text(viewStore.uuidString.prefix(5))
    NavigationLink(
      tag: viewStore.state,
      selection: viewStore.binding(
        get: \.first?.id,
        send: AppAction.setNavigation(selection:))
    ) {
      IfLetStore(store.scope(
        state: \.first?.value,
        action: AppAction.first
      ), then: FirstView.init(store:))
    } label: {
      Text("Push")
    }
  }
  .navigationTitle("Root View")
}

[xspyhack]

NavigationLink(
  tag: viewStore.state,
  selection: viewStore.binding(
    get: \.first?.id, // error: state `id` has no member 'first'
    send: AppAction.setNavigation(selection:))
)

[ole]

    get: \.first?.id, // error: state `id` has no member 'first'

You can fix this by scoping the ContentView view store to exactly the properties you need. It's a bit of boilerplate unfortunately:

struct ContentViewState: Equatable {
  var id: UUID
  var firstID: FirstState.ID?
}

extension AppState {
  var contentViewState: ContentViewState {
    ContentViewState(id: self.id, firstID: self.first?.id)
  }
}

// In ContentView.body
 …
 WithViewStore(store.scope(state: \.contentViewState)) { viewStore in
   VStack {
     Text(viewStore.id.uuidString.prefix(5))
     NavigationLink(
       tag: viewStore.id,
       selection: viewStore.binding(
         get: \.firstID,
         send: AppAction.setNavigation(selection:))
     ) {
       …

The important bit is to exclude FirstState.second from ContentViewState (including transitively) because that's the property that changes when the second view is pushed.

[xspyhack]

Thanks ole, it works!

[xspyhack]

I don't understand why FirstState.second changes will cause SecondView push and pop immediately but FirstView won't.