Reusable Nested Flows

[TiagoSantosSilva]

Hey folks,

So I've been trying to create a Flow that could be reusable.

Say I have 3 flows:

• Flow A
• Flow B
• Flow C

In Flow A I have:

• FlowAScreen1
• FlowAScreen2
• FlowAScreen3

In Flow B I have:

• FlowBScreen1

In Flow C I have:

• FlowCScreen1
• FlowCScreen2
• FlowCScreen3

They're all displayed using a NavigationStack and therefore each screen is pushed on top of eachother.

If I wanted to "inject" Flow C in either Flow A or Flow B, would that be possible? Say for example that I wanted to display Flow C (its 3 screens) in Flow A on top of FlowAScreen2. Could this be done in a way that Flow C is modular enough that I can also plug it into Flow B and push it on top of FlowBScreen1 if I wanted to?

The code that I currently have is the following

Flow A

struct FlowA: View {
    @Perception.Bindable var store: StoreOf<FlowAFeature>
    
    var body: some View {
        WithPerceptionTracking {
            NavigationStack(path: $store.scope(state: \.path, action: \.path)) {
                FlowAScreen1(store: store.scope(state: \.screen1, action: \.screen1))
            } destination: { store in
                switch store.state {
                case .screen1:
                    if let store = store.scope(state: \.screen1, action: \.screen1) {
                        FlowAScreen1(store: store)
                    }
                case .screen2:
                    if let store = store.scope(state: \.screen2,
                                               action: \.screen2) {
                        FlowAScreen2(store: store)
                    }
                case .screen3:
                    if let store = store.scope(state: \.screen3,
                                               action: \.screen3) {
                        FlowAScreen3(store: store)
                    }
                case .flowC:
                    if let store = store.scope(state: \.flowC,
                                               action: \.flowC) {
                        FlowC(store: store)
                    }
                }
            }
        }
    }
}


@Reducer
struct FlowAFeature {
    @ObservableState
    struct State: Equatable {
        var path = StackState<Path.State>()
        var screen1 = FlowAScreen1.State()
    }
    
    enum Action: Equatable {
        case path(StackAction<Path.State, Path.Action>)
        case screen1(FlowAScreen1.Action)
    }

     var body: some ReducerOf<Self> {
        Scope(state: \.screen1, action: /Action.screen1) {
            FlowAScreen1Feature()
        }
        
        Reduce { state, action in
            let effect: Effect<Action>
            
            switch action {
            case let .path(pathAction):
                switch pathAction {
                case let .element(_, action: .flowAScreen2(.delegate(delegateAction))):
                    switch delegateAction {
                    case let .didTapOnNext(year):
                        state.path.append(.flowC)
                        effect = .none
                    }
                    }
                default:
                    effect = .none
                }
              ...
            }
            
            return effect
        }
        .forEach(\.path, action: /Action.path) {
            Path()
        }
        }
            
@Reducer
    struct Path {
        @ObservableState
        enum State: Equatable {
            case screen1(FlowAScreen1.State)
            case screen2(FlowAScreen2.State)
            case screen3(FlowAScreen3.State)
            case flowC(FlowC.State)
        }
        
        enum Action: Equatable {
            case screen1(FlowAScreen1.Action)
            case screen2(FlowAScreen2.Action)
            case screen3(FlowAScreen3.Action)
            case flowC(FlowC.Action)
        }
        
        var body: some ReducerOf<Self> {
            Scope(state: /State.screen1, action: /Action.screen1) {
                FlowAScreen1()
            }
            Scope(state: /State.screen2, action: /Action.screen2) {
                FlowAScreen2()
            }
            Scope(state: /State.screen3, action: /Action.screen3) {
                FlowAScreen3()
            }
            Scope(state: /State.flowC, action: /Action.flowC) {
                FlowC()
            }
        }
    }

Flow C

struct FlowC: View {
    @Perception.Bindable var store: StoreOf<FlowCFeature>
    
    var body: some View {
        WithPerceptionTracking {
            NavigationStack(path: $store.scope(state: \.path, action: \.path)) {
                FlowCScreen1(store: store.scope(state: \.screen1, action: \.screen1))
            } destination: { store in
                switch store.state {
                case .screen1:
                    if let store = store.scope(state: \.screen1, action: \.screen1) {
                        FlowCScreen1(store: store)
                    }
                case .screen2:
                    if let store = store.scope(state: \.screen2, action: \.screen2) {
                        FlowCScreen2(store: store)
                    }
               case .screen3:
                    if let store = store.scope(state: \.screen3, action: \.screen3) {
                        FlowCScreen3(store: store)
                    }
                }
            }
        }
    }
}

@Reducer
struct FlowCFeature {
    @ObservableState
    struct State: Equatable {
        var path = StackState<Path.State>()
        var screen1 = screen1.State()
    }
    
    enum Action: Equatable {
        case path(StackAction<Path.State, Path.Action>)
        case screen1(FlowCScreen1.Action)
    }
    
    var body: some ReducerOf<Self> {
        Scope(state: \.screen1, action: /Action.screen1) {
            FlowCScreen1()
        }
        
        Reduce { state, action in
            return .none
        }
        .forEach(\.path, action: \.path) {
            Path()
        }
    }
    
    @Reducer
    struct Path {
        @ObservableState
        enum State: Equatable {
            case screen1(FlowCScreen1.State)
            case screen2(FlowCScreen2.State)
            case screen3(FlowCScreen3.State)
        }
        
        enum Action: Equatable {
            case screen1(FlowCScreen1.Action)
            case screen2(FlowCScreen2.Action)
            case screen3(FlowCScreen3.Action)
        }
        
        var body: some ReducerOf<Self> {
            Scope(state: /State.screen1, action: /Action.screen1) {
                FlowCScreen1()
            }
            Scope(state: /State.screen2, action: /Action.screen2) {
                FlowCScreen2()
            }
            Scope(state: /State.screen3, action: /Action.screen3) {
                FlowCScreen3()
            }
        }
    }
}

I'm having no success with this though. I've been able to append other screens that are not a "Flow" that contains a NavigationStack and basically serves as a coordinator.

Would there be a way to achieve this or something similar in a way that each flow is independent and I can just plug them in into other parent flows as needed?

[TiagoSantosSilva]

@p4checo keeping you on the loop on this one - this is basically what you also were trying to achieve in your previous post, right?

[p4checo]

Yes, it's the same problem I exposed in question #2583. Perhaps it would be better to have a single discussion? 😇

Anyway, I didn't try it, but on your example I think we wouldn't be able to use FlowC view as is in FlowA and FlowB, due to the limitation of NavigationStack (which can't be nested).

I believe that we will have to either duplicate the FlowC cases in the destination closures of each "parent" feature (A, B), or we will need a simpler NestedFlowC that only has a SwitchStore to "drill" on the path. This also means that for FlowC to be "standalone" (i.e. have its own NavigationStack), we probably need a dedicated view for that use case.

Nonetheless, this seems to be minor tradeoff and I think we agree the main challenge is reducer composition 😆