ReactNative - получить значения из redux-формы
Я использую ReactNative + redux + redux-form.
На моем экране login.js у меня есть следующее:
function bindAction(dispatch) {
return {
actions: bindActionCreators(loginActions, dispatch)
};
}
function mapStateToProps(state) {
return state.loginReducer
}
export default connect(mapStateToProps, bindAction)(reduxForm({
form: "login",
initialValues: {
email: "[email protected]",
password: "123123"
}
})(LoginForm));
И моя форма:
<Field
name = "email"
component = {this.renderInput}
type = "email"
validate = {[email, required]}
/>
<Field
name = "password"
component = {this.renderInput}
type = "password"
validate = {[minLength6, maxLength15, required]}
/>
Я хочу вызвать функцию login() со значениями моих полей.
Я старался :
login() {
if (this.props.valid) {
this.props.actions.loginUser(selector(this.state, 'email', 'password'));
}
}
С участием :
const selector = formValueSelector("login")
У меня нет ошибок, но в функции login() мои поля всегда пустые.
Если честно, я прочитал документ, но не уверен, как правильно использовать redux-form. Мне нужно использовать что-то еще, чтобы получить значение поля? Спасибо.
** РЕДАКТИРОВАТЬ **
Что касается некоторых примеров, сейчас я использую этот код:
<Button
style = {styles.loginBtn}
disabled = {this.props.loading}
onPress = {handleSubmit(this.login)}
>
...
</Button>
И теперь я могу получить доступ к данным формы в своей функции:
login(data) {
if (this.props.valid) {
this.props.actions.loginUser({
username: data.email,
password: data.password
});
....
Я не знаю, правильный ли это способ, в react-native я не нашел ни одного примера с использованием элементов <form>, но он работает.
Я обновлю свой вопрос
Ответы 1
В сокращенной форме вы можете либо использовать функцию handleSubmit для передачи значений вашему обработчику форма действительна, либо использовать formValueSelector, чтобы получить значения формы
handleSubmit
<Button
style = {styles.loginBtn}
disabled = {loading || !valid || pristine}
onPress = {handleSubmit(this.login)}
>
...
</Button>
login(data) {
this.props.actions.loginUser({
username: data.email,
password: data.password
});
}
formValueSelector
const LoginForm = reduxForm({ // <== const Form Handler
form: 'login', // <== Your Redux Form name
initialValues: {
email: "[email protected]",
password: "123123"
}
})(Login); // <== Bind your Class Name here
const selector = formValueSelector('login') // <== Redux Form Name
const mapStateToProps = (state) => ({
email: selector(state, 'email'),
password: selector(state, 'password'),
});
export default connect(mapStateToProps)(LoginForm); // <== Bind the const Form Handler
а затем получить доступ к нему в реквизитах через const {email, password} = this.props
Спасибо, вот почему я видел в документе, но как совместить это с редуктором? У меня есть редуктор (loginReducer), и я не знаю, как комбинировать в функции mapStateToProps
Если ваш loginReducer содержит поля как email и password, вы можете вернуть объединенные поля внутри mapStateToProps как const {email , password} = selector(state, 'email', 'password') и вернуть его как loginReducer: {...state.loginReducer, email, password}.
Вызывается ли функция входа в систему при отправке формы?