Support nested enum reducer

[sk409]

I updated to 1.8 and simplify the enum reducer, but TCA doesn't seem to support nested enum reducers.

NestedEnumReducer.body should be used instead of NestedEnumReducer() in the following case:

@Reducer
enum NestedEnumReducer {
    case nestedFeature1(NestedFeature1)
    case nestedFeature2(NestedFeature2)
}

@Reducer
enum EnumReducer {
    // Inside the body, this is expanded to NestedEnumReducer() not NestedEnumReducer.body.
    case nestedEnumReducer(NestedEnumReducer)
}

I propose to solve this problem by introducing ReducerCaseStatic.

@Reducer
enum NestedEnumReducer {
    case nestedFeature1(NestedFeature1)
    case nestedFeature2(NestedFeature2)
}

@Reducer
enum EnumReducer {
    // Inside the body, this is expanded to NestedEnumReducer.body.
    @ReducerCaseStatic
    case nestedEnumReducer(NestedEnumReducer)
}

Below is a specific example that led me to create this issue.
Nested enum reducers are not supported in Destination in the specific example below.

Motivation

I needed to switch fullScreenCovers with customized animation.
But SwiftUI does not allow multiple fullScreenCover to be enabled at the same time, so I decided to switch views in fullScreenCover's content with customized animation.
Following video describes what I mentioned.

2024-02-26.12.03.59.mov

For the above reasons, I designed the domain as below.

// TCA doesn't support nested enum reducer.
// I needed to implement State, Action and body.
@Reducer
struct Destination {
    enum State: Equatable {
        case modal(Modal.State)
    }

    enum Action {
        case modal(Modal.Action)
    }

    var body: some ReducerOf<Self> {
        Modal.body
    }
}

@Reducer
enum Modal {
    // These views are switched with customized animations.
    case featureB(FeatureB)
    case featureC(FeatureC)
    case featureD(FeatureD)
}

I implemented modal ViewModifier to switch views with customized animation.

// modal uses fullScreenCover
.modal(
    store: $store.scope(
        state: \.destination?.modal,
        action: \.destination.modal
    ),
    configuration: {
        switch $0 {
        case .featureB:
            .dialog
        case .featureC:
            .fullScreenCover
        case .featureD:
            .sheet
        }
    },
    content: modal
)

@ViewBuilder
private func modal(
    geometry: GeometryProxy,
    store: StoreOf<FeatureA.Modal>
) -> some View {
    switch FeatureA.Modal.scope(store) {
    case let .featureB(store):
        FeatureBView(store: store)
            .frame(width: 300, height: 100)
            .background {
                Color.white
            }
    case let .featureC(store):
        FeatureCView(store: store)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background {
                Color.white
            }
    case let .featureD(store):
        FeatureDView(store: store)
            .frame(maxWidth: .infinity, idealHeight: 300)
            .fixedSize(horizontal: false, vertical: true)
            .background {
                Color.white
            }
    }
}

It is necessary to switch FeatureB/FeatureC/FeatureD as shown above, but since Modal needs to continue to be displayed, it was necessary to nest Modal inside Destination.

If you want the full code, see below.

Entire Code

import ComposableArchitecture
import SwiftUI

@Reducer
struct FeatureA {
    @ObservableState
    struct State: Equatable {
        @Presents var destination: Destination.State?
    }
    
    enum Action: ViewAction {
        case view(View)
        case destination(PresentationAction<Destination.Action>)
        
        enum View {
            case featureB
        }
    }
    
    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .view(.featureB):
                state.destination = .modal(.featureB(.init()))
                return .none
            case .destination(.presented(.modal(.featureB(.delegate(.featureC))))):
                state.destination = .modal(.featureC(.init()))
                return .none
            case .destination(.presented(.modal(.featureC(.delegate(.featureD))))):
                state.destination = .modal(.featureD(.init()))
                return .none
            default:
                return .none
            }
        }
        .ifLet(\.$destination, action: \.destination) {
            Destination()
        }
    }
}

extension FeatureA {
    @Reducer
    struct Destination {
        enum State: Equatable {
            case modal(Modal.State)
        }
        
        enum Action {
            case modal(Modal.Action)
        }
        
        var body: some ReducerOf<Self> {
            Scope(state: \.modal, action: \.modal) {
                Modal.body
            }
        }
    }
}

extension FeatureA {
    @Reducer(state: .equatable)
    enum Modal {
        case featureB(FeatureB)
        case featureC(FeatureC)
        case featureD(FeatureD)
    }
}

@Reducer
struct FeatureB {
    @ObservableState
    struct State: Equatable {}
    
    enum Action: ViewAction {
        case view(View)
        case delegate(Delegate)
        
        enum View {
            case featureC
        }
        
        enum Delegate {
            case featureC
        }
    }
    
    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .view(.featureC):
                .send(.delegate(.featureC))
            case .delegate:
                .none
            }
        }
    }
}

@Reducer
struct FeatureC {
    @ObservableState
    struct State: Equatable {}
    
    enum Action: ViewAction {
        case view(View)
        case delegate(Delegate)
        
        enum View {
            case featureD
        }
        
        enum Delegate {
            case featureD
        }
    }
    
    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .view(.featureD):
                .send(.delegate(.featureD))
            case .delegate:
                .none
            }
        }
    }
}

@Reducer
struct FeatureD {}

@ViewAction(for: FeatureA.self)
struct ContentView: View {
    @Bindable var store: StoreOf<FeatureA>
    
    var body: some View {
        VStack {
            Button("Modal") {
                send(.featureB)
            }
        }
        .modal(
            store: $store.scope(
                state: \.destination?.modal,
                action: \.destination.modal
            ),
            configuration: {
                switch $0 {
                case .featureB:
                    .dialog
                case .featureC:
                    .fullScreenCover
                case .featureD:
                    .sheet
                }
            },
            content: modal
        )
    }
    
    @ViewBuilder
    private func modal(
        geometry: GeometryProxy,
        store: StoreOf<FeatureA.Modal>
    ) -> some View {
        switch FeatureA.Modal.scope(store) {
        case let .featureB(store):
            FeatureBView(store: store)
                .frame(width: 300, height: 100)
                .background {
                    Color.white
                }
        case let .featureC(store):
            FeatureCView(store: store)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background {
                    Color.white
                }
        case let .featureD(store):
            FeatureDView(store: store)
                .frame(maxWidth: .infinity, idealHeight: 300)
                .fixedSize(horizontal: false, vertical: true)
                .background {
                    Color.white
                }
        }
    }
}

@ViewAction(for: FeatureB.self)
struct FeatureBView: View {
    let store: StoreOf<FeatureB>
    
    var body: some View {
        VStack {
            Text("FeatureB")
            
            Text("dialog")
            
            Button("FeatureC") {
                send(.featureC)
            }
        }
    }
}

@ViewAction(for: FeatureC.self)
struct FeatureCView: View {
    let store: StoreOf<FeatureC>
    
    var body: some View {
        VStack {
            Text("FeatureC")
            
            Text("fullScreenCover")
            
            Button("FeatureD") {
                send(.featureD)
            }
        }
    }
}

struct FeatureDView: View {
    let store: StoreOf<FeatureD>
    
    var body: some View {
        VStack {
            Text("FeatureD")
            
            Text("sheet")
        }
    }
}

#Preview {
    @State var store = StoreOf<FeatureA>(
        initialState: .init(),
        reducer: FeatureA.init
    )
    
    return ContentView(store: store)
}


//*****************************************

public func returningLastNonNilValue<A>(
    _ f: @escaping () -> A?
) -> () -> A? {
    var lastValue: A?
    return {
        lastValue = f() ?? lastValue
        return lastValue
    }
}

struct Modal {
    struct ModalModifier<
        State: Equatable & ObservableState,
        Action,
        Child: View
    >: ViewModifier {
        private let configuration: (State) -> ModalConfiguration
        private let onDismiss: () -> Void
        private let modalContent: (GeometryProxy, Store<State, Action>) -> Child
        
        @Binding private var store: Store<State, Action>?
        
        @SwiftUI.State private var identified: Identified<UUID, UUID>?
        @SwiftUI.State private var isModalPresented = false
        
        init(
            store: Binding<Store<State, Action>?>,
            configuration: @escaping (State) -> ModalConfiguration,
            onDismiss: @escaping () -> Void,
            @ViewBuilder content modalContent: @escaping (GeometryProxy, Store<State, Action>) -> Child
        ) {
            self._store = store
            self.configuration = configuration
            self.onDismiss = onDismiss
            self.modalContent = modalContent
        }
        
        func body(content: Content) -> some View {
            content
                .onChange(of: store?.state, onChange)
                .fullScreenCover(
                    item: $identified,
                    onDismiss: onDismiss
                ) { _ in
                    FullScreenCover(
                        configuration: configuration,
                        onDismiss: onDismiss,
                        modalContent: modalContent,
                        dismiss: { store = nil },
                        store: returningLastNonNilValue { store },
                        identified: $identified,
                        isModalPresented: $isModalPresented
                    )
                }
        }
        
        private func onChange(
            old: State?,
            new: State?
        ) {
            if old == nil,
               new != nil
            {
                var transaction = Transaction()
                transaction.disablesAnimations = true
                withTransaction(transaction) {
                    identified = .init(.init(), id: \.self)
                }
            } else if new == nil {
                isModalPresented = false
            }
        }
    }
}

extension Modal {
    struct FullScreenCover<
        State: Equatable & ObservableState,
        Action,
        Child: View
    >: View {
        private let configuration: (State) -> ModalConfiguration
        private let onDismiss: () -> Void
        private let modalContent: (GeometryProxy, Store<State, Action>) -> Child
        
        private let dismiss: () -> Void
        
        @SwiftUI.State private var store: () -> Store<State, Action>?
        
        @Binding private var identified: Identified<UUID, UUID>?
        @Binding private var isModalPresented: Bool
        
        init(
            configuration: @escaping (State) -> ModalConfiguration,
            onDismiss: @escaping () -> Void,
            modalContent: @escaping (GeometryProxy, Store<State, Action>) -> Child,
            dismiss: @escaping () -> Void,
            store: @escaping () -> Store<State, Action>?,
            identified: Binding<Identified<UUID, UUID>?>,
            isModalPresented: Binding<Bool>
        ) {
            self.configuration = configuration
            self.onDismiss = onDismiss
            self.modalContent = modalContent
            self.dismiss = dismiss
            self._store = .init(initialValue: store)
            self._identified = identified
            self._isModalPresented = isModalPresented
        }
        
        var body: some View {
            if let store = store() {
                content(store: store)
            }
        }
        
        private func content(store: Store<State, Action>) -> some View {
            GeometryReader { geometry in
                ZStack(alignment: configuration(store.state).alignment) {
                    if isModalPresented {
                        Color(white: 0, opacity: 0.5)
                            .onTapGesture(perform: dismiss)
                        
                        modalContent(geometry, store)
                            .zIndex(1)
                            .transition(configuration(store.state).transition)
                            .onDisappear {
                                var transaction = Transaction()
                                transaction.disablesAnimations = true
                                withTransaction(transaction) {
                                    identified = nil
                                }
                            }
                    }
                }
                .ignoresSafeArea()
                .presentationBackground {
                    Color.clear
                }
                .animation(configuration(store.state).animation, value: isModalPresented)
                .animation(configuration(store.state).animation, value: store.state)
                .onAppear {
                    isModalPresented = true
                }
            }
        }
    }
}

public struct ModalConfiguration {
    public let alignment: Alignment
    public let transition: AnyTransition
    public let animation: Animation
    
    public init(
        alignment: Alignment,
        transition: AnyTransition,
        animation: Animation
    ) {
        self.alignment = alignment
        self.transition = transition
        self.animation = animation
    }
}

extension ModalConfiguration {
    public static let dialog = Self(
        alignment: .center,
        transition: .opacity.combined(with: .scale),
        animation: .spring(response: 0.3, dampingFraction: 0.68)
    )
    
    public static let sheet = Self(
        alignment: .bottom,
        transition: .move(edge: .bottom),
        animation: .spring(response: 0.3, dampingFraction: 0.9)
    )
    
    public static let fullScreenCover = Self(
        alignment: .center,
        transition: .move(edge: .bottom),
        animation: .spring(response: 0.3, dampingFraction: 0.9)
    )
}

extension View {
    public func modal<
        State: Equatable & ObservableState,
        Action,
        Content: View
    >(
        store: Binding<Store<State, Action>?>,
        configuration: @escaping (State) -> ModalConfiguration,
        onDismiss: @escaping () -> Void = {},
        @ViewBuilder content: @escaping (GeometryProxy, Store<State, Action>) -> Content
    ) -> some View {
        self.modifier(Modal.ModalModifier(
            store: store,
            configuration: configuration,
            onDismiss: onDismiss,
            content: content
        ))
    }
}

[stephencelis]

@sk409 Thanks for starting the discussion and opening a PR! While we theoretically understand how this would work in practice, we were hoping you could flesh out an example with some more real world motivation. Can you describe how you encountered this issue in your code base and why you had nested enum reducers? Was there something about your domain model that pushed you towards this design? Were there reasons the enum reducers couldn't have been flattened to be a single enum reducer with all of their cases?

[sk409]

@stephencelis

we were hoping you could flesh out an example with some more real world motivation. Can you describe how you encountered this issue in your code base and why you had nested enum reducers?

Thank you for confirmation.
I added the motivation for nesting enum reducers #2813 (comment).

[dk-jlew]

Would it make sense to nest a navigation Path inside another navigation Path, in order to reuse a "subflow"? We have a bunch of features in different navigation contexts which all would like to launch the same subflow (which is several child features that navigate between each other). I haven't thought it through completely but it would seem natural to not want to flatten the subflow path in multiple different parent paths if the usage is always the same.

[mbrandonw]

Hi @dk-jlew, nested navigation paths just don't work in SwiftUI, even vanilla SwiftUI. At the end of the day you need to hand NavigationStack a binding to a flat collection, and so if you nested StackStates then you would still need to figure out how to flatten it.