Ly Maneug Ly Maneug - 2 months ago 7
React JSX Question

React Native + Redux: How to properly pass in props to action callers?

I have the following set up, with all the methods with .bind(this) in the constructor. So the user enters in username and password in the inputs and get updated in state, and the component gets re-rerendered and newly updated state

this.props.username
and
this.props.password
get passed down. I would then want to pass them into an action creator called
this.props.registerUser()
once Register button is clicked.

So I was wondering, what's the right practice to pass in the newly updated props to an action creator?

For example

Is it
_handleRegister(this.props.username, this.props.password)
then
this.props.registerUser(this.props.username, this.props.password)
? Or simply
this.props.registerUser(this.props.username, this.props.password)
? Or a combination of
this._handleRegister(this.props.username, this.props.password)
and former?

_handleRegister() {
this.props.registerUser()
}

render() {

return (
<View>
<TextInput
placeholder={'Username'}
onChangeText={...}
value={this.props.username}
/>
<TextInput
placeholder={'Password'}
onChangeText={...}
value={this.props.password}
/>
<TouchableHighlight onPress={this._handleRegister}>
<Text>Register</Text>
</TouchableHighlight>
</View>
)
}
}


Thank you

Answer

You don't need to pass prameters to _handleRegister

_handleRegister() {
    const { username, password, registerUser } = this.props;
    registerUser(username, password);
}

Additional tip: you can skip return keyword by doing:

render() (
  <View>
     ...
  </View>
)
Comments