Problem in nested navigation

[inwoodev]

Currently trying to develop registration process. As I tap the blue button located below, it should navigate to next view.

However, for some reason, as I try to navigate to third screen, it then comes back to second screen.

I am wondering whether it is a swiftui, tca bug, or whether have I done something wrong...

Expectation: NameView -> GenderView -> BirthdayView
Result: NameView -> GenderView -> BirthdayView (Strangely NavigateBackTo) -> GenderView

Here are some code blocks:

NameCore logic is structured as below

struct NameRegister: ReducerProtocol {
  struct State: Equatable {
    @BindableState var name: String = ""
    var isConfirmButtonDisabled: Bool = true
    var genderRegisterState: GenderRegister.State?
    @BindableState var isNavigationActive: Bool = false
  }

  enum Action: BindableAction, Equatable {
    case binding(BindingAction<State>)
    case confirmButtonTapped
    case genderRegisterAction(GenderRegister.Action)
  }

  var body: some ReducerProtocol<State, Action> {
    
    CombineReducers {
      BindingReducer()
      
      Reduce { state, action in
        switch action {
        case .confirmButtonTapped:
          state.isNavigationActive = true
          state.genderRegisterState = GenderRegister.State()
          return .none

        case .binding(\.$name):
          state.isConfirmButtonDisabled = self.isInvalidName(checking: state)
          return .none

        case .binding:
          return .none

        case .genderRegisterAction:
          return .none
        }
      }
    }
    .ifLet(
      \.genderRegisterState,
       action: /Action.genderRegisterAction
    ) {
      GenderRegister()
    }
  }
  .
  .
  .
}

NavigationLink is structured as below:

struct NameView: View {
   var body: some View {
       .
       .
       .
       NavigationLink(
          destination: IfLetStore(
            self.store.scope(
              state: \.genderRegisterState,
              action: { .genderRegisterAction($0) }
            ),
            then: { store in
              GenderRegisterView(store: store) }
          ),
          isActive: viewStore.binding(\.$isNavigationActive),
          label: {
          ConfirmButton(
            title: .init(ProjectString.Signup.confirmButtonTitle),
            disabled: viewStore.isConfirmButtonDisabled,
            action: {
              viewStore.send(.confirmButtonTapped)
          })
          .adaptiveVPadding(64)
        })
        .disabled(viewStore.isConfirmButtonDisabled)
   }
}

The GenderView & Core is sturctured exactly the same

struct GenderRegister: ReducerProtocol {
  var isConfirmButtonDisabled: Bool = true
  var birthdayRegisterState: BirthdayRegister.State?
  @BindableState var isNavigationActive: Bool = false
  .
  .
  .
  // same body as that of NameCore
}

However, it fails to navigate to BirthdayView....

I would like to get some clue to fix the navigate back issue. Thank you beforehand for your time and effort.

[tgrapperon]

Hey @inwoodev! The usual suspect with navigation glitches in SwiftUI is too much state being observed by your ViewStore.
I'm not seeing your ViewStore declaration, but it is likely that you're observing the whole domain's state. You should probably carve-out a ViewState where you expose only what's strictly required to render your view. You can check the Performance article about ViewStates for more informations.
A few additional comments:

• You need to apply this technique everywhere. The problem can be created by a ViewStore observing too much state higher in the hierarchy.
• You will need to adapt your bindings so they can work with a ViewState. See How to make bindings work with ViewState? #769 for example.

[inwoodev]

Thank you for your answer! Declaring ViewState and ViewAction saved my day!!

[inwoodev]

I am writing this comment to provide some hints to those who may be having similar problem.

I created ViewState and ViewAction so that I may carve out the state limited to NameRegisterView. Thus, I did not include the state that involves Navigation link in the ViewState as below:

struct NameRegisterView: View {
  let store: StoreOf<NameRegister>

  struct ViewState: Equatable {
    var progress: Float
    var isConfirmButtonDisabled: Bool
    @BindableState var name: String
    @BindableState var isNavigationActive: Bool

    init(
      state: NameRegister.State
    ) {
      self.progress = state.progress
      self.isConfirmButtonDisabled = state.isConfirmButtonDisabled
      self._name = state.$name
      self._isNavigationActive = state.$isNavigationActive
    }
  }

  enum ViewAction: BindableAction, Equatable {
    case binding(BindingAction<ViewState>)
    case confirmButtonTapped
    case genderRegisterAction(GenderRegister.Action)
  }

  var body: some View {
    WithViewStore(
      self.store,
      observe: ViewState.init,
      send: NameRegister.Action.init
    ) { viewStore in
      VStack {
        RegisterProgressView(progress: viewStore.progress)
          .adaptiveHeight(37)

        Text(CommonStrings.Signup.askName)
          .cimilleBoldFont(.headline1)
          .padding(.trailing)
          .adaptiveHeight(76)

        UnderlineTextField(
          text: viewStore.binding(\.$name)
        )

        NavigationLink(
          destination: GenderRegisterView(
            store: self.store.scope(
              state: \.genderRegisterState,
              action: { .genderRegisterAction($0) }
            )
          ),
          isActive: viewStore.binding(\.$isNavigationActive),
          label: {
          ConfirmButton(
            title: .init(CimilleStrings.Signup.confirmButtonTitle),
            disabled: viewStore.isConfirmButtonDisabled,
            action: {
              viewStore.send(.confirmButtonTapped)
          })
          .adaptiveVPadding(64)
        })
        .disabled(viewStore.isConfirmButtonDisabled)

        Spacer()
      }
      .adaptiveHPadding(25)

    }
  }
}

To map ViewAction, I extended the Action as below:

extension NameRegister.Action {
  init(action: NameRegisterView.ViewAction) {
    switch action {
    case .binding(let bindingAction):
      self = .binding(bindingAction.pullback(\NameRegister.State.bindableView))

    case .confirmButtonTapped:
      self = .confirmButtonTapped

    case .genderRegisterAction(let action):
      self = .genderRegisterAction(action)
    }
  }
}

To adapt bindings I created a computed Property bindableView as below. The below extension made it possible to pullback core Action to ViewAction, enabling mapping bindable action of ViewAction and Action:

extension NameRegister.State {
  var bindableView: NameRegisterView.ViewState {
    get { .init(state: self) }
    set {
      // Bindable Action만을 처리하기 위해
      self.name = newValue.name
      self.isNavigationActive = newValue.isNavigationActive
    }
  }
}

However, this approach seems a bit strange since the mapping above made it impossible to reach a specific binding case action:
@tgrapperon your feedback was indeed helpful in fixing the problem..thank you so much :). Umm..Do you have any idea why is case .binding(\.$name): not reachable?

struct NameRegister: ReducerProtocol {
  struct State: Equatable {
    var progress: Float = 12.5
    @BindableState var name: String = ""
    var isConfirmButtonDisabled: Bool = true
    var genderRegisterState = GenderRegister.State()
    @BindableState var isNavigationActive: Bool = false
  }

  enum Action: BindableAction, Equatable {
    case binding(BindingAction<State>)
    case confirmButtonTapped
    case genderRegisterAction(GenderRegister.Action)
  }

  var body: some ReducerProtocol<State, Action> {
    BindingReducer()

    Scope(
      state: \.genderRegisterState,
      action: /Action.genderRegisterAction
    ) {
      GenderRegister()
    }

    Reduce { state, action in
      switch action {
      case .confirmButtonTapped:
        state.isNavigationActive = true
        return .none
        
      // the case below is not reachable for some reason
      case .binding(\.$name):
        state.isConfirmButtonDisabled = self.isInvalidName(checking: state)
        return .none
      
      // therefore I had to call isInvalid method below to check the validity of name
      case .binding:
        state.isConfirmButtonDisabled = self.isInvalidName(checking: state)
        return .none

      case .genderRegisterAction:
        return .none
      }
    }
  }

  private func isInvalidName(checking state: State) -> Bool {
    return state.name.isEmpty
  }
}

[tgrapperon]

Hey @inwoodev! I'm not seeing anything particularly wrong with the last reducer. I'll try to dig deeper later. One thing that you can maybe try is to make its generics explicit:

Reduce { … } -> Reduce<State, Action> { … }

According to my experience, I'm losing autocompletion of actions cases when using inferred Reduce when there are other reducers in body. Maybe this is the same mechanism that prevents \.$name to be correctly inferred. You can also try \State.$name to make it even clearer to the compiler.

[inwoodev]

Thank you~. I deed actually try to insert type to make it clearer for compiler to infer, however, still the same problem exists...:(

[tgrapperon]

Ah yeah, it builds, but it doesn't autocomplete, right? I've tried to build your reducer in vitro by removing the GenderRegister stuff, and it indeed builds.
The compiler is not autocompleting this "case" because this is not a proper enum's case, but an overload of the pattern matching operator. It allows to simply use KeyPaths here to match bindings actions, but it's maybe a little too much for the compiler to be able to understand that while you type.
Is your project not building?

[inwoodev]

yes, my project is building... It's just that I made types quite explicit as you have suggested Reduce { … } -> Reduce<State, Action> { … } and at the same time inserting specific Type on case parameter as well case .binding(\State.$name). However, stil having the same problem. The compiler catches the default binding case but not the .$name` :(

[tgrapperon]

Ah, so the problem is at runtime. I think it comes from the approach you took to handle the ViewState problem with bindings. The KeyPath you're using from your ViewState to activate the binding (\ViewState.$name) is not the same as the one you're observing into your Reduce reducer (\State.$name), but you didn't properly transform your binding action because you used instead a computed property for ViewState.

I know there are works in progress to propose a built-in solution to the problem, but in the meantime you can maybe try .binding(\.$name, as: \.name) that I proposed to quickly check that it's working (you may need to remove @BindableState from ViewState for this one to work), or use the slightly more verbose pullback approach for a proper fix, as @stephencelis explains in the same discussion.

[tobitech]

I also had this same problem. I was able to fix it by just making a ViewState, I didn't need a ViewAction.
The only thing I'm confused about now is that it only works if I use WithViewStore(self.store, observe: ViewState.init) it doesn't work if I create the viewStore with @ObservedObject,

@ObservedObject var viewStore: ViewStore<ViewState, Feature.Action>
init(store: StoreOf<Feature>) {
  self.store = store
  self.viewStore = ViewStore(self.store.scope(state: ViewState.init))
}

Don't know if anyone has an idea why?

This doesn't work as well self.viewStore = ViewStore(self.store, observe: ViewState.init)

[tobitech]

The approach to use @StateObject for the viewStore worked. Thank you.
I haven't got a lot of time yet to extract source code because there are a lot of moving parts between 3 separate modularised features in the project. I'll do my best when I can.

[tobitech]

Hello @tgrapperon I am now experiencing the issue again, now it seems the problem is not with how I was initialising the ViewStore but some other state issues.
I was testing the flow in an isolated preview app when it worked, now that I've integrated the feature into the parent, after running the whole app the issue has returned and no amount of ViewState or @StateObject in nested features could solve it.

While debugging and setting breakpoints I found out that a particular change to child state is causing the parent view to re-render and because child view is initialised inside the parent, it causes child state to return to default initialiser arguments and the onAppear of child view to be called again.

Here is some code snippet:

Overview Reducer

public struct OverviewFeature: ReducerProtocol {
	
	public enum DestinationState: Equatable {
		case search(SearchFeature.State)
		
		public enum Tag {
			case search
		}
		
		var tag: Tag {
			switch self {
			case .search: return .search
			}
		}
	}
	
	public enum DestinationAction: Equatable {
		case search(SearchFeature.Action)
	}
	
	public struct State: Equatable {
		// ...
		public var destination: DestinationState?
		// ...
		
		public init(
			// ...
			destination: DestinationState? = nil,
			// ...
		) {

			self.destination = destination
			// ...
		}
	}
	
	public enum Action {
		// ...
		case destination(DestinationAction)
		// ...
	}
	
	public init() {}
	
	public var body: some ReducerProtocol<State, Action> {
		Reduce { state, action in
			switch action {
				
			case .destination(_):
				return .none

			case .onAppear:
				return .none
				
			case let .setNavigationDestination(tag: tag):
				switch tag {
				case .search:
					state.destination = .search(.init())

				case .none:
					state.destination = .none
				}
				return .none
			}
		}
		.ifLet(\.destination, action: /Action.destination) {
			EmptyReducer()
				.ifCaseLet(/DestinationState.search, action: /DestinationAction.search) {
					SearchFeature()
				}
		}
	}
}

Overview Views

public struct OverviewView: View {
  let store: StoreOf<OverviewFeature>
  @StateObject var viewStore: ViewStore<ViewState, OverviewFeature.Action>
  
  public init(store: StoreOf<OverviewFeature>) {
    self.store = store
    self._viewStore = .init(wrappedValue: ViewStore(store, observe: ViewState.init))
  }
	
    struct ViewState: Equatable {
      var destinationTag: OverviewFeature.DestinationState.Tag?
    
      init(state: OverviewFeature.State) {
	      self.destinationTag = state.destination?.tag
      }
    }
  public var body: some View {
    NavigationView {
      OverviewContentView(
      store: self.store
    )
    // ...
    }
}


struct OverviewContentView: View {
	let store: StoreOf<OverviewFeature>
	@StateObject var viewStore: ViewStore<ViewState, OverviewFeature.Action>
	
	init(store: StoreOf<OverviewFeature>) {
		self.store = store
		self._viewStore = .init(wrappedValue: ViewStore(store, observe: ViewState.init))
	}
	
	struct ViewState: Equatable {
		var destinationTag: OverviewFeature.DestinationState.Tag?
		...
		
		init(state: OverviewFeature.State) {
			self.destinationTag = state.destination?.tag
			...
		}
	}
	
	var body: some View {
		GeometryReader { geometry in
			ScrollView {
				VStack(alignment: .leading) {
						NavigationLink(
							destination: IfLetStore(
								self.store.scope(
									state: (\OverviewFeature.State.destination).appending(path: /OverviewFeature.DestinationState.search).extract(from:),
									action: { .destination(.search($0)) }
								),
								then: {
									SearchView(store: $0)
								}
							),
							tag: OverviewFeature.DestinationState.Tag.search,
							selection: viewStore.binding(
								get: \.destinationTag,
								send: OverviewFeature.Action.setNavigationDestination(tag:)
							),
							label: {
								SearchBarView()
							}
						)
						.buttonStyle(.plain)
                                        }
                        }
              }
}

Search Feature

public struct SearchFeature: ReducerProtocol {
	
	public struct State: Equatable {
		...
		public var selectedTransaction: Identified<TransactionData.ID, TransactionDetailsFeature.State?>?
		
		public init(
			...
			selectedTransaction: Identified<TransactionData.ID, TransactionDetailsFeature.State?>? = nil
		) {
			...
			self.selectedTransaction = selectedTransaction
		}
	}

	public enum Action: Equatable {
		case onAppear
		...
		case setNavigation(selection: String?)
	}
	
	public init() {}
	
	public var body: some ReducerProtocol<State, Action> {
		Reduce { state, action in
			switch action {
				
			case .onAppear:
				return .task 
			
			case let .setNavigation(selection: .some(id)):
				if let transaction = state.filteredTransactions[id: id] {
					let transactionDetails = TransactionDetailsFeature.State(transaction: transaction)
					state.selectedTransaction = Identified<String, TransactionDetailsFeature.State?>(transactionDetails, id: id)
				}
				return .none
				
			case .setNavigation(selection: .none):
				state.selectedTransaction = nil
				return .none
			}
		}
		.ifLet(\.selectedTransaction, action: /Action.transactionDetails) {
			EmptyReducer()
				.ifLet(\Identified<TransactionData.ID, TransactionDetailsFeature.State?>.value, action: .self) {
					TransactionDetailsFeature()
				}
		}
	}
}

public struct SearchView: View {
	
	let store: StoreOf<SearchFeature>
	public init(store: StoreOf<SearchFeature>) {
		self.store = store
	}
	
	public var body: some View {
		WithViewStore(self.store, observe: \.searchQuery) { viewStore in
			SearchResultsView(store: self.store)
				.navigationTitle("Search")
				.navigationBarTitleDisplayMode(.inline)
				.searchable(
					text: viewStore.binding(
						get: { $0 },
						send: SearchFeature.Action.searchQueryChanged
					),
					placement: .navigationBarDrawer(displayMode: .always),
					prompt: "Search transactions"
				)
				.onAppear {
					viewStore.send(.onAppear)
				}
		}
	}
}

struct SearchResultsView: View {
      @Environment(\.isSearching) var isSearching
      
      let store: StoreOf<SearchFeature>
      
      struct ViewState: Equatable {
          // ...
          var selectedTransaction: Identified<TransactionData.ID, TransactionDetailsFeature.State?>?
          
          init(state: SearchFeature.State) {
	          // ...
	          self.selectedTransaction = state.selectedTransaction
          }
      }
	
      var body: some View {
      WithViewStore(self.store, observe: ViewState.init) { viewStore in
	      ScrollView {
		      VStack {
				      ForEach(viewStore.filteredTransactions) { transaction in
					      NavigationLink(
						      destination: IfLetStore(
							      self.store.scope(
								      state: \.selectedTransaction?.value,
								      action: SearchFeature.Action.transactionDetails
							      ),
							      then: { TransactionDetailsView(store:$0) }
						      ),
						      tag: transaction.id,
						      selection: viewStore.binding(
							      get: \.selectedTransaction?.id,
							      send: SearchFeature.Action.setNavigation(selection:)
						      ),
						      label: {
							      TransactionItemView(transaction: transaction)
						      }
					      )
					      .buttonStyle(.plain)
				      }
			      }
		      }
	      }
	      .scrollIndicators(.hidden)
      }
    }
  }

The problem is that when selectedTransaction changes on the SearchFeature state, it causes the OverviewView to be re-rendered which causes SearchView to be re-initialised with a nil value for selectedTransaction, the nil value triggers setNavigationDestination and causes the TransactionDetails view to be dismissed.

Don't know if you have an idea why the parent view is being re-rendered when child state changes.

[tgrapperon]

Hey @tobitech! I'll look at it closely later. What immediately jumps is OverviewView's NavigationView being invalidated when the tag is changed. I would try to avoid that, as this is similar the kind of issues that happen when you're not observing only a ViewState. There are a few other suspicious calls, like your top level GeometryReader, and the "deep" scopes that could probably be refactored into independent steps/sub-features and give a better idea about what's going on. Also, adding let _ = Self._printChange() in view bodies can give you some insight about what caused the evaluation.
If nothing of this helps, would you mind opening another dedicated discussion for this problem? It would help it gain more visibility.

[tobitech]

@tgrapperon Could you please clarify what part of the code you're referring to by OverviewView's NavigationView being invalidated when the tag is changed, do you mean this:

case .none:
  state.destination = .none
}

I'm in the process of refactoring the setup, thank you for taking the time.

[tgrapperon]

@tobitech The whole OverviewView doesn't need to observe anything. You seem to have removed a few things that may need to observe the tag, but in any case, I would check if removing the ViewStore from this view helps with your problem.