How to intercept an action in a stack based navigation

[JanC]

hey,
I have a stack based navigation where I don't use NavigationLinks but rather delegate actions sent from child views back to
the Root view where the entire navigation stack is handled.

Basically what is described in the stack-based navigation docs

Another alternative is to forgo NavigationLink entirely and just use Button that sends an action in the child feature’s domain ..

The question is how can I intercept the case .path(.element(id: _, action: ...)) in one of the child views in order to perform business logic belonging to that view instead of handling it in the root view.

⬇️ Complete sample code ⬇️

import ComposableArchitecture
import Foundation
import SwiftUI

// MARK: - MyRootFeature

struct MyRootView: View {
    @Bindable
    var store: StoreOf<MyRootFeature>

    var body: some View {
        NavigationStack(path: $store.scope(state: \.path, action: \.path)) {
            Form {
                Button {
                    store.send(.showContactsButtonTapped)
                }
                label: {
                    Text("Push Contacts")
                }
            }
            .navigationTitle("Root")

        } destination: { store in
            switch store.case {
            case .contactDetails(let store):
                MyContactDetailView(store: store)
            case .contactList(let store):
                MyContactListView(store: store)
            }
        }
    }
}

@Reducer
struct MyRootFeature {
    @ObservableState
    struct State: Equatable {
        var path = StackState<Path.State>()
    }

    enum Action {
        case showContactsButtonTapped
        case path(StackActionOf<Path>)
    }

    @Reducer(state: .equatable)
    enum Path {
        case contactList(MyContactListFeature)
        case contactDetails(MyContactDetailFeature)
    }

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            // ⁉️ ⁉️ Delegate action when the contact delete button is tapped but I would like to intercept this in the MyContactListFeature instead
            case .path(.element(id: _, action: .contactDetails(.delegate(.didDeleteContact(let contact))))):
                print("Delete \(contact)")
                _ = state.path.popLast()
                return .none
            case .path(.element(id: let id, action: .contactList(.delegate(.didSelectContact(let contact))))):

                state.path.append(.contactDetails(MyContactDetailFeature.State(contact: contact)))
                return .none
            case .showContactsButtonTapped:
                state.path.append(.contactList(MyContactListFeature.State()))
                return .none
            default: return .none
            }
        }
        .forEach(\.path, action: \.path)
    }
}

#Preview {
    MyRootView(
        store: Store(
            initialState: MyRootFeature.State(),
            reducer: {
                MyRootFeature()._printChanges()
            }
        )
    )
}

// MARK: - MyContactListFeature

struct MyContactListView: View {
    @Bindable
    var store: StoreOf<MyContactListFeature>

    var body: some View {
        List {
            ForEach(store.contacts, id: \.self) { contact in
                Button {
                    store.send(.contactButtonTapped(contact))
                }
                label: {
                    Text(contact)
                }
            }
        }
        .toolbar {
            ToolbarItem {
                Button {
                    store.send(.addButtonTapped)
                } label: {
                    Image(systemName: "plus")
                }
            }
        }
        .navigationTitle("MyContactList")
    }
}

@Reducer
struct MyContactListFeature {
    @ObservableState
    struct State: Equatable {
        var contacts = ["Brandon", "Stephen"]

        var path = StackState<Path.State>()

        mutating func removeContact(_ contact: String) {
            contacts.removeAll(where: { $0 == contact })
        }
    }

    enum Action {
        enum Delegate {
            case didSelectContact(String)
        }

        case contactButtonTapped(String)
        case addButtonTapped
        case path(StackActionOf<Path>)
        case delegate(Delegate)
    }

    @Reducer(state: .equatable)
    enum Path {
        case contactDetails(MyContactDetailFeature)
    }

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .contactButtonTapped(let name):
                return .send(.delegate(.didSelectContact(name)))

            case .addButtonTapped:
                state.contacts.append(generateRandomString())
                return .none

            // ⁉️ ⁉️ This does not work but how could I intercept the path action here?
            case .path(.element(id: _, action: .contactDetails(.delegate(.didDeleteContact(let contact))))):
                print("Handle the contact deletion here")
                state.removeContact(contact)
                return .none

            case .path:
                return .none

            case .delegate:
                return .none
            }
        }
        .forEach(\.path, action: \.path)
    }

    func generateRandomString() -> String {
        let characters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
        let randomString = String((0 ..< 10).compactMap { _ in characters.randomElement() })
        return randomString
    }
}

// MARK: - MyContactDetailFeature

struct MyContactDetailView: View {
    @Bindable
    var store: StoreOf<MyContactDetailFeature>

    var body: some View {
        List {
            Button(role: .destructive) {
                store.send(.deleteButtonTapped)
            } label: {
                Text("Delete")
            }
        }
        .navigationTitle(store.contact)
    }
}

@Reducer
struct MyContactDetailFeature {
    @ObservableState
    struct State: Equatable {
        let contact: String
    }

    enum Action {
        enum Delegate {
            case didDeleteContact(String)
        }

        case deleteButtonTapped
        case delegate(Delegate)
    }

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .deleteButtonTapped:
                .send(.delegate(.didDeleteContact(state.contact)))
            case .delegate:
                .none
            }
        }
    }
}

The navigation is composed of

MyRootFeature

• Handles the delegate action to push the MyContactListFeature and MyContactDetailFeature screens

            case .path(.element(id: _, action: .contactList(.delegate(.didSelectContact(let contact))))):
                state.path.append(.contactDetails(MyContactDetailFeature.State(contact: contact)))
            case .showContactsButtonTapped:
                state.path.append(.contactList(MyContactListFeature.State()))

MyContactListFeature

• Handles the local view action .addButtonTapped locally to simply append a new contact to the list:

            case .addButtonTapped:
                state.contacts.append(generateRandomString())
                return .none

• Handles the local view action .contactButtonTapped(contact), transforms it to a delegate action to be handled by the RootView

            case .contactButtonTapped(let name):
                return .send(.delegate(.didSelectContact(name)))

MyContactDetailFeature

• Sends the delete action when the delete button is tapped using a delegate

            case .deleteButtonTapped:
                .send(.delegate(.didDeleteContact(state.contact)))

I'd like to handle the deletion of the contact .delegate(.didDeleteContact(state.contact) in the MyContactListFeature where I also handle the addition of a contact. But in the current implementation, the .delegate(.didDeleteContact( is forwarded until the MyRootFeature.

1. Is it possible to intercept that .delegate(.didDeleteContact(state.contact) in the MyContactListFeature?

2. Alternatively, how could the MyRootFeature reach out to the MyContactListFeature.State to tell it to delete the contact once the MyRootFeature has intercepted the .contactDetails(.delegate(.didDeleteContact(let contact) ?

I tried

I know that I could handle the deletion in the RootView but I'd like the RootView to be responsible only of the navigation and not of the business logic of all the child views.

thanks in advance!

[JanC]

2. Alternatively, how could the MyRootFeature reach out to the MyContactListFeature.State to tell it to delete the contact once the MyRootFeature has intercepted the .contactDetails(.delegate(.didDeleteContact(let contact) ?

What I think could be the answer to my 2. question is what is explained here #3208 (comment)

Let the MyRootFeature intercept the delegate call and call a method on the child state to tell it to delete the contact:

case .path(.element(id: _, action: .contactDetails(.delegate(.didDeleteContact(let contact))))):
    print("Delete \(contact)")

    guard let listIndex = state.path.firstIndex(where: { $0.is(\.contactList) }) else { return .none }
    state.path[id: state.path.ids[listIndex]].modify(\.contactList) { contactListState in
        contactListState.removeContact(contact)
    }
    _ = state.path.popLast()

That works for me even thought the syntax a bit cumbersome :)