redux-form handleフォームデータを送信していません

Question

handleSubmit()はフォームデータを送信していません。私はredux-formを正しく配線していると信じていますが、フィールドの設定オブジェクトは何らかの理由でundefinedです。

LoginComponent.js

import { reduxForm } from 'redux-form'; 

import '../others/styles.css'; 

const FIELDS = { 
    username: { 
    type: 'input', 
    label: 'Enter username' 
    }, 
    password: { 
    type: 'input', 
    label: 'Enter password' 
    } 
}; 

const Login = (props) => { 
    console.log('--------- props: ', props); 

    const { fields: { username, password }, handleSubmit, setUsernameAndPassword } = props; 

    console.log('-------- username: ', username); // PROBLEM: Returns undefined when it should return the config object for this field 
    return (
    <div> 
     <Form onSubmit={ handleSubmit(setUsernameAndPassword.bind(this)) } id='login'> 
     <Form.Field> 
      <label>Username</label> 
      <input {...username} 
      name='username' /> 
     </Form.Field> 

.... 

Login.propTypes = { 
    handleSubmit: React.PropTypes.func, 
    fields: React.PropTypes.array, 
    setUsernameAndPassword: React.PropTypes.func 
}; 

export default reduxForm({ 
    form: 'LoginForm', 
    fields: Object.keys(FIELDS) 
})(Login); 

LoginContainer.js

import { connect } from 'react-redux'; 
import { graphql } from 'react-apollo'; 

import Login from '../components/LoginComponent'; 
import LoginMutation from '../graphql/LoginMutation.gql'; 
import { types as typesAuth } from '../reducers/auth'; 

const gqlLogin = graphql(LoginMutation, { 
    props: ({mutate}) => ({ 
    login: async function loginWithUsernameOrEmail(variables) { 
     try { 
     const result = await mutate({variables}); 
     } catch (err) { 
     console.log('GQL Error: ', err); 
     } 
    } 
    }) 
})(Login); 

export default connect(
    state => ({ 
    isLoggedIn: state.auth.isLoggedIn 
    }), 
    dispatch => ({ 
    setUsernameAndPassword: (data) => { // PROBLEM: Why is data empty?? 
     console.log('--------- data: ', data); 
     dispatch({ 
     type: typesAuth.SET_USERNAME_PASSWORD, 
     payload: { 
      username: data.username, 
      password: data.password 
     } 
     }); 
    } 
    }), 
)(gqlLogin); 

減速/ index.js

import { reducer as auth } from './auth'; 
import { reducer as formReducer } from 'redux-form'; 

export default { 
    auth, 
    form: formReducer 
}; 

reducers.js

// Modules 
import appReducers from '../modules/root/reducers/'; 
import authReducers from '../modules/auth/reducers/'; 

module.exports = { 
    ...appReducers, 
    ...authReducers 
}; 

redux.jsあなたはReduxのストア（see docs）への個々の入力を結びつけるためにredux-formからFieldコンポーネントを使用する必要が

// Imports 
import { createStore, combineReducers, applyMiddleware, compose } from 'redux'; 

// Reducers 
import Client from './client'; 
import reducers from './reducers'; 

const devtools = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 

module.exports = createStore(
    combineReducers({ 
    ...reducers, 
    apollo: Client.reducer() 
    }), 
    compose(
    applyMiddleware(Client.middleware()), devtools() 
), 
); 

auth.js

// Constants 
export const types = Object.freeze({ 
    SET_USERNAME_PASSWORD: 'AUTH/SET_USERNAME_PASSWORD' 
}); 

// Default State 
const DEF_STATE = { 
    isLoggedIn: false, 
    username: null, 
    password: null 
}; 

export const reducer = (state = DEF_STATE, action) => { 
    let newState; 
    switch (action.type) { 
    ... 
    case types.SET_USERNAME_PASSWORD: 
     newState = { 
      ...state, 
      username: action.payload.username, 
      password: action.payload.password 
     }; 
     break; 
    default: 
     newState = state; 
    } 
    return newState; 
}; 

Answer 1

。 redux-formドキュメントで

The "Simple Form" Exampleは単にredux-formからFieldコンポーネントをインポートし、入力を記述するためにそれを使用し、これを行う方法の良いデモです。あなたの場合は、次のようなものになります：

import { reduxForm, Field } from 'redux-form'; 

const Login = (props) => { 
    console.log('--------- props: ', props); 

    const { handleSubmit, isLoggingIn, setUsernameAndPassword } = props; 

    return (
    <div> 
     <Form onSubmit={ handleSubmit(setUsernameAndPassword.bind(this)) } id='login'> 
     <Form.Field> 
      <label>{i18n.t('auth.username')}</label> 
      <Field 
      component="input" 
      name="username" 
      placeholder={i18n.t('utils.and',{item1: i18n.t('auth.username'), item2: i18n.t('auth.email')})} 
      /> 
     </Form.Field> 

.... 

これは役に立ちます。