動作創建者被調用，但行動沒有調度

Question

我有一個組件成功地使用了redux-form onSubmit來調用動作創建者。創建者執行ajax調用，但該操作從未被調度以將其保存到商店。我必須把一些東西搞亂，比如反應還原和還原形式，可能在動作創造者的約束下。我已閱讀了我在Google上找到的所有內容，但仍無法找到問題所在。有任何想法嗎？ （我已經包括終極版，承諾處理請求的承諾，但它永遠不會讓那麼遠）

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

終極版使用行動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，而不是功能本身。所以我相信你在實際的動作函數中看到了結果，但是REDX並不知道，因爲它沒有包含在dispatch中。