TextField Not Updating, Please help removing boilerplate

[Senbazuru1075]

Hi, I know this code is wonky. I'm still a beginner. I'd like help removing the boilerplate and actually getting the textfield to update. I considered doing shared computation, but I didn't know what to put there and had trouble access state because it captures a mutable inout parameter or something.

This code is reproducible. I use a neuromorphic style for my app so there are a fair amount of modifiers broken down in my utilities file. Using a normal textfield and vanilla swiftui updates the text in the textfield.

I know there is more to do with password stuff like using regex functions or something and also using apples security packages.

I'm just looking for help to remove boilerplate and take these two files to the next level if that's possible.

@MainActor
struct Signup: ReducerProtocol {
    struct State: Equatable {
        static func == (lhs: Signup.State, rhs: Signup.State) -> Bool {
            lhs.isLoggedIn == rhs.isLoggedIn
        }
        @AppStorage("isLoggedIn") var isLoggedIn: Bool = false
       @BindingState var userEmail: String = ""
       @BindingState var userPassword: String = ""
        var invalidState: AuthErrors? = nil
        var emailPasswordAlert: Alert? = nil
        var user: User? = nil
    }
    
    enum Action: Equatable {
        case emailTextChanged(String)
        case emailPasswordTextChanged(String)
        case signInWithEmail(email: String, password: String)
        case signInWithGoogle
        case signInWithPhoneNumber
        case attemptReturningLogin
        case createAlert(message: AuthErrors?)
    }
    @Dependency(\.firebaseService) var firebaseService
    
    
    func reduce(into state: inout State, action: Action) -> EffectTask<Action> {
        switch action {
        case .emailTextChanged(email: let email):
            state.userEmail = email
            return .none
        case .emailPasswordTextChanged(password: let password):
            state.userPassword = password
            return .none
        case .signInWithEmail(email: let email, password: let password):
            guard !email.isEmpty && !password.isEmpty else {
                state.invalidState = .emptyPasswordEmailField
                if let error = state.invalidState {
                    return self.computeLogin(state: &state)
                } else {
                    state.invalidState = .unknownInvalidState
                    return self.computeLogin(state: &state)
                }
            }
            var result: AuthDataResultModel? = nil
            Task {
                do {
                    result = try await firebaseService.createNewAccount(with: email, password: password)
                    
                } catch let error {
                    throw error
                }
            }
            if let result {
                state.user = User(uid: result.uid, email: result.email, image: nil, bio: nil, phoneNumber: nil)
            } else {
                state.invalidState = .couldNotLoadUserIntoMemory
                return self.computeLogin(state: &state)
            }
            return .none
        case .signInWithGoogle:
            return .none
        case .signInWithPhoneNumber:
            return .none
        case .attemptReturningLogin:
            return .none
        case .createAlert(message: let message):
            if message == .unknownInvalidState {
                fatalError("We're not sure what this is. We'll fix the problem soon")
            }
            state.emailPasswordAlert = Alert(title: Text("Error Signing up. Please Read Message"), message: Text(message?.rawValue ?? "Unable to load message"), dismissButton: .cancel())
            return self.computeLogin(state: &state)
        }
    }
    func computeLogin(state: inout State) -> EffectTask<Action> {
        
        return .run { send in
            
        }
    }
}

struct SignupView: View {
    var signupStore: StoreOf<Signup>
  
    @Environment var isDarkMode: ColorScheme
    var body: some View {
        WithViewStore(self.signupStore, observe: { $0 }) { viewStore in
            VStack(spacing: 0) {
                Image(systemName: "banknote.fill")
                    .resizable()
                    .scaledToFit()
                    .foregroundColor(Color("moneycolor"))
                    .padding()
                    .frame(width: 75, height: 75, alignment: .center)
                    .withNeuromorphicCircularModifier(isDarkMode: isDarkMode)
                    .padding(.vertical)
                
                
                VStack(alignment: .leading, spacing: 0) {
                    
                    TextField("Enter Your Email", text: viewStore.binding(get: \.userEmail, send: Signup.Action.emailTextChanged))
                        .frame(height: 45)
                        .withNeuromorphicTextFieldModifier()
                        .padding(.horizontal)
                    SecureField("Enter Your Password", text: viewStore.binding(get: \.userPassword, send: Signup.Action.emailPasswordTextChanged))
                        .frame(height: 45)
                        .withNeuromorphicTextFieldModifier()
                        .padding(.horizontal)
                    Button {
                        viewStore.send(.signInWithEmail(email: viewStore.userEmail, password: viewStore.userPassword ))
                    } label: {
                        Text("Create New Account")
                            .padding()
                            .padding()
                    }
                    .buttonStyle(NeuroMorphicButtonStyle(isDarkMode: isDarkMode))
                }
                .padding(.bottom)
                
                HStack {
                    Button {
                        //Enter phone signup
                    } label: {
                        Image(systemName: "phone.fill")
                            .resizable()
                            .scaledToFit()
                            .foregroundColor(Color("moneycolor"))
                            .padding()
                            .frame(width: 50, height: 50, alignment: .center)
                        
                    }
                    .frame(width: 75, height: 75, alignment: .center)
                    .buttonStyle(CircularButtonNeuroMorphicStyle(isDarkMode: isDarkMode))
                    .padding(.horizontal)
                    Button {
                        //Enter Anonymous Sign In
                    } label: {
                        Image(systemName: "eyes")
                            .resizable()
                            .scaledToFit()
                            .foregroundColor(Color("moneycolor"))
                            .padding()
                            .frame(width: 50, height: 50, alignment: .center)
                        
                    }
                    .frame(width: 75, height: 75, alignment: .center)
                    .buttonStyle(CircularButtonNeuroMorphicStyle(isDarkMode: isDarkMode))
                    
                }
                Spacer()
            }
        }
    }
}

struct SignupView_Previews: PreviewProvider {
    static var previews: some View {
        SignupView(signupStore: StoreOf<Signup>(initialState: Signup.State(), reducer: Signup()), isDarkMode: Environment(\.colorScheme))
    }
}

[Senbazuru1075]

I've looked through the binding basics case study. And, I've looked through the Q&A. Please tell me I'm just doing something wrong. In my root view, I only observe screen change. In this view, I only observe like 4 properties.

I tried creating a viewstate to manage it and that didn't help. I tried ObservedObject. That didn't help. Unfortunately, there seems to be something wrong but I can't figure out what. The textfield literally puts in 1 character and then deletes that text. It seems like something is being called multiple times. I tried using removeDuplicates too.

[devyhan]

Hey, @Senbazuru1075 !

When using @BindingState, make sure to add BindingReducer() to ensure that the values are updated properly. Otherwise, the values may not be updated correctly.

// Reducer
public var body: some ReducerProtocol<State, Action> {
  BindingReducer()
  Reduce { state, action in
    // Your reducer logic
    // ...
  }
}

// View
TextField("Enter Your Email", text: viewStore.binding(get: \.$userEmail))

Including BindingReducer() in your reducer chain ensures that the values are correctly updated when using @BindingState.