.alert view modifier does not accept Destination.State

[appfrosch]

I am trying to wrap my head around the new Destination pattern.

My setup is as follows:

• Xcode 14.3.1
• TCA prerelease/1.0

I already have everything together with separate @PresentationStates, but I wanted to refactor to the new embedded Destination pattern.

I am clearly missing some reducer/integration of a child reducer or something, but I cannot seem to find out how I can fix it.
The compiler error message I am getting is Cannot convert value of type '(AlertState<ItemListDomain.Action.Alert>) -> ItemListDomain.Destination.State' to expected argument type '(ItemListDomain.Destination.State) -> AlertState<PresentationAction<ItemListDomain.Action.Alert>>?'.

I extracted my problem to a sample project where I have a list of items, an add screen and where I would like to show an alert when trying to delete by swiping.

The part where it is failing is here:

struct ItemListDomainView: View {
    let store: StoreOf<ItemListDomain>
    var body: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            NavigationStack {
                List {
                   //…
                }
                //…
                .alert(
                    store: self.store.scope(state: \.$destination, action: ItemListDomain.Action.destination),
                    state: ItemListDomain.Destination.State.alert,
                    action: ItemListDomain.Destination.Action.alert
                )
                //…

What am I missing?

Here's the entire code:

import ComposableArchitecture
import SwiftUI

@main
struct poc_pointfree_Destination_AlertApp: App {
    var body: some Scene {
        WindowGroup {
            EmptyView()
        }
    }
}

struct Item: Equatable, Identifiable {
    let id: UUID
    init(
        id: UUID = .init()
    ) {
        self.id = id
    }
}

struct ItemListDomain: Reducer {
    struct State: Equatable {
        var items: IdentifiedArrayOf<Item>
        
        @PresentationState
        var destination: Destination.State?
        
        init(
            items: IdentifiedArrayOf<Item> = [],
            destination: Destination.State? = nil
        ) {
            self.items = items
            self.destination = destination
        }
    }
    enum Action: Equatable {
        case destination(PresentationAction<Destination.Action>)
        
        case addItemButtonTapped
        case addItemCancelButtonTapped
        case addItemConfirmButtonTapped
        case deleteButtonTapped(Item)
        
        enum Alert: Equatable {
            case confirmDeletion(id: Item.ID)
        }
    }
    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .addItemButtonTapped:
                state.destination = .addNewItem(ItemDomain.State(item: Item()))
                return .none
            case .addItemCancelButtonTapped:
                state.destination = nil
                return .none
            case .addItemConfirmButtonTapped:
                defer { state.destination = nil }
                guard case let .addNewItem(itemDomainState) = state.destination
                else {
                    XCTFail("Cannot add a new bike as `addNewBike` is unexpectedly nil.")
                    return .none
                }
                state.items.insert(itemDomainState.item, at: 0)
                return .none
            case let .deleteButtonTapped(item):
                state.destination = .alert(.delete(item: item))
                return .none
            case .destination(.dismiss):
                state.destination = nil
                return .none
            case let .destination(.presented(.alert(.presented(.confirmDeletion(id: id))))):
                defer { state.destination = nil }
                state.items.removeAll(where: { $0.id == id })
                return .none
            case .destination:
                return .none
            }
        }
        .ifLet(\.$destination, action: /Action.destination) { Destination() }
    }
}

extension ItemListDomain {
    struct Destination: Reducer {
        enum State: Equatable {
            case addNewItem(ItemDomain.State)
            case alert(AlertState<ItemListDomain.Action.Alert>)
        }
        enum Action: Equatable {
            case addNewItem(ItemDomain.Action)
            case alert(PresentationAction<ItemListDomain.Action.Alert>)
        }
        var body: some ReducerOf<Self> {
            Scope(state: /State.addNewItem, action: /Action.addNewItem) { ItemDomain() }
        }
    }
}

extension AlertState where Action == ItemListDomain.Action.Alert {
    static func delete(item: Item) -> Self {
        AlertState {
            TextState(#"Delete "\#(item.id.uuidString)""#)
        } actions: {
            ButtonState(role: .destructive, action: .send(.confirmDeletion(id: item.id), animation: .default)) {
                TextState("Delete")
            }
        } message: {
            TextState("Are you sure you want to remove this bike from the list?")
        }
    }
}

struct ItemListDomainView: View {
    let store: StoreOf<ItemListDomain>
    var body: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            NavigationStack {
                List {
                    if viewStore.items.isEmpty {
                        Text("There are no items yet…")
                    }
                    ForEach(viewStore.items) { item in
                        Text(item.id.uuidString)
                            .swipeActions {
                                Button(role: .destructive) {
                                    viewStore.send(.deleteButtonTapped(item))
                                } label: {
                                    Label("Delete", systemImage: "trash")
                                }
                            }
                    }
                }
                .toolbar {
                    ToolbarItem(placement: .automatic) {
                        Button {
                            viewStore.send(.addItemButtonTapped)
                        } label: {
                            Label("Add Item", systemImage: "plus")
                        }
                    }
                }
                .alert(
                    store: self.store.scope(state: \.$destination, action: ItemListDomain.Action.destination),
                    state: ItemListDomain.Destination.State.alert,
                    action: ItemListDomain.Destination.Action.alert
                )
                .sheet(
                    store: self.store.scope(
                        state: \.$destination,
                        action: ItemListDomain.Action.destination
                    ),
                    state: /ItemListDomain.Destination.State.addNewItem,
                    action: ItemListDomain.Destination.Action.addNewItem
                ) { addItemViewStore in
                    NavigationStack {
                        ItemDomainView(store: addItemViewStore)
                            .toolbar {
                                ToolbarItem(placement: .cancellationAction) {
                                    Button("Cancel") {
                                        viewStore.send(.addItemCancelButtonTapped)
                                    }
                                }
                                ToolbarItem(placement: .confirmationAction) {
                                    Button("Confirm") {
                                        viewStore.send(.addItemConfirmButtonTapped)
                                    }
                                }
                            }
                    }
                }
            }
        }
    }
}

struct Previews: PreviewProvider {
    static var previews: some View {
        ItemListDomainView(
            store: Store(
                initialState: ItemListDomain.State(
                    items: []
                ),
                reducer: ItemListDomain()
            )
        )
        .previewDisplayName("Empty List")
        
        ItemListDomainView(
            store: Store(
                initialState: ItemListDomain.State(
                    items: [.init(), .init()]
                ),
                reducer: ItemListDomain()
            )
        )
        .previewDisplayName("Non-empty List")
    }
}

struct ItemDomain: Reducer {
    struct State: Equatable {
        var item: Item
    }
    enum Action: Equatable {}
    var body: some ReducerOf<Self> {
        Reduce { state, action in
            return .none
        }
    }
}

struct ItemDomainView: View {
    let store: StoreOf<ItemDomain>
    var body: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            Form {
                Text(viewStore.item.id.uuidString)
            }
        }
    }
}

[stephencelis]

The issues you're encountering are all a little subtle, but here's what stands out:

1. The alert view modifier needs to take an extract function for its state, not the embed function you pass to action. You can use a "case path expression" for this kind of extraction:

    .alert(
      store: self.store.scope(state: \.$destination, action: ItemListDomain.Action.destination),
   -  state: ItemListDomain.Destination.State.alert,
   +  state: /ItemListDomain.Destination.State.alert,
      action: ItemListDomain.Destination.Action.alert
    )

2. The individual destination actions should not use PresentationAction, only the parent should wrap Destination.Action in a PresentationAction, so just one layer of PresentationAction nesting per node in your destination tree:

    extension ItemListDomain {
      struct Destination: Reducer {
        …
        enum Action: Equatable {
          case addNewItem(ItemDomain.Action)
   -      case alert(PresentationAction<ItemListDomain.Action.Alert>)
   +      case alert(ItemListDomain.Action.Alert)
        }
        var body: some ReducerOf<Self> {
          Reduce { state, action in
            switch action {
            …
   -        case let .destination(.presented(.alert(.presented(.confirmDeletion(id: id))))):
   +        case let .destination(.presented(.alert(.confirmDeletion(id: id)))):

With those changes I think you should be good to go!

[appfrosch]

Wow, it truly amazes me how fast and succinct your replies are–this is awesome. Thanks a lot!
Ad 1: right, I had tried with a case path as well, but still had an error
Ad2: that's it-once I remove that 2nd layer of PresentationAction totally resolves my issue.
🎉