Coordinating navigation for multiple children

[seanmrich]

Say you have a split view in a Mac app where both views have the ability to open a sheet. A naive, simplified example might look like this:

struct Parent: ReducerProtocol {
  struct State {
    var child1: Child1.State
    var child2: Child2.State
  }

  enum Action {
    case child1 (Child1.Action)
    case child2 (Child2.Action)
  }

  var body: some ReducerProtocol<State, Action> {
    Scope(state: \.child1, action: /Action.child1) {
      Child1()
    }
    Scope(state: \.child2, action: /Action.child2) {
      Child2()
    }
  }
}

struct Child1: ReducerProtocol {
  struct State {
    var sheetIsPresented: Bool
  }

  enum Action {
    case detailButtonTapped
    case sheetDismissed
  }

  var body: some ReducerProtocol<State, Action> {
    Reduce { state, action in 
      // ...
    }
  }
}

struct Child2: ReducerProtocol {
  // ... mirrors Child1
}

The problem is that Parent doesn't have a single, exclusive destination as is the case in all the examples I've looked through. It has two children that are both shown at the same time. This means that it's possible to have an invalid state where both children's sheetIsPresented is set to true.

I suppose you could intercept the actions of the children within the Parent reducer, acting as the coordinator between the two, but this seems fragile and easy to mess up. Also, if this approach is changed to having a single navigation 'path' at the root level, the path (or maybe a subset) would have to be passed to each child, and one child could override the changes made by another.

Is there a recommended approach to handling this coordination problem? I've been through the previous and recent navigation episodes, searched the forums, and looked through the in-progress work on the NavigationState features in the Composable Architecture repo. Probably a lack of imagination on my part, but I don't see this case addressed with the current tools.

[mbrandonw]

Hi @seanmrich, if I understand correctly, it seems that the child features should not each have their own navigation state. As you mentioned, that allows for invalid states.

Instead, the navigation state should be coalesced into the parent as a single piece of state. An enum would be great for this:

struct State {
  var destination: Destination?
}
enum Destination {
  case child1Sheet(Sheet.State)
  case child2Sheet(Sheet.State)
}

Technically, TCA has all the tools to accomplish this, they just aren't very ergonomic right now. The brand new navigation APIs we are working on will make this much nicer.

I would say give that domain modeling a shot and let us know if you have any questions. There have also been a few discussions about this topic, such as this one.

[seanmrich]

Thanks for the guidance. I actually had read that thread, but I didn't connect it to my own problem. Like I said, lack of imagination. Appreciate you connecting the dots for me.

[corysullivan]

I would be interested in this as well. The referenced discussion illustrates switching between two views, but I'm curious how to get this working with sheet views, specifically how to scope the store. I'm using the SwiftUINavigation library to switch on the destinations, but it's not clear to me how I can scope the store.

ParentView()
.sheet(
      unwrapping: viewStore.binding(get: { $0.destination }, send: .dismissedChildView1),
      case: /Parent.State.Destination.child1Sheet,
      content: { _ in
             // How do you get scoped store for child view 1
        }
      })

[mbrandonw]

Hi @corysullivan, this looks like you are using our swiftui-navigation library and that library isn't really meant to be used with TCA. We need first class navigation tools for TCA.

You can mostly get it to work with something like this:

ParentView()
.sheet(
  unwrapping: viewStore.binding(get: { $0.destination }, send: .dismissedChildView1),
  case: /Parent.State.Destination.child1Sheet
) { _ in 
  IfLetStore(
    store.scope(state: { $0.destination.flatMap(/Destination.chidl1Sheet) }, action: ...),
   content: ChildSheetView.init(store:)
}

But at that point the swiftui-navigation tools aren't buying much. You might as well do this:

ParentView()
.sheet(
  isPresented: viewStore.binding(
    get: { viewStore.destination.flatMap(/Destination.child1Sheet) != nil }, 
    send: .dismissedChildView1
  )
) {
  IfLetStore(
    store.scope(state: { $0.destination.flatMap(/Destination.chidl1Sheet) }, action: ...),
   content: ChildSheetView.init(store:)
}

That is the rough idea at least. You may need to do more to get the domains to 100% align.

[corysullivan]

Gotcha. Thanks!