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

Question

我有一个组件成功使用 redux-form onSubmit 来调用动作创建者。创建者执行一个 ajax 调用，但该操作从未分派以将其保存到商店。我必须在 react-redux 和 redux-form 的接线中出现问题，可能在动作创建者的绑定中。我已经阅读了在 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 中，而不是函数本身。所以我确定你在实际的action函数中看到了结果，但是redux不知道，因为它没有包裹在dispatch中。