@Bindable state question

[jjjeeerrr222]

I have a parent view HomeFeature with some bindable state

public struct HomeFeature: ReducerProtocol {
    public init() {}
    
    public struct State: Equatable {
        @BindableState var isPresented = false
        var gameFeature: GameFeature.State? = nil
        
        public init() {}
    }
    
    public enum Action: Equatable, BindableAction {
        case binding(BindingAction<State>)
        case gameFeature(GameFeature.Action)
    }
    
    public var body: some ReducerProtocol<State, Action> {
        CombineReducers {
            BindingReducer()
            Reduce(self.core)
                .ifLet(\.gameFeature, action: /Action.gameFeature) {
                    GameFeature()
                }
        }
    }
    
    func core(state: inout State, action: Action) -> Effect<Action, Never> {
        switch action {
         case .binding(\.$isPresented):
            // Pass the @BindableState to child view?
            if state.$gameViewPresented.wrappedValue {
                state.gameFeature = .init(isPresented: state.$isPresented)
            }
            return .none
        case .binding:
            return .none
        case let .gameFeature(action):
            switch action {
            case .binding(\GameFeature.State.$isPresented):
                state.gameFeature = nil
                return .none
            case .binding:
                return .none
            }
        }
    }
}

In my HomeView I want to present my GameView using IfLetStore and the @BindableState var isPresented

public struct HomeView: View {
    var store: StoreOf<HomeFeature>
    
    public init(store: StoreOf<HomeFeature>) {
        self.store = store
    }
    
    public var body: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            Button {
                viewStore.send(
                    .set(\.$isPresented, true)
                )
            } label: {
                Text("Open child view")
            }
            .fullScreenCover(
                isPresented: viewStore.binding(\.$isPresented)
            ) {
                IfLetStore(
                    self.store.scope(
                        state: { $0.gameFeature },
                        action: { .gameFeature($0) }
                    )
                ) { childStore in
                    GameView(store: childStore)
                }
            }
        }
    }
}

The GameFeature is initialized with the @BindableState var isPresented

public struct GameFeature: ReducerProtocol {
    
    public init() {}
    
    public struct State: Equatable {
        @BindableState public var isPresented: Bool
        
        public init(isPresented: BindableState<Bool>) {
            self._isPresented = isPresented
        }
    }
    
    public enum Action: Equatable, BindableAction {
        case binding(BindingAction<State>)
    }
    
    public var body: some ReducerProtocol<State, Action> {
        Reduce(self.core)
    }
    
    func core(state: inout State, action: Action) -> Effect<Action, Never> {
        switch action {
        case .binding:     
            return .none
        }
    }
}

I can see that my state.gameFeature is set to nil but this results in the IfLetStore elseContent: being rendered as an empty white screen instead of just dismissing the view? I dont have an else clause defined

[mbrandonw]

Bindable state is not capable of being passed around like this:

state.gameFeature = .init(isPresented: state.$isPresented)

If you mutate isPresented in the game feature, it will not have any affect on the home feature.

This is because bindable state has two parts to its implementation: the part in the reducer for updating state, and the part in the view for sending actions (which is the binding). By passing $isPresented to the game feature you are completely missing out on the ability for actions to be sent when the state is mutated.

But, I think there is a better way to deal the navigation you are trying to accomplish. You shouldn't model your domain as a boolean and an optional. That allows for non-sensical states such as isPresented=false but gameFeature being non-nil, or isPresented=true and gameFeature being nil.

Instead, you can ditch the boolean entirely, and only use the optional to drive presenting/dismissing the fullscreen cover. You can even use @Environment(\.dismiss) in the child view in order to dismiss from within the modal.

Here is the code that does that:

public struct HomeFeature: ReducerProtocol {
  public init() {}

  public struct State: Equatable {
    var gameFeature: GameFeature.State? = nil
    public init() {}
  }

  public enum Action: Equatable {
    case dismissGame
    case gameFeature(GameFeature.Action)
    case openButtonTapped
  }

  public var body: some ReducerProtocol<State, Action> {
    CombineReducers {
      Reduce(self.core)
        .ifLet(\.gameFeature, action: /Action.gameFeature) {
          GameFeature()
        }
    }
  }

  func core(state: inout State, action: Action) -> Effect<Action, Never> {
    switch action {
    case .dismissGame:
      state.gameFeature = nil
      return .none
    case .gameFeature:
      return .none
    case .openButtonTapped:
      state.gameFeature = .init()
      return .none
    }
  }
}
public struct HomeView: View {
  var store: StoreOf<HomeFeature>

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

  public var body: some View {
    // Note we are being specific about what to observe here:
    WithViewStore(self.store, observe: \.gameFeature) { viewStore in
      Button {
        viewStore.send(.openButtonTapped)
      } label: {
        Text("Open child view")
      }
      .fullScreenCover(
        isPresented: viewStore.binding(get: { $0 != nil }, send: { _ in .dismissGame })
      ) {
        IfLetStore(
          self.store.scope(
            state: { $0.gameFeature },
            action: HomeFeature.Action.gameFeature
          )
        ) { childStore in
          GameView(store: childStore)
        }
      }
    }
  }
}
public struct GameFeature: ReducerProtocol {
  public init() {}
  public struct State: Equatable {}
  public enum Action: Equatable {}
  public var body: some ReducerProtocol<State, Action> {
    Reduce(self.core)
  }
  func core(state: inout State, action: Action) -> Effect<Action, Never> {}
}

struct GameView: View {
  @Environment(\.dismiss) var dismss
  let store: StoreOf<GameFeature>
  var body: some View {
    VStack {
      Text("Game")
      Button {
        self.dismss()
      } label: {
        Text("Close")
      }
    }
  }
}

[jjjeeerrr222]

Thanks for clarifying @mbrandonw!