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:
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/>:
<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):

Logic seems to make sense, but why is it updated like undefined? Am I missing something?
Thank you in advance!
Jo ko