ReduxとReact Nativeを使用してアクション作成者に値を渡す

Question

reduxFormフィールドの値をログインactionCreatorに送信して、そこからの認証のためのディスパッチを生成する方法を教えてください。ここまで私がこれまで持っていたことがあります。基本的に私は、ログインアクションの作成者が「フォーム」私はonSubmit検証がそれに渡された関数に値を渡すことがわかっReduxの形式のドキュメントから

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

からの値で呼ばれるようにしたい、提出。このフォームの場合、渡される値はJSONオブジェクトです。私のアクションクリエイターに値を渡すための解決策は以下の通りです。

mapDispatchToProps関数の入力として変数を持つ関数を公開：コンポーネントに続い

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

：

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

これは役立ちます。