How to pass values to the next screen

[marco-evc]

Hi, I started using TCA a few weeks ago, but I have a couple of questions.
1.- What is the best way to initialize a state for the next screen?

2.- In another screen I have an email and password and the login button status is activated only when the email and password are not empty. Previously I did it with Publishers.combineLatest, however in TCA I don't know how I can do something similar.

Below is the example of how I am doing point 1:

Reducer

  struct RootState: Equatable {
    @BindableState var text = ""
    @BindableState var showNext = false
    var secondView = SecondDomain.SecondState()
  }
  enum RootAction: Equatable, BindableAction {
    case secondView(SecondDomain.SecondAction)
    case buttonTapped
    case binding(BindingAction<RootState>)
  }
  
  var body: some ReducerProtocol<RootState, RootAction> {
    BindingReducer()
    
    Reduce { state, action in
      switch action {
      case .buttonTapped:
        state.showNext = true
        return .none

      case .binding(\.$text):
        state.secondView.text = state.text
        return .none

      case .binding:
        return .none

      case .secondView:
        return .none
      }
    }
  }
}

View

struct Root: View {
  let store: StoreOf<RootDomain>

  var body: some View {
    WithViewStore(self.store, observe: { $0 }) { viewStore in
      VStack {
        TextField("Enter text", text: viewStore.binding(\.$text))

        NavigationLink(destination: SecondView(store: self.store.scope(
          state: \.secondView,
          action: RootDomain.RootAction.secondView)), isActive: viewStore.binding(\.$showNext)) {
            Button {
              viewStore.send(.buttonTapped)
            } label: {
              Text("Show Next")
            }
          }
      }
    }
  }
} 

And then this is my second view:

struct SecondDomain: ReducerProtocol {
  struct SecondState: Equatable {
    @BindableState var text = ""
    @BindableState var anotherText = ""
  }
  enum SecondAction: Equatable, BindableAction {
    case binding(BindingAction<SecondState>)
  }

  var body: some ReducerProtocol<SecondState, SecondAction> {
    BindingReducer()
    Reduce { state, action in
      switch action {
      case .binding:
        return .none
      }
    }
  }
}

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

    var body: some View {
      WithViewStore(self.store, observe: { $0 }) { viewStore in
        Text(viewStore.text)

        TextField("Enter other text", text: viewStore.binding(\.$anotherText))
        Text(viewStore.anotherText)
      }
    }
}

The phone number or whatever text that I set in the first view is working in the second view, but I'm not sure if this is the best way to do that.
Also In the second view I have another textfield however when I try to write anything, I get this error in the console:

A binding action sent from a view store at "TCADemo/SecondView.swift:38" was not handled. …

  Action:
    SecondDomain.SecondAction.binding(.set(_, ))

To fix this, invoke "BindingReducer()" from your feature reducer's "body".
2022-11-28 18:01:35.944233-0600 TCADemo[91932:1450212] [ComposableArchitecture] A binding action sent from a view store at "TCADemo/SecondView.swift:38" was not handled. …

I'm not sure why I am getting that error because the BindingReducer is added.

I hope the explanation of the problems I am having is accurate. Thank you very much for your help.

[tgrapperon]

Hey @marco-evc!
Let's start with the last error: this message is triggered when a binding action is emitted but no reducer has "expressed" it. The natural reducer for this action is SecondDomain. This one has indeed a BindingReducer, so if it didn't process this action, it means that SecondDomain wasn't involved at all. If you look at RootDomain, you can see that you're not embedding any SecondDomain reducer, which explains why no one processed this binding action. So the solution is to insert a scoped SecondDomain in RootDomain:

Scope(state: \.secondView, action: /RootAction.secondView) {
  SecondDomain()
}

To activate the Login button only when both fields are non nil, you can use the .disabled(Bool) view modifier on the Button and use the viewStore to check if the email or password are empty.

And now the tricky question: how to initialize a state for the next screen. Your solution to update the value when the button is tapped is probably OK. As an alternative, you can model your second screen using an optional state. It means that you should replace Scope(state: \.secondView… by:

.ifLet(\.secondView, action: /RootAction.secondView) {
  SecondDomain()
}

added after Reduce. You will also need to use:

IfLetStore(store.scope(state: \.secondView, action: RootDomain.RootAction.secondView) {
  SecondView(store: $0)
}

in your NavigationLink's destination. Now, when you tap the button, you create a new and up-to-date SecondDomain.State in your reducer, and you assign this value to state.secondView. You should also observe .binding(\.$showNext), and nil state.secondView when state.showNext == false.

While it should already work implemented like this, you now have two ways to describe the presence or not of the destination: the optionality of state.secondView, and the boolean value state.showNext. You can probably refactor this to have only one single source of truth and avoid incoherent states. The simplest way is to define showNext as a computed property:

var showNext: Bool {
  get { self.secondView != nil }
  set { 
    if !newValue, self.secondView != nil {
      self.secondView = nil
    } else if newValue, self.secondView == nil {
      self.secondView = .init(text: self.text)
    }
  }
}

But this will prevent you to use a property wrapper, hence @BindableState for this property. So the workaround is to introduce a .showNext(Bool) action, and to use:

viewStore.binding(get: \.showNext, send: RootDomain.RootAction.showNext)

to control your navigation link's active state (please note that this approach with a Binding<Bool> is deprecated starting from iOS 16). You simply wire this action into your reducer to flip state.showNext. It works without creating a closure for send: in this case because RootDomain.RootAction.showNext is considered as a function (Bool) -> RootDomain.RootAction, which is the expected signature when presenting a Bool in get:.

The advantage of this approach is that you don't have a SecondView domain alive when you're not using it. It also helps when you're not capable of creating an updatable value for your destination's domain (for example because you need to provide an immutable UUID's ID)

I hope it helps.