SwitchStore and @PresentationState

[ahbou]

I'm trying to update to the new navigation tools while watching the series and I stumbled on a case that's not covered (yet?).
I have an enum based navigation. Each destination will lead to a different screen.
We can't use NavigationStack as we have to support iOS 15.

My destination state looks like this:

@PresentationState var destination: Destination.State?

Add the view uses NavigationLinkStore

NavigationLinkStore(
   self.store.scope(state: \.$destination, action: Home.Action.destination),
   state: /Destination.State.todo,
   action: ContentDestination.Action.todo) {} destination: { store in
   TodoView(store: store)
 } label: {
     EmptyView()
 }

I have 2 others NavigationLinkStore for each Destination.State

What I'd like to achieve is to use something like SwitchStore and CaseLet that will unwrap each case.

[mbrandonw]

Hi @ahbou, I'm not sure I understand your question. Can you expand a bit more?

[ahbou]

Sure, sorry took me some time to clean up the code and make it generic.

Destination Reducer:

public struct Destination: Reducer {
    public enum State: Equatable, Identifiable {
        case song(Song.State)
        case playlist(Playlist.State)
        public var id: AnyHashable {
            switch self {
            case let .song(state):
                return state.id
            case let .playlist(state):
                return state.id
            }
        }
    }

    public enum Action: Equatable {
        case song(Song.Action)
        case playlist(Playlist.Action)
    }

    public var body: some ReducerOf<Self> {
        Scope(state: /State.song, action: /Action.song) {
            Song()
        }
        Scope(state: /State.playlist, action: /Action.playlist) {
            Playlist()
        }
    }
}

Carousel Feed

The carousel can display many kind of items but let's say it's either a song or a playlist.
Tapping an item leads to items detail view. That's where I'm using Destination.State

public struct Carousel: Reducer {

    public struct State: Equatable {
        @PresentationState var destination: Destination.State?
        var items: [Target] = []
    }

    public enum Action: Equatable {
        case setItems([Target])
        case didSelectItem(Target)
        case destination(PresentationAction<Destination.Action>)
    }

    public var body: some Reducer<State, Action> {
        Reduce(self.core)
            .ifLet(\.$destination, action: /Action.destination) {
                Destination()
            }
    }

    func core(state: inout State, action: Action) -> Effect<Action> {
        switch action {
        case let .didSelectItem(target):
            switch target.schema {
            case .song:
                state.destination = .song(.init(identifier: target.identifier))
            case .playlist:
                state.destination = .playlist(.init(identifier: target.identifier))
            default:
                break
            }
            return .none
        default:
            return .none
        }
    }
}

Carousel View

struct CarouselView: View {
    let store: StoreOf<Carousel>
    private static let height: CGFloat = 120
    private let rows = [GridItem(.fixed(CarouselView.height))]

    init(store: StoreOf<Carousel>) {
        self.store = store
    }

    var body: some View {
        WithViewStore(store, observe: { $0 }) { viewStore in
            VStack(spacing: .quarterUnit) {
                if let content = viewStore.content {
                    ScrollView(.horizontal, showsIndicators: false) {
                        LazyHGrid(rows: rows, alignment: .center, spacing: .unit) {
                            ForEach(content.items, id: \.self) { item in
                                // How to make NavigationLinkStore state and action dynamic here
                                NavigationLinkStore(self.store.scope(state: \.$destination, action: Carousel.Action.destination), state: /Destination.State.song, action: Destination.Action.song) {
                                    viewStore.send(.didSelectItem(item.target))
                                } destination: { store in
                                    SongView(store: store)
                                } label: {
                                    VStack {
                                        Text("item.title")
                                            .foregroundColor(.zrWhite)
                                            .font(.zr13Bold)
                                            .frame(maxWidth: .infinity, alignment: .center)
                                            .multilineTextAlignment(.center)
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

The view is just a Horizontal Grid of items.
My question is is how to wrap each item in the correct NavigationLinkStore without explicit Destination.State and Destination.Action.

I understand this is the intended usage for NavigationStack but we can't support it pre iOS 16.

Thank you for the help.

[mbrandonw]

Since you only have a single piece of optional state driving navigation you cannot have a bunch of NavigationLinkStores in the view. As you noticed, there is no way to differentiate amongst the links since there is only one piece of state.

If you want to model your domain like this you need to hoist a single NavigationLinkStore out of the ForEach, and hide it somewhere, such as in a .background(…). Then when the state becomes non-nil it will activate the link.

[ahbou]

I see, I'm familiar with this approach.
But still how do we differentiate between the song and the playlist state in the single NavigationLinkStore?

[mbrandonw]

Inside the destination closure of NavigationLinkStore you can use SwitchStore to switch on the enum and decide what view should be shown. You might even be able to bake this into a nicer helper like we did in this week's episode for NavigationStackStore.

[ahbou]

Thanks for the help!
Ended up with the following 👌

 .background {
                NavigationLinkStore(self.store.scope(state: \.$destination, action: Carousel.Action.destination), onTap: {}, destination: { store in
                    SwitchStore(store) {
                        CaseLet(state: /Destination.State.song, action: Destination.Action.song) { store in
                            Song(store: store)
                        }
                        CaseLet(state: /Destination.State.playlist, action: Destination.Action.playlist) { store in
                            Playlist(store: store)
                        }
                    }
                }, label: {
                    EmptyView()
                })
            }