Navigate to enum with upcoming navigation tools

[rcarver]

I was playing with navigation using this gist that @mbrandonw shared recently. Really liking it, and it seems to be the basis for much bigger ideas in the protocol-navigation branch?

I ran into what's either a data modeling issue or a limitation of of the tools, so wanted to check my thinking:

• Is modeling presented state as an enum appropriate here?
• Does the same modeling apply to any modal presentation such as sheet?
• Am I missing something in how it should work currently? If not, how might the api change to support enums?

---

First I introduced NavigationLinkStore as I'm not working with ios16 yet. In looking at the proto branch it seems that the same core issue remains if using navigationDestination

struct NavigationLinkStore<Enum, Case, Action, LocalAction, Destination: View, Label: View>: View {
    let store: Store<Enum?, PresentationAction<Action>>
    let casePath: CasePath<Enum, Case>
    let toLocalAction: (LocalAction) -> Action
    let destination: (Store<Case, LocalAction>) -> Destination
    let label: Label
    init(
        unwrapping store: Store<Enum?, PresentationAction<Action>>,
        case casePath: CasePath<Enum, Case>,
        action toLocalAction: @escaping (LocalAction) -> Action,
        @ViewBuilder destination: @escaping (Store<Case, LocalAction>) -> Destination,
        @ViewBuilder label: () -> Label
    ) {
        self.store = store
        self.destination = destination
        self.casePath = casePath
        self.toLocalAction = toLocalAction
        self.label = label()
    }
    init(
        unwrapping store: Store<Enum?, PresentationAction<Action>>,
        @ViewBuilder destination: @escaping (Store<Case, LocalAction>) -> Destination,
        @ViewBuilder label: () -> Label
    ) where Enum == Case, Action == LocalAction {
        self.store = store
        self.destination = destination
        self.casePath = /.self
        self.toLocalAction = { $0 }
        self.label = label()
    }
    var body: some View {
        WithViewStore(store.scope(state: { $0.flatMap(casePath.extract(from:)) != nil })) { viewStore in
            NavigationLink(isActive: viewStore.binding(send: { $0 ? .present : .dismiss })) {
                IfLetStore(
                    store.scope(
                        state: self.casePath.cacheExtract,
                        action: { PresentationAction.presented(toLocalAction($0)) }
                    ),
                    then: self.destination
                )
            } label: {
                self.label
            }
        }
    }
}

Here I model a simple navigation list from parent to one of two children. It works great but it feels like the children should be modeled as an enum?

import ComposableArchitecture
import SwiftUI

struct ParentState: Equatable {
    var child1: Child1State?
    var child2: Child2State?
}

enum ParentAction: Equatable {
    case child1(PresentationAction<Child1Action>)
    case child2(PresentationAction<Child2Action>)
}

let ParentReducer = Reducer<ParentState, ParentAction, Void>.combine(
    Reducer { state, action, environment in
        switch action {

        case .child1(.present):
            state.child1 = .init()
            return .none
        case .child1(.dismiss):
            state.child1 = nil
            return .none
        case .child1:
            return .none

        case .child2(.present):
            state.child2 = .init()
            return .none
        case .child2(.dismiss):
            state.child2 = nil
            return .none
        case .child2:
            return .none

        }
    }
        .presents(
            destination: Child1Reducer,
            unwrapping: \.child1,
            action: /ParentAction.child1,
            environment: { $0 }
        )
        .presents(
            destination: Child2Reducer,
            unwrapping: \.child2,
            action: /ParentAction.child2,
            environment: { $0 }
        )
)

struct Child1State: Equatable {}
enum Child1Action: Equatable {}
let Child1Reducer = Reducer<Child1State, Child1Action, Void>.empty

struct Child2State: Equatable {}
enum Child2Action: Equatable {}
let Child2Reducer = Reducer<Child2State, Child2Action, Void>.empty

struct ParentView: View {
    let store: Store<ParentState, ParentAction>
    var body: some View {
        WithViewStore(store.stateless) { viewStore in
            List {
                NavigationLinkStore(
                    unwrapping: store.scope(
                        state: \.child1,
                        action: ParentAction.child1
                    )
                ) { navStore in
                    Child1View(store: navStore)
                } label: {
                    Text("Child 1")
                }
                NavigationLinkStore(
                    unwrapping: store.scope(
                        state: \.child2,
                        action: ParentAction.child2
                    )
                ) { navStore in
                    Child2View(store: navStore)
                } label: {
                    Text("Child 2")
                }
            }
        }
    }
}

struct Child1View: View {
    let store: Store<Child1State, Child1Action>
    var body: some View {
        Text("Child 1")
    }
}

struct Child2View: View {
    let store: Store<Child2State, Child2Action>
    var body: some View {
        Text("Child 2")
    }
}

struct Parent_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            ParentView(
                store: .init(
                    initialState: .init(
                        child1: nil,
                        child2: nil
                    ),
                    reducer: ParentReducer,
                    environment: ()
                )
            )
        }
    }
}

So here's a version that models the children as a route domain. The problem is, both navigation links sends the same .present actions so there's no way to know which state to create.

import ComposableArchitecture
import SwiftUI

struct ParentCaseState: Equatable {
    var route: RouteState?
}

enum ParentCaseAction: Equatable {
    case route(PresentationAction<RouteAction>)
}

enum RouteState: Equatable {
    case child1(Child1State)
    case child2(Child2State)
}

enum RouteAction: Equatable {
    case child1(Child1Action)
    case child2(Child2Action)
}

let RouteReducer = Reducer<RouteState, RouteAction, Void>.empty

let ParentCaseReducer = Reducer<ParentCaseState, ParentCaseAction, Void>.combine(
    Reducer { state, action, environment in
        switch action {
        case .route(.present):
            /// ❌ We have no context to know which route to show, so always choose child1..
            state.route = .child1(.init())
            return .none
        case .route(.dismiss):
            state.route = nil
            return .none
        case .route:
            return .none
        }
    }
        .presents(
            destination: RouteReducer,
            unwrapping: \.route,
            action: /ParentCaseAction.route,
            environment: { $0 }
        )
)

struct ParentCaseView: View {
    let store: Store<ParentCaseState, ParentCaseAction>
    var body: some View {
        WithViewStore(store.stateless) { viewStore in
            List {
                NavigationLinkStore(
                    unwrapping: store.scope(
                        state: \.route,
                        action: ParentCaseAction.route
                    ),
                    case: /RouteState.child1,
                    action: RouteAction.child1
                ) { navStore in
                    Child1View(store: navStore)
                } label: {
                    Text("Child 1")
                }
                NavigationLinkStore(
                    unwrapping: store.scope(
                        state: \.route,
                        action: ParentCaseAction.route
                    ),
                    case: /RouteState.child2,
                    action: RouteAction.child2
                ) { navStore in
                    Child2View(store: navStore)
                } label: {
                    Text("Child 2")
                }
            }
        }
    }
}

struct ParentCase_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            ParentCaseView(
                store: .init(
                    initialState: .init(
                        route: nil
                    ),
                    reducer: ParentCaseReducer,
                    environment: ()
                )
            )
        }
    }
}

[rcarver]

aha, the answer occurred to me today 🦆

Here we use an enum for the possible child states, but keep the actions directly in the parent domain. The asymmetry threw me, but now I see why the sheet and other helpers are written with only a case option for State.

struct ParentCaseStateState: Equatable {
    var route: Children?
}

enum Children: Equatable {
    case child1(Child1State)
    case child2(Child2State)
}

enum ParentCaseStateAction: Equatable {
    case child1(PresentationAction<Child1Action>)
    case child2(PresentationAction<Child2Action>)
}

let ParentCaseStateReducer = Reducer<ParentCaseStateState, ParentCaseStateAction, Void>.combine(
    Reducer { state, action, environment in
        switch action {
        case .child1(.present):
            state.route = .child1(.init())
            return .none
        case .child1(.dismiss):
            state.route = nil
            return .none
        case .child1:
            return .none

        case .child2(.present):
            state.route = .child2(.init())
            return .none
        case .child2(.dismiss):
            state.route = nil
            return .none
        case .child2:
            return .none
        }
    }
        .presents(
            destination: Child1Reducer,
            unwrapping: \.route,
            case: /Children.child1,
            action: /ParentCaseStateAction.child1,
            environment: { $0 }
        )
        .presents(
            destination: Child2Reducer,
            unwrapping: \.route,
            case: /Children.child2,
            action: /ParentCaseStateAction.child2,
            environment: { $0 }
        )
)

struct ParentCaseStateView: View {
    let store: Store<ParentCaseStateState, ParentCaseStateAction>
    var body: some View {
        WithViewStore(store.stateless) { viewStore in
            List {
                NavigationLinkStore(
                    unwrapping: store.scope(
                        state: \.route,
                        action: ParentCaseStateAction.child1
                    ),
                    case: /Children.child1
                ) { navStore in
                    Child1View(store: navStore)
                } label: {
                    Text("Child 1")
                }
                NavigationLinkStore(
                    unwrapping: store.scope(
                        state: \.route,
                        action: ParentCaseStateAction.child2
                    ),
                    case: /Children.child2
                ) { navStore in
                    Child2View(store: navStore)
                } label: {
                    Text("Child 2")
                }
            }
        }
    }
}

struct ParentCaseState_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            ParentCaseStateView(
                store: .init(
                    initialState: .init(
                        route: nil
                    ),
                    reducer: ParentCaseStateReducer,
                    environment: ()
                )
            )
        }
    }
}

Here's the new NavigationLinkStore constructor to support this use.

extension NavigationLinkStore {
    init(
        unwrapping store: Store<Enum?, PresentationAction<Action>>,
        case casePath: CasePath<Enum, Case>,
        @ViewBuilder destination: @escaping (Store<Case, LocalAction>) -> Destination,
        @ViewBuilder label: () -> Label
    ) where Action == LocalAction {
        self.store = store
        self.destination = destination
        self.casePath = casePath
        self.toLocalAction = { $0 }
        self.label = label()
    }
}

[rcarver]

Here's a cleaned up NavigationLinkStore removing the need to scope actions.

struct NavigationLinkStore<Enum, Case, Action, Destination: View, Label: View>: View {
    let store: Store<Enum?, PresentationAction<Action>>
    let casePath: CasePath<Enum, Case>
    let destination: (Store<Case, Action>) -> Destination
    let label: Label
    init(
        unwrapping store: Store<Enum?, PresentationAction<Action>>,
        case casePath: CasePath<Enum, Case>,
        @ViewBuilder destination: @escaping (Store<Case, Action>) -> Destination,
        @ViewBuilder label: () -> Label
    ) {
        self.store = store
        self.destination = destination
        self.casePath = casePath
        self.label = label()
    }
    init(
        unwrapping store: Store<Enum?, PresentationAction<Action>>,
        @ViewBuilder destination: @escaping (Store<Case, Action>) -> Destination,
        @ViewBuilder label: () -> Label
    ) where Enum == Case {
        self.store = store
        self.destination = destination
        self.casePath = /.self
        self.label = label()
    }
    var body: some View {
        WithViewStore(store.scope(state: { $0.flatMap(casePath.extract(from:)) != nil })) { viewStore in
            NavigationLink(isActive: viewStore.binding(send: { $0 ? .present : .dismiss })) {
                IfLetStore(
                    store.scope(
                        state: self.casePath.cacheExtract,
                        action: PresentationAction.presented
                    ),
                    then: self.destination
                )
            } label: {
                self.label
            }
        }
    }
}