调用操作创建器，但不分派操作

Question

我有一个组件，它成功地使用redux-form onSubmit调用操作创建器。创建者执行一个ajax调用，但从未将该操作分派到存储中。我一定是在react-redux和redux-form的连接中搞砸了什么，可能是在操作创建器的绑定中。我已经阅读了我在谷歌上找到的所有东西，仍然找不到问题。什么好主意吗?(我已经包含了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中。