使用 Redux 和 React Native 将值传递给 action creator

Question

如何将 reduxForm 字段中的值发送到我的登录 actionCreator，以便我可以从那里生成用于身份验证的分派。这是我到目前为止所拥有的。基本上在提交时，我希望使用 "form" 中的值调用登录操作创建者

import React, {Component} from 'react';
import {TouchableHighlight,Alert, AsyncStorage,StyleSheet,Text, TextInput, TouchableOpacity, View} from 'react-native';
import {Actions} from 'react-native-router-flux';
import { Field,reduxForm } from 'redux-form'
import { connect } from 'react-redux'

import { login } from '../../actions/user.js'


// const submit = values => {
//    authenticate()
//    //login(values.email, values.password);
// }

const renderInput = ({ input: { onChange, ...restInput }}) => {
  return <TextInput style={styles.input} onChangeText={onChange} {...restInput} />
}

const Authentication = (props) => {
 const { handleSubmit } = props
 const {login} = props

 const {
    container,
    text,
    button,
    buttonText,
    mainContent
  } = styles
  
    return (
       <View style={styles.container}>
          
         <Text>Email:</Text>
         <Field name="email" component={renderInput} />
         
         <Text>Password:</Text>
         <Field  name="password" component={renderInput} />

      <TouchableOpacity onPress={handleSubmit(login)}>
        <Text style={styles.button}>Submit</Text>
      </TouchableOpacity>


      </View>
    );
  
}


function mapStateToProps (state) {
  return {
    userData: state.userData
  }
}

function mapDispatchToProps (dispatch) {
  return {
    login: () => dispatch(login())
  }
}



Authentication = reduxForm({
  form: 'loginForm'  // a unique identifier for this form
})(Authentication)

// You have to connect() to any reducers that you wish to connect to yourself
const AuthenticationComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(Authentication)

export default AuthenticationComponent

Answer 1

从 redux-form 文档中我发现 onSubmit 将一个值传递给传递给它的函数。在这种形式的情况下，传递的值是一个 JSON 对象。将值传递给我的动作创建者的解决方案如下。

在 mapDispatchToProps 函数中公开带有变量作为输入的函数：

function mapDispatchToProps (dispatch) {
  return {
    login: (val) => dispatch(login(val))
  }
}

然后在组件中：

<TouchableOpacity onPress={handleSubmit(login)}>
        <Text style={styles.button}>Submit</Text>
      </TouchableOpacity>

希望对您有所帮助。

使用 Redux 和 React Native 将值传递给 action creator

Passing values to action creator using Redux and React Native

reactjs

react-native

redux

redux-form