React Native: Redux - How to properly update TextInput through an event and update reduction state?

I am using Redux + React Native.

Installed my action:

export function updateUsername(eventValue) {
  return {
    type: UPDATE_USERNAME,
    username: eventValue
  }
}

export function updatePassword(eventValue) {
  return {
    type: UPDATE_PASSWORD,
    password: eventValue
  }
}

And my gearbox is like:

//reason for leaving userInfo empty is so it doesn't interfere with TextInput placeholder

const initialState = {
  userInfo:{
  }
}

function inputReducer(state = initialState, action) {
  switch(action.type) {

    case UPDATE_USERNAME:
      return {
        ...state,
        username: action.username
      }

    case UPDATE_PASSWORD:
      return {
        ...state,
        password: action.password
      }

   default:
     return state

  }
}

And the parent component displays the element <CustomInput/>:

//userInfo is the object from the inputReducer

  <CustomInput
    placeholder='Username'
    userProp={userInfo.username}
    actions={this.props.actions}
  />

  <CustomInput
    placeholder='Password'
    userProp={userInfo.password}
    actions={this.props.actions}
  />

And <InputNormal/>makes the call:

  _chooseInput(event){
    switch(this.props.placeholder){
      case "Username":
        this.props.actions.updateUsername(event.target.value)
        break
      case "Password":
        this.props.actions.updatePassword(event.target.value)
        break
      default:
        break
    }
  }

  render() {
    var pr = this.props;

    return (
      <TextInput
        style={{fontWeight: 'bold', height: 20.5, color: '#999999'}}
        palceholderStyle={{fontWeight: 'bold'}}
        placeholderTextColor='#999999'
        placeholder={pr.placeholder}
        onChange={this._chooseInput.bind(this)}
        value={pr.userProp}
      />
    );
  }

And as soon as the text is entered, it is updated as undefined. When I entered the test string testinstead event.target.value, the state of user information will be correctly updated.

The following is the log (with username: undefinedas shown):

enter image description here

Logic seems to make sense, but why is it updated like undefined? Am I missing something?

Thank you in advance!

+4

Source: https://habr.com/ru/post/1650970/


All Articles