Managing NavigationView/Stack/Flow in TCA

[ryanbooker]

How are you all managing navigation stacks in the TCA? Manually linking views in the standard way (i.e. NavigationLinks to a particular view), or is there a clean TCA way to manage the flow of views, handle Back, etc, using actions and state?

Ideally I would like every view to be entirely independent, not even knowing what came before or after it. But I can't work out a nice way (If I've missed an example or video please just point me in the right direction. 🙂)

The style of flow I'm a stumped on is a questionnaire where each screen is focused on it's own subset of the full list of questions, but each screen isn't focusing down on the last, it's "parallel" if you like. e.g.:

IntroView -> QuestionAView -> QuestionBView -> InfoView -> QuestionCView

struct Questions {
    var questionA: A
    var questionB: B
    var questionC: C
}

struct IntroView: View {
   // Doesn't use any state
}

struct InfoView: View {
   // Doesn't use any state
}

struct QuestionAView: View {
    let store: Store<A, QuestionAction>
}

struct QuestionBView: View {
    let store: Store<B, QuestionAction>
}

struct QuestionCView: View {
    let store: Store<C, QuestionAction>
}

Would you simply pass the entire Questions state along to every view in the chain, even though some don't use state at all, and each only really needs to know about it's own single question?

[gkaimakas]

I was wondering about the same thing some time ago.

Sadly SwiftUI doesn't allow for such fine grained control yet. If you try adding all navigation links in a view only the one of them will be rendered and the navigation view will break if you try to enable another one.

Hopefully in a next version of SwiftUI we will get better support for such cases.

In the meantime we can probably use UIKit for that

[ryanbooker]

The approach I've taken so far is to pass the full Questions state along to each screen, and scope down using WithViewStore.

[atimca]

I don't have an ultimate answer on this question, but I think I have a lead. I created a RouterView entity and wrapping in this router view every other view, which doesn't know about navigation at all. It works only in one direction at this moment. However, I think it would be possible to generalise it in the future. I just didn't have a big need for it. scenesStack is just a stack with a Scene entity. Here's an example:

struct RouterView: View {
    
    private let scene: ScreenScene
    private let store: Store<State, Action>
    
    init(scene: ScreenScene, store: Store<State, Action>) {
        self.scene = scene
        self.store = store
    }
    
    var body: some View {
        WithViewStore(store.scope(state: \.scenesStack)) { viewStore in
            HStack {
                scene(for: scene, send: viewStore.send)
                NavigationLink(
                    destination: nextScene(for: scene),
                    isActive: viewStore.binding { $0.contains(scene.next) },
                    label: EmptyView.init
                )
            }
            .navigationBarHidden(true)
        }
    }
}

// MARK: - View Factory
private extension RouterView {
    
    @ViewBuilder
    func scene(for type: ScreenScene, send: @escaping (Action) -> Void) -> some View {
        switch type {
        case .loadingWords:
            LaunchView(send: send)
        case .privateTeacher:
            OnboardingView(
                title: L10n.Onboarding.PrivateTeacher.title,
                image: Asset.lesson,
                buttonTitle: L10n.Onboarding.PrivateTeacher.buttonTitle,
                action: { send(.goNext(from: type)) }
            )
        case .wantToLearn:
            OnboardingView(
                title: L10n.Onboarding.WantToLearn.title,
                image: Asset.classLessons,
                buttonTitle: L10n.Onboarding.WantToLearn.buttonTitle,
                action: { send(.goNext(from: type)) }
            )
        case .oldMethods:
            OnboardingView(
                title: L10n.Onboarding.OldMethods.title,
                image: Asset.oldMethods,
                buttonTitle: L10n.Onboarding.OldMethods.buttonTitle,
                action: { send(.goNext(from: type)) }
            )
        case .addWords:
            OnboardingView(
                title: L10n.Onboarding.AddWords.title,
                image: Asset.dictionary,
                buttonTitle: L10n.Onboarding.AddWords.buttonTitle,
                action: { send(.goNext(from: type)) }
            )
        case .dictionary:
            DictionaryView(store: store.scope(state: \.dictionary, action: Action.dictionary))
        }
    }
    
    @ViewBuilder
    func nextScene(for type: ScreenScene) -> some View {
        RouterView(
            scene: type.next,
            store: store
        )
    }
}

[AlexisQapa]

I use recursion too for horizontal flows and it's working great. One very nice thing you get for free is optional steps or branching which you can't do easily if you try to write your flow manually.

[ryanbooker]

This looks interesting thanks. I'll dig in a bit over the weekend or so. :)

[atimca]

Approach, which I've listed surely could be extended to bidirectional flow. However, I haven't been thinking about TabBar + NavigationStack at the same time.

[AlexisQapa]

Using this you can reuse views without them having to know they are embedded in a flow.
The caller of the flow can react to the flow being cancelled or finished.
A,B,C and D are modules containing each a screen and TCA related elements.

import A
import B
import C
import D

public enum Step: String, Equatable, Hashable {
	case a, b, c, d
}

public enum Action {
	case a(A.Action), b(B.Action), c(C.Action), d(D.Action)
	
	case next, previous, cancel, finish
}

public struct State: Equatable {
	let allSteps: [Step]
	var currentStep: Step
	var a: A.State?, b: B.State?, c: C.State?, d: D.State?

	public init?(availableSteps: [Step?]) {
		self.allSteps = availableSteps.compactMap { $0 }
		guard let firstStep = allSteps.first else { return nil }
		self.currentStep = firstStep
		self.a = .init()
		self.b = .init()
		self.c = .init()
		self.d = .init()
	}
}

public struct Environment {
	let a: A.Environment, b: B.Environment, c: C.Environment, c: D.Environment
}

public let reducer = Reducer<State, Action, Environment>.combine(
	A.reducer.optional().pullback(state: \.a, action: /Action.a, environment: \.a),
	B.reducer.optional().pullback(state: \.b, action: /Action.b, environment: \.b),
	C.reducer.optional().pullback(state: \.c, action: /Action.c, environment: \.c),
	D.reducer.optional().pullback(state: \.d, action: /Action.d, environment: \.d),
	Reducer<State, Action, Environment> { state, action, environment in
	switch action {
	case .next:
		guard let index = state.allSteps.firstIndex(of: state.currentStep), index < state.allSteps.count - 1 else {
			return Effect(value: .finish)
		}
		let nextStep = state.allSteps[index + 1]
		state.currentStep = nextStep
		return .none

	case .previous:
		guard let index = state.allSteps.firstIndex(of: state.currentStep), index > 0 else {
			return Effect(value: .cancel)
		}
		let previousStep = state.allSteps[index - 1]
		state.currentStep = previousStep
		return .none

	case .a(.next), .b(.next), .c(.next), .d(.next):
		return Effect(value: .next)

	case .cancel, .finish, .a, b, c, d:
		return .none
	}
)

public struct View: SwiftUI.View {
	private let store: Store<State, Action>
	private let allSteps: [Step]

	public init(store: Store<State, Action>) {
		self.store = store
		self.allSteps =  ViewStore(store).allSteps
	}

	public var body: some SwiftUI.View {
		StepView(store: store, nextSteps: allSteps, isInitial: true)
	}
}

struct StepView: SwiftUI.View {

	fileprivate struct ViewState: Equatable {
		let isNavigationLinkActive: Bool
	}

	fileprivate enum ViewAction {
		case back
	}

	private let isInitial: Bool
	private let nextSteps: [Step]
	private let store: Store<State, Action>
	@ObservedObject private var viewStore: ViewStore<ViewState, ViewAction>

	init(store: Store<State, Action>, nextSteps: [Step], isInitial: Bool = false) {
		self.isInitial = isInitial
		self.nextSteps = nextSteps
		self.store = store
		self.viewStore = ViewStore(
			store.scope(
				state: {
					ViewState(isNavigationLinkActive: !nextSteps.isEmpty
						&& $0.allSteps.firstIndex(of: nextSteps.first!)! < $0.allSteps.firstIndex(of: $0.currentStep)!
					)
				},
				action: {
					switch $0 {
					case .back: return .previous
					}
				}
			)
		)
	}

	var body: some SwiftUI.View {
		VStack {
			Self.view(for: nextSteps.first!, store: store)
			if !nextSteps.isEmpty {
				NavigationLink(
					destination: StepView(store: store, nextSteps: Array(nextSteps.dropFirst())),
					isActive: viewStore.binding(get: \.isNavigationLinkActive, send: .back),
					label: EmptyView.init
				)
			}
		}
	}

	@ViewBuilder
	private static func view(for step: Step, store: Store<State, Action>) -> some SwiftUI.View {
		switch step {
		case .a:
			IfLetStore(
				store.scope(state: \.a, action: Action.a),
				then: { A.View(store: $0).navigationBarTitle("A") }
			)
		case .b:
			IfLetStore(
				store.scope(state: \.b, action: Action.b),
				then: { B.View(store: $0).navigationBarTitle("B") }
			)
		case .c:
			IfLetStore(
				store.scope(state: \.c, action: Action.c),
				then: { C.View(store: $0).navigationBarTitle("C") }
			)
		case .d:
			IfLetStore(
				store.scope(state: \.d, action: Action.d),
				then: { D.View(store: $0).navigationBarTitle("D") }
			)
		}
	}
}

[ryanbooker]

Thanks. I'll dig into that too. :)

[fabstu]

I found https://github.com/Bahn-X/swift-composable-navigator interesting, maybe this can be an inspiration. It does not work on macOS atm though.

[ryanbooker]

Thanks. :)