アクション作成者が呼び出されましたが、アクションがディスパッチされません

Question

私は、redux-form onSubmitを使用してアクション作成者を呼び出すコンポーネントを持っています。作成者はajax呼び出しを実行しますが、アクションはディスパッチされてストアに保存されません。私は反応生成物と還元体の配線に何かを混乱させる必要があります。私はGoogleで見つけたものすべてを読んだが、それでも問題が見つからない。何か案は？ （私はリクエストの約束を処理するためのReduxの-約束が含まれているが、それはそこまでそれを作ることはありません）

import React from 'react'; 
import { Field, reduxForm } from 'redux-form'; 
import validate from '../utils/add_person_validation'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import { addPersonResponseAction } from '../actions/index'; 
import renderField from '../components/render_input_field'; 

// call the action creator - this part succeeds 
const doSubmit = function(values) { 
    addPersonResponseAction(values); 
}; 


let AddPersonContainer = (props) => { 
    const { 
    handleSubmit, 
    pristine, 
    reset, 
    submitting 
    } = props; 


    return (
    <div className="row"> 
     <form onSubmit={handleSubmit(doSubmit)} > 
      <div className="col-sm-6"> 
       <fieldset> 
       <legend>Person Info</legend> 
       <div className="form-group"> 
        <Field name="personFirstName" component={renderField} type="text" label="First Name" className="form-control" /> 
        <Field name="personLastName" component={renderField} type="text" label="Last Name" className="form-control" /> 
        <Field name="birthday" component={renderField} type="date" label="Birthday" className="form-control" /> 
        <Field name="group" component={renderField} type="text" label="Group" className="form-control" /> 
       </div> 
       </fieldset> 
      </div> 
      <div className="form-buttons-container"> 
      <button className="btn btn-default form-button" type="submit" disabled={pristine || submitting}>Submit</button> 
      <button className="btn btn-default form-button" type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button> 
      </div> 
     </form> 
    </div> 
); 
}; 


const mapStateToProps = function({ addPersonResponse }) { 
    return { addPersonResponse }; 
}; 

const mapDispatchToProps = function(dispatch) { 
    return bindActionCreators({addPersonResponseAction}, dispatch); 
}; 

const form = reduxForm({ form: 'addPerson', validate: validate }); 

AddPersonContainer = connect(mapStateToProps, mapDispatchToProps)(form(AddPersonContainer)); 

export default AddPersonContainer; 

/******************************************** 
* Action creator 
**********************************************/ 

import axios from 'axios'; 

export const ADD_PERSON_RESPONSE = 'ADD_PERSON_RESPONSE'; 

export const addPersonResponseAction = (data) => { 

    const postURL = 'http://some-url/addperson'; 
    const request = axios.post(postURL, { data }); 

    return { 
    type: ADD_PERSON_RESPONSE, 
    payload: request 
    }; 

}; 

Answer 1

ReduxのはmapDispatchToPropsを使用して、アクションをラップ - しかし、あなたは、インポートの方法を使用して、開封されたバージョンを呼び出しています。

// call the action creator - this part succeeds 
const doSubmit = function(values) { 
    addPersonResponseAction(values); <------ Redux does not know anything about this 
}; 

試してみてください。

let AddPersonContainer = (props) => { 
    const { 
    handleSubmit, 
    pristine, 
    reset, 
    submitting 
    } = props; 

    const doSubmit = function(values) { 
    props.addPersonResponseAction(values); <----- Try this 
    } 

    return (
    <div className="row"> 
     <form onSubmit={handleSubmit(doSubmit)} > 
      <div className="col-sm-6"> 
       <fieldset> 
       <legend>Person Info</legend> 
       <div className="form-group"> 
        <Field name="personFirstName" component={renderField} type="text" label="First Name" className="form-control" /> 
        <Field name="personLastName" component={renderField} type="text" label="Last Name" className="form-control" /> 
        <Field name="birthday" component={renderField} type="date" label="Birthday" className="form-control" /> 
        <Field name="group" component={renderField} type="text" label="Group" className="form-control" /> 
       </div> 
       </fieldset> 
      </div> 
      <div className="form-buttons-container"> 
      <button className="btn btn-default form-button" type="submit" disabled={pristine || submitting}>Submit</button> 
      <button className="btn btn-default form-button" type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button> 
      </div> 
     </form> 
    </div> 
); 
}; 

あなたが小道具へのアクセス権を持っていない定義されている機能は、これはねじれのビットを与えるので、そのコンポーネント定義にそれをリファクタリングしてみてください。

これは、関数をインポートする必要があるので、mapDispatchToPropsがそれをラップできるので、混乱の原因です...実際のアクションはpropsであり、関数自体ではないことを忘れてしまう誘惑があります。実際のアクション関数で結果を確認していると確信していますが、reduxはdispatchにラップされていないため、わかりません。