Please help me understanding how to setup a basic navigation in a TCA app

[JohnRoxMySox23]

Hi everyone! I'm trying to write a very simple project using SwiftUI and ComposableArchitecture, and handling a basic navigation. Here is the idea:

The user lands on a MainView, which initially displays a LoadingView. I mock an API call, which lasts 1 second, then to display a MyNavigationView which I expect to contain a NavigationStackStore. Ultimately, there is a toolbar with a button to lead to a ReadOnlyView.

Here is my code :

@main
struct TCANavExampleApp: App {
    var body: some Scene {
        WindowGroup {
            MainView(
                store: Store(
                    initialState: MainFeature.State()
                ) {
                    MainFeature()
                }
            )
        }
    }
}

@Reducer
struct MainFeature {
    struct State: Equatable {
        var loading = true
    }
    
    enum Action {
        case loadData
        case dataFetched
    }
    
    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .loadData:
                return .run { send in
                    DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
                        send(.dataFetched)
                    }
                }
            case .dataFetched:
                state.loading = false
                return .none
            }
        }
    }
}


struct MainView: View {
    let store: StoreOf<MainFeature>
    
    var body: some View {
        WithViewStore(store, observe: { $0 }) { viewStore in
            if viewStore.loading {
                Text("Loading...")
            } else {
                MyNavigationView(
                    store: Store(
                        initialState: MyNavigationFeature.State()
                    ) {
                        MyNavigationFeature()
                    }
                )
            }
        }
    }
}

@Reducer
struct MyNavigationFeature {
    struct State: Equatable {
        var path = StackState<Path.State>()
    }
    
    enum Action {
        case path(StackAction<MyNavigationFeature.State, MyNavigationFeature.Action>)
        case toReadOnlyView
    }
    
    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case let .path(.element(id: id, action: .toReadOnlyView)):
                state.path.append(.readOnly)
                return .none
            case .toReadOnlyView:
                return .send(.path(.element(id: 1, action: .toReadOnlyView)))
            default:
                return .none
            }
        }
    }
}

extension MyNavigationFeature {
    @Reducer
    struct Path {
        enum State: Equatable {
            case readOnly
        }
        
        enum Action {
            case readOnly
        }
        
        var body: some ReducerOf<Self> {
            Reduce { _, _ in
                return .none
            }
        }
    }
}

struct MyNavigationView: View {
    let store: StoreOf<MyNavigationFeature>
    
    var body: some View {
        NavigationStackStore(store.scope(state: \.path, action: \.path)) {
            WithViewStore(store, observe: { $0 }) { viewStore in
                Text("Navigation View")
                    .toolbar {
                        ToolbarItem {
                            Button {
                                viewStore.send(.toReadOnlyView)
                            } label: {
                                Image(systemName: "plus")
                            }
                        }
                    }
            }
        } destination: {
            switch $0 {
            case .readOnly:
                ReadOnlyView()
            }
        }
    }
}

struct ReadOnlyView: View {
    var body: some View {
        Text("A read-only view")
    }
}

Now I have an issue: I get a very generic and random compiler error on the body declaration of MyNavigationView:

Failed to produce diagnostic for expression; please submit a bug report (https://swift.org/contributing/#reporting-bugs)

More generally, I don't really understand how to do this in a simple way. Could you help me understanding what am I doing wrong?

Thank you very much!

[mbrandonw]

Hi @JohnRoxMySox23, there are a few things wrong with this code, and I would suggest reading the docs and tutorials to understand how to use these APIs.

First of all, anytime Swift produces a bad compiler error you should comment out things in the view until it either compiles or produces a better message. And sometimes you need to break things apart into multiple statements to help out Swift. If you do this in your view you will get the true error:

🛑 Cannot convert value of type 'Store<StackState<MyNavigationFeature.Path.State>, StackAction<MyNavigationFeature.State, MyNavigationFeature.Action>>' to expected argument type 'Store<StackState<MyNavigationFeature.Path.State>, StackAction<MyNavigationFeature.Path.State, MyNavigationFeature.Action>>'

The NavigationStackStore view expects a store focused in of StackState and StackAction of a single domain, but here you have the state focused on Path and the actions focused on MyNavigationFeature.

And you would have seen this problem earlier if you had integrated the Path reducer into your MyNavigationFeature using the reducer operator:

.forEach(\.path, action: \.path) {
  Path()
}

That does not compile and shows that the domains do not match.

You need to update your path action to be of this form:

case path(StackAction<Path.State, Path.Action>)

That causes a few other errors that are up to you to figure out the best way to fix.

And something else that caught my eye in this code was this effect:

return .run { send in
  DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
    send(.dataFetched)
  }
}

This is unfortunately not correct. The .run effect creates an asynchronous context, and so it stays alive for as long as that async work is running. By using DispatchQueue you are not performing any direct await work in the closure, and hence the effect completes immediately. This means when a second passes and you try to do send(.dataFetched) it will be ignored.

It is better to use the tools of Swift concurrency for this:

return .run { send in
  try await Task.sleep(for: .seconds(1))
  await send(.dataFetched)
  }
}

Hope this helps.

[JohnRoxMySox23]

Thank you very much, I understand everything much better now.
I just have one question though, from MyNavigationView I'm bringing the user to the read-only view with this line:

viewStore.send(.path(.element(id: 20, action: .readOnly)))

But I'm getting this error:

Fatal error: Specifying stack element IDs by integer literal is not allowed outside of tests.

I'm sorry if this is very stupid, but I don't understand what I'm supposed to pass here for the id parameter.

Thank you again!

[mbrandonw]

Hi @JohnRoxMySox23, the IDs in the navigation stack are opaque and you can't predict what they will be. You need to reach into the path's elements to get an ID, such as path[20].id.

However, it is most likely not correct to send an action like you are. How do you know there are enough elements in the path to support reaching into the "20th" element? That is dangerous code. Instead, you typically let the child feature send its own actions, and then the ID is properly figured out automatically by the library.

[JohnRoxMySox23]

I'm sorry but I'm still misunderstanding something. In the tutorials, there is this example with this NavigationLink:

NavigationLink(state: ContactDetailFeature.State(contact: contact)) {

However in my case, I just want to display a read-only view which doesn't have an associated state. That's what's confusing me. What am I supposed to do in the view and in the reducer then?

Thank you for your help and sorry again.

[mbrandonw]

Hi @JohnRoxMySox23, we have an example of this in the repo. In the SyncUps example app there is a meeting view that can be navigated to, and it's just a plain read-only view.

The AppFeature that holds the path can model that as a case in the Path enum with just plain data. And then in the navigation stack it just passes that data along.

[JohnRoxMySox23]

Go it! Thank you very much 😊