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，而不是函数本身。所以我确定你在实际的动作函数中看到了结果，但是redux不知道因为它没有包含在dispatch中。

调用操作创建者但不调度操作

1 个答案: