调用动作创建者但未分派动作

Question

我有一个组件成功地使用 redux-form onSubmit 来调用 action creator。创建者执行了 ajax 调用，但从未调度该操作以将其保存到商店。我一定是在 react-redux 和 redux-form 的连接中搞砸了，可能是在 action creator 的绑定中。我已经阅读了我在 Google 上找到的所有内容，但仍然找不到问题所在。有任何想法吗？（我已经包含了 redux-promise 来处理请求承诺，但它从来没有做到那么远）

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> 
  );
};

因为您正在定义的函数无法访问 props，所以这会带来一些麻烦，因此请尝试将其重构到组件定义中。

这是一个混乱的根源，因为它需要导入函数，所以 mapDispatchToProps 可以包装它...但是很容易忘记真正的动作在 props 中，而不是函数本身。所以我确定您在实际操作函数中看到了结果，但 redux 不知道，因为它没有包装在 dispatch.

中

调用动作创建者但未分派动作

Action creator is called but action is not dispatched

redux

redux-form

react-redux