Navigating more views does not working

[john-ahmedov]

Description

While I am creating app with more navigations, For example: 1st screen navigates, 2nd screen, then 3rd, 4th, 5th screens.
When I am navigating 1st to 2nd works fine, but when navigating 2nd to 3rd, it dismiss 3rd screen automatically. It is really annoying.

Checklist

• I have determined whether this bug is also reproducible in a vanilla SwiftUI project.
• If possible, I've reproduced the issue using the main branch of this package.
• This issue hasn't been addressed in an existing GitHub issue or discussion.

Expected behavior

It should navigate properly to other screens without dismissing it

Actual behavior

3rd screen dismisses automatically

Steps to reproduce

1. Navigate 1st, 2nd, 3rd screen.

The Composable Architecture version information

No response

Destination operating system

iOS 16.0

Xcode version information

Xcode 12.3

Swift Compiler version information

No response

[mbrandonw]

Hi @john-ahmedov, this is most likely just a bug in vanilla SwiftUI. Many times it is exacerbated by observing too much state in TCA, but without seeing any code it is hard to say. You should audit any place you are using observe: { $0 } in a ViewStore or WithViewStore in order to whittle down state to the bare essentials (see this article).

I am going to convert this issue into a discussion since it is most likely not a problem with the library. Please include more code or a sample project if you would like to discuss further.

[john-ahmedov]

@mbrandonw This is my actual code:

import SwiftUI
import ComposableArchitecture


struct ThirdReducer: ReducerProtocol {
    struct State: Equatable {
//        @PresentationState var thirdView: CongratulationReducer.State?
    }

    enum Action: Equatable {
        case tapped
    }

    var body: some ReducerProtocolOf<Self> {
        Reduce { state, action in
            switch action {
            case .tapped:

                return .none
            }
        }
        //        .ifLet(\.$createWallet, action: /Action.createWallet) {
        //            CongratulationReducer()
        //        }
    }
}


struct SecondReducer: ReducerProtocol {
    struct State: Equatable {
        @PresentationState var thirdView: ThirdReducer.State?
    }

    enum Action: Equatable {
        case tapped
        case thirdView(PresentationAction<ThirdReducer.Action>)
    }

    var body: some ReducerProtocolOf<Self> {
        Reduce { state, action in
            switch action {
            case .tapped:
                state.thirdView = .init()
                return .none

            case .thirdView:
                return .none
            }
        }
        .ifLet(\.$thirdView, action: /Action.thirdView) {
            ThirdReducer()
        }
    }
}


struct SecondView: View {
    let store: StoreOf<SecondReducer>

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

    var body: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            VStack {
                Text("Second")
                    .fontWeight(.semibold)
                    .font(.title)
                    .padding(.bottom, 5)
                NavigationLinkStore(
                    self.store.scope(state: \.$thirdView, action: SecondReducer.Action.thirdView)
                ) {
                    viewStore.send(.tapped)
                } destination: { store in
                    Text("Text")
                } label: {
                    Text("Third")
                        .fontWeight(.semibold)
                        .foregroundColor(.white)
                        .frame(width: 294, height: 50, alignment: .center)
                        .background(Color.accentColor)
                        .cornerRadius(12)
                        .padding(.horizontal, 48)
                }
            }
        }
    }
}

struct FirstReducer: ReducerProtocol {
    struct State: Equatable {
        @PresentationState var secondView: SecondReducer.State?
    }

    enum Action: Equatable {
        case tapped
        case secondView(PresentationAction<SecondReducer.Action>)
    }

    var body: some ReducerProtocolOf<Self> {
        Reduce { state, action in
            switch action {
            case .tapped:
                state.secondView = .init()
                return .none
            case .secondView:
                return .none
            }
        }
        .ifLet(\.$secondView, action: /Action.secondView) {
            SecondReducer()
        }
    }
}

struct FirstView: View {
    let store: StoreOf<FirstReducer>

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

    var body: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            VStack {
                Text("First")
                    .fontWeight(.semibold)
                    .font(.title)
                    .padding(.bottom, 5)
                NavigationLinkStore(
                    self.store.scope(state: \.$secondView, action: FirstReducer.Action.secondView)
                ) {
                    viewStore.send(.tapped)
                } destination: { store in
                    SecondView(store: store)
                } label: {
                    Text("Second")
                        .fontWeight(.semibold)
                        .foregroundColor(.white)
                        .frame(width: 294, height: 50, alignment: .center)
                        .background(Color.accentColor)
                        .cornerRadius(12)
                        .padding(.horizontal, 48)
                }
            }
        }
    }
}

struct FirstView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            FirstView(store: .init(
                initialState: .init(),
                reducer: FirstReducer()
            ))
        }
    }
}