Nested Destination Reducer unexpected order of dismissal

[bohdany-cricut]

Prerequisite

I have a feature that can navigate to or present a variety of other features. Some of these are required to be presented via .navigationDestination pushes, while others via .sheet or .fullScreenCover.
I aim to have a strict domain modeling of the Destination reducer:

@Reducer
struct Destination {
    @Reducer
    enum Navigation {
        case firstFeature(FirstFeature)
        case secondFeature(SecondFeature)
    }
    @Reducer
    enum Fullscreen {
        case firstFeature(FirstFeature)
        case secondFeature(SecondFeature)
    }
    enum State {
        case navigation(Navigation.State)
        case fullscreen(Fullscreen.State)
    }
    enum Action {
        case navigation(Navigation.Action)
        case fullscreen(Fullscreen.Action)
    }
    var body: some ReducerOf<Self> {
        Scope(state: \.navigation.firstFeature, action: \.navigation.firstFeature) {
            FirstFeature()
        }
        Scope(state: \.navigation.secondFeature, action: \.navigation.secondFeature) {
            SecondFeature()
        }
        Scope(state: \.fullscreen.firstFeature, action: \.fullscreen.firstFeature) {
            FirstFeature()
        }
        Scope(state: \.fullscreen.secondFeature, action: \.fullscreen.secondFeature) {
            SecondFeature()
        }
    }
}

This setup allows me to scope narrowly and exhaustively in the view:

struct ParentFeatureView: View {
    let store: StoreOf<ParentFeature>

    var body: some View {
        NavigationStack {
            VStack {
                // Parent view's body goes here
            }
            .navigationDestination(store: store.scope(
                state: \.$destination.navigation, // Scopes exhaustively only to `navigation`
                action: \.destination.navigation
            )) { store in
                switch store.case {
                case .firstFeature(let firstStore):
                    FirstFeatureView(store: firstStore)
                case .secondFeature(let secondStore):
                    SecondFeatureView(store: secondStore)
                }
            }
            .fullScreenCover(store: store.scope(
                state: \.$destination.fullscreen, // Scopes exhaustively only to `fullscreen`
                action: \.destination.fullscreen
            )) { store in
                switch store.case {
                case .firstFeature(let firstStore):
                    FirstFeatureView(store: firstStore)
                case .secondFeature(let secondStore):
                    SecondFeatureView(store: secondStore)
                }
            }
        }
    }
}

I’m also using the DismissEffect dependency in the child features to allow them to dismiss themselves:

@Reducer
struct FirstFeature {
    enum Action {
        case onGoToSecondTap
    }

    @Dependency(\.dismiss) var dismiss

    func reduce(into state: inout State, action: Action) -> Effect<Action> {
        switch action {
        case .onGoToSecondTap:
            return .run { _ in
                await dismiss()
            }
        }
    }
}

Problem Definition

In the parent reducer, when I have .fullscreen.firstFeature set as the destination and I want the onGoToSecondTap action to set the destination to another fullscreen feature like this:

case .destination(.presented(.fullscreen(.firstFeature(.onGoToSecondTap)))):
    state.destination = .fullscreen(.secondFeature(SecondFeature.State(count: 1)))
    return .none

It doesn’t work as expected—the expected behavior being that the first feature is dismissed and the second feature is presented. This is because the parent’s reducer seems to run before the FirstFeature’s reducer. So, first, the destination is set to .fullscreen.secondFeature, and then the dismiss() effect is called in the FirstFeature. This results in the FirstFeature’s view being dismissed, and the SecondFeature’s view appearing momentarily before being dismissed immediately.

This issue only occurs when I introduce nested reducers inside the Destination reducer, and when the destination changes within one sub-reducer (e.g., from fullscreen to fullscreen or from navigation to navigation). If I have all the cases in the Destination reducer without nesting, everything works fine.

Here is a minimal project that reproduces the issue:
GitHub Repository

And a video for reference:
Video Link

For your convenience, here is the relevant code:

Click to expand code

import ComposableArchitecture
import Foundation
import SwiftUI

@Reducer
struct ParentFeature {
@Reducer
struct Destination {
    @Reducer
    enum Navigation {
        case firstFeature(FirstFeature)
        case secondFeature(SecondFeature)
    }
    @Reducer
    enum Fullscreen {
        case firstFeature(FirstFeature)
        case secondFeature(SecondFeature)
    }
    enum State {
        case navigation(Navigation.State)
        case fullscreen(Fullscreen.State)
    }
    enum Action {
        case navigation(Navigation.Action)
        case fullscreen(Fullscreen.Action)
    }
    var body: some ReducerOf<Self> {
        Scope(state: \.navigation.firstFeature, action: \.navigation.firstFeature) {
            FirstFeature()
        }
        Scope(state: \.navigation.secondFeature, action: \.navigation.secondFeature) {
            SecondFeature()
        }
        Scope(state: \.fullscreen.firstFeature, action: \.fullscreen.firstFeature) {
            FirstFeature()
        }
        Scope(state: \.fullscreen.secondFeature, action: \.fullscreen.secondFeature) {
            SecondFeature()
        }
    }
}
    struct State {
        @PresentationState var destination: Destination.State?
    }
    enum Action {
        case onFullscreenFirstFeatureButtonTap
        case onNavigateFirstFeatureButtonTap
        case onNavigateSecondFeatureButtonTap
        case destination(PresentationAction<Destination.Action>)
    }

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .onFullscreenFirstFeatureButtonTap:
                state.destination = .fullscreen(.firstFeature(FirstFeature.State()))
                return .none

            case .onNavigateFirstFeatureButtonTap:
                state.destination = .navigation(.firstFeature(FirstFeature.State()))
                return .none

            case .onNavigateSecondFeatureButtonTap:
                state.destination = .navigation(.secondFeature(SecondFeature.State(count: 10)))
                return .none

            case .destination(.presented(.fullscreen(.firstFeature(.onGoToSecondTap)))):
                state.destination = .fullscreen(.secondFeature(SecondFeature.State(count: 1)))
                print("### set second")
                return .none

            case .destination(.presented(.navigation(.firstFeature(.onGoToSecondTap)))):
                state.destination = .navigation(.secondFeature(SecondFeature.State(count: 1)))
                print("### set second")
                return .none

            case .destination(.dismiss):
                print("### dismiss destination")
                return .none

            case .destination:
                return .none
            }
        }
        .ifLet(\.$destination, action: \.destination) {
            Destination()
        }
    }
}

struct ParentFeatureView: View {
    let store: StoreOf<ParentFeature>

    var body: some View {
        NavigationStack {
            VStack {
                Button {
                    store.send(.onFullscreenFirstFeatureButtonTap)
                } label: {
                    Text("Fullscreen first feature")
                }
                Button {
                    store.send(.onNavigateFirstFeatureButtonTap)
                } label: {
                    Text("Navigate to first feature")
                }
                Button {
                    store.send(.onNavigateSecondFeatureButtonTap)
                } label: {
                    Text("Navigate to second feature")
                }
            }
            .navigationDestination(store: store.scope(
                state: \.$destination.navigation,
                action: \.destination.navigation
            )) { store in
                switch store.case {
                case .firstFeature(let firstStore):
                    FirstFeatureView(store: firstStore)

                case .secondFeature(let secondStore):
                    SecondFeatureView(store: secondStore)
                }
            }
            .fullScreenCover(store: store.scope(
                state: \.$destination.fullscreen,
                action: \.destination.fullscreen
            )) { store in
                switch store.case {
                case .firstFeature(let firstStore):
                    FirstFeatureView(store: firstStore)

                case .secondFeature(let secondStore):
                    SecondFeatureView(store: secondStore)
                }
            }
        }
    }
}


@Reducer
struct FirstFeature {
    enum Action {
        case onGoToSecondTap
    }

    @Dependency(\.dismiss) var dismiss

    func reduce(into state: inout State, action: Action) -> Effect<Action> {
        switch action {
        case .onGoToSecondTap:
            return .run { _ in
                await dismiss()
                print("### dismiss first")
            }
        }
    }
}

struct FirstFeatureView: View {
    let store: StoreOf<FirstFeature>

    var body: some View {
        VStack {
            Text("First Feature")
                .font(.headline)
            Button {
                store.send(.onGoToSecondTap)
            } label: {
                Text("Go to second")
            }
        }
    }
}


@Reducer
struct SecondFeature {
    struct State: Equatable {
        var count: Int
    }
    enum Action {
        case onExitButtonTap
    }

    @Dependency(\.dismiss) var dismiss

    func reduce(into state: inout State, action: Action) -> Effect<Action> {
        switch action {
        case .onExitButtonTap:
            return .run { _ in
                await dismiss()
                print("### dismiss second")
            }
        }
    }
}

struct SecondFeatureView: View {
    let store: StoreOf<SecondFeature>

    var body: some View {
        WithViewStore(store, observe: { $0 }) { viewStore in
            Text("Second Feature")
                .font(.headline)
            Text("\(viewStore.count)")
            Button {
                store.send(.onExitButtonTap)
            } label: {
                Text("Exit")
            }
        }
    }
}

I hope this clarifies the issue I’m experiencing. Any insights or solutions would be greatly appreciated.

[mbrandonw]

Hi @bohdany-cricut, thanks for the sample app! That's very helpful for us understand what you are trying to do.

As far as I can tell this code is working as to be expected. When onGoToSecondTap is sent, the parent reducer does change the destination correctly, but because you are also using @Dependency(\.dismiss) in onGoToSecondTap, a moment later that destination is nil'd out. You can use the _printChanges() helper on reducers to see what exactly is happening in your app:

received action:
  ParentFeature.Action.onFullscreenFirstFeatureButtonTap
- ParentFeature.State(_destination: nil)
+ ParentFeature.State(
+   _destination: .fullscreen(
+     .firstFeature(FirstFeature.State())
+   )
+ )

received action:
  ParentFeature.Action.destination(
    .presented(
      .fullscreen(
        .firstFeature(.onGoToSecondTap)
      )
    )
  )
  ParentFeature.State(
    _destination: .fullscreen(
-     .firstFeature(FirstFeature.State())
+     .secondFeature(
+       SecondFeature.State(count: 1)
+     )
    )
  )

received action:
  ParentFeature.Action.destination(.dismiss)
- ParentFeature.State(
-   _destination: .fullscreen(
-     .secondFeature(
-       SecondFeature.State(count: 1)
-     )
-   )
- )
+ ParentFeature.State(_destination: nil)

Notice that after onGoToSecondTap is sent a .destination(.dismiss) action is also sent. Is there a reason you are doing dismiss() in onGoToSecondTap? It seems to be that you do not want to do that, and if you remove it:

case .onGoToSecondTap:
  return .run { _ in
    //await dismiss()
    print("### dismiss first")
  }

…it then works just fine.

[bohdany-cricut]

Hi @mbrandonw, thanks for a such a swift reply!

I appreciate your suggestion—it’s simple and it works. I’m going to apply it in my case for now.

---

Is there a reason you are doing dismiss() in onGoToSecondTap?

Initially, I wanted each child feature to handle dismissing itself. The reason is that sometimes the child feature is used in another reducer that doesn’t present anything in response to the child feature’s action.
The onGoToSecondTap is perhaps a poor example because the name suggests some navigation happening. In the real project, two different parent features react differently to my didReceiveImageDataFromSource action. One, just like in the example above, reacts by presenting another view, but the other just fires some requests without any navigation happening. In that case, the child feature dismissing itself made a lot of sense, so I didn’t have to manually nil out the destination in the second case.

---

The thing I'm still struggling to understand, though, is - why this happens? 😅
I mean the order of execution changes with the nested enum reducers (like navigation to navigation), and ParentFeature.Action.destination(.dismiss) being called.
For example, if in the sample project you change from fullscreen to navigation on the line 68 - then all works flawlessly - the first feature dismisses itself before the second one is presented (and ParentFeature.Action.destination(.dismiss) is not called).

case .destination(.presented(.fullscreen(.firstFeature(.onGoToSecondTap)))):
//    state.destination = .fullscreen(.secondFeature(SecondFeature.State(count: 1)))
    state.destination = .navigation(.secondFeature(SecondFeature.State(count: 1)))
    print("### set second")
    return .none

So compare:
When changing from fullscreen to fullscreen (the same that you've posted):

received action:
  ParentFeature.Action.onFullscreenFirstFeatureButtonTap
- ParentFeature.State(_destination: nil)
+ ParentFeature.State(
+   _destination: .fullscreen(
+     .firstFeature(FirstFeature.State())
+   )
+ )

received action:
  ParentFeature.Action.destination(
    .presented(
      .fullscreen(
        .firstFeature(.onGoToSecondTap)
      )
    )
  )
  ParentFeature.State(
    _destination: .fullscreen(
-     .firstFeature(FirstFeature.State())
+     .secondFeature(
+       SecondFeature.State(count: 1)
+     )
    )
  )

received action:
  ParentFeature.Action.destination(.dismiss)
- ParentFeature.State(
-   _destination: .fullscreen(
-     .secondFeature(
-       SecondFeature.State(count: 1)
-     )
-   )
- )
+ ParentFeature.State(_destination: nil)

When changing from fullscreen to navigation:

received action:
  ParentFeature.Action.onFullscreenFirstFeatureButtonTap
- ParentFeature.State(_destination: nil)
+ ParentFeature.State(
+   _destination: .fullscreen(
+     .firstFeature(FirstFeature.State())
+   )
+ )

received action:
  ParentFeature.Action.destination(
    .presented(
      .fullscreen(
        .firstFeature(.onGoToSecondTap)
      )
    )
  )
  ParentFeature.State(
-   _destination: .fullscreen(
-     .firstFeature(FirstFeature.State())
-   )
+   _destination: .navigation(
+     .secondFeature(
+       SecondFeature.State(count: 1)
+     )
+   )
  )

Notice that ParentFeature.Action.destination(.dismiss) is not being fired in the second case. This is what I don't understand, as everything else is exactly the same as in the first case.

---

Could you help me understand why the dismiss action is not being triggered when changing from fullscreen to navigation, but it is when changing from fullscreen to fullscreen (the difference in navigation style doesn't seem to be the case)? I’m trying to grasp the underlying mechanics causing this difference.

[mbrandonw]

Hi @bohdany-cricut,

In that case, the child feature dismissing itself made a lot of sense, so I didn’t have to manually nil out the destination in the second case.

Then you may want to provide some configuration to the child feature so that it knows if it is responsible for dismissing itself or not. That would get around the issue too.

For example, if in the sample project you change from fullscreen to navigation on the line 68 - then all works flawlessly - the first feature dismisses itself before the second one is presented (and ParentFeature.Action.destination(.dismiss) is not called).

That is happening because the act of changing destination to a different case cancels the effects from the previous case thanks to the ifLet reducer operator. Whereas simply switching to an inner case of the same case (i.e. destination = .fullscreen(…)) does not. A few comments about this:

• If you had designed Destination as just a flat enum of all destinations instead of nesting, then this would work as you expect (though you may run into SwiftUI bugs with simultaneously dismissing/presenting sheets, but iOS has gotten better about that recently).
• We have some changes coming to TCA that will make it so that this works right away regardless of how you nest/structure your destinations. So the current behavior is expected but not ideal, and we will have better ways of doing this.

[bohdany-cricut]

Ah, I understand now—that makes sense! Thank you very much for the comprehensive explanation!