Hi I am struggle with systemkeyboard dismiss when state change and rebuild view.

[Jaeki-Lee]

Hi, I appreciate for reading my post.

I have stuck at a problem. First of all I am making a app with SwiftUI.
Let's say I have A and B view.
I open B View from A View with Sheet. The B view has Textfield and when type something on it.
State change and rebuild UI from A to B. in a while when open sheet again systemkeyboard is dismiss and view is go down as much as keyboard height.

Therefore, I have a question there is a way not to rebuild View when a specific state value change or specific action send.
Thank you for reading and share your idea!

Cheers!

[Jaeki-Lee]

Furthermore, The A Reducer is scope B Reducer. When I open Sheet of B View init with scoped B Store.
However, A State is changed and it rebuild all Views from A to B which is I don't want.
If someone know how to cut off rebuilding whole views even change the parent view.

[Jaeki-Lee]

Simply, what I want is child TCAs can use parent action, but render view independently.
Each child view build their view independently even the parent TCA state changed.

[mbrandonw]

Hi @Jaeki-Lee, it is not clear to me what you are asking for. Can you share a small project that demonstrates the problem you are having?

[Jaeki-Lee]

I appreciate takeing time for me @mbrandonw
My mother language is not English, so if my description is weird please let me know

struct AView: View {
 
  let store: StoreOf<AReducer>
  
    var body: some View {
      WithViewStore(store, observe: { $0 }) { viewStore in
        VStack {
          Text("User name: \(viewStore.userModel.userName)")
            .padding()
          
          Text("User info: \(viewStore.userModel.userInfo)")
            .padding()
          
          Button("Edit User information") {
            viewStore.send(.toggleBottomSheetOpen(true))
          }
        }
        .sheet(
          isPresented: Binding(
            get: { viewStore.state.isBottomSheetOpen },
            set: { viewStore.send(.toggleBottomSheetOpen($0)) }
          )
        ) {
          BView(
            store: store.scope(state: \.bState,
                               action: AReducer.Action.bAction)
          )
          .presentationDetents([.height(500)])
        }
      }
    }
}

public struct AReducer: ReducerProtocol {
  public struct State: Equatable {
    public init() {}
    
    var userModel: UserModel = .init(userName: "", userInfo: "")
    
    var bState: BReducer.State = .init()
    
    var isBottomSheetOpen: Bool = false
  }
  
  public enum Action: Equatable {
    case bAction(BReducer.Action)
    case toggleBottomSheetOpen(Bool)
  }
  
  public var body: some ReducerProtocol<State, Action> {
    Scope(state: \.bState,
          action: /Action.bAction) {
      BReducer()
    }
    
    Reduce { state, action in
      switch action {
      
      case let .toggleBottomSheetOpen(isOpen):
        state.isBottomSheetOpen = isOpen
        return .none
        
      case let .bAction(.updateUserModel(userModel)):
        state.userModel = userModel
        state.isBottomSheetOpen = false
        return .none
        
      default: return .none
      }
    }
  }
  
}

struct BView: View {
  
  let store: StoreOf<BReducer>
  
  init(store: StoreOf<BReducer>) {
    self.store = store
  }
  
  var body: some View {
    WithViewStore(store, observe: { $0 }) { viewStore in
      VStack {
        TextField("",
                  text:
        .init(get: {
          viewStore.userName
        }, set: { userName in
          viewStore.send(.binding(.set(\.$userName, userName)))
        }),
         prompt: Text("Please type user name")
        )
        .padding()
        
        TextField("",
                  text:
        .init(get: {
          viewStore.userInfo
        }, set: { userInfo in
          viewStore.send(.binding(.set(\.$userInfo, userInfo)))
        }),
          prompt: Text("Please type user infomation")
        )
        .padding()
        
        Button("Enter User info") {
          viewStore.send(
            .updateUserModel(
              UserModel(
                userName: viewStore.userName,
                userInfo: viewStore.userInfo
              )
            )
          )
          
        }
        .disabled(!viewStore.readyToEdit)
      }
    }
  }
}

public struct BReducer: ReducerProtocol {
  
  public struct State: Equatable {
    public init() {}
    
    @BindingState
    var userName: String = ""
    
    @BindingState
    var userInfo: String = ""
    
    @BindingState
    var readyToEdit: Bool = false
  }
  
  public enum Action: BindableAction, Equatable {
   case binding(BindingAction<BReducer.State>)
   case updateUserModel(UserModel)
  }
  
  public var body: some ReducerProtocol<State, Action> {
    BindingReducer()
    Reduce { state, action in
      switch action {
      case .binding(\.$userName):
        if !state.userName.isEmpty && !state.userInfo.isEmpty {
          state.readyToEdit = true
        } else {
          state.readyToEdit = false
        }
        return .none
      
      case .binding(\.$userInfo):
        if !state.userName.isEmpty && !state.userInfo.isEmpty {
          state.readyToEdit = true
        } else {
          state.readyToEdit = false
        }
        return .none
        
      default: return .none
      }
    }
  }
  
}

It is very similar code with the problem code.
When I open B View with sheet and type something on textfield, Keyboard pop-up.
Next when I start type on textfield suddenly overlay effect are removed and if I dismiss the keyboard the bottomSheet height are go down as much as keyboard height. It was triggered the code that sheet open B View again after state changed.
However, somewhat this mini project perfectly work... I am very shame.. :(

If you don't mind I have one more question. Is it not spend too much resource when one state change and whole scoped views are re-render?

I appreciate for your help.

[mbrandonw]

Hi @Jaeki-Lee, unfortunately this code does not compile because you did not provide the UserModel. Can you show how it is defined?

[mbrandonw]

But, I will say that currently your views are sub-optimal because you are observing all of state:

WithViewStore(store, observe: { $0 }) { viewStore in
  …
}

Please read this article to see why that is not a good idea and what can be done about it.