Создатель действия вызывается, но действие не отправляется

У меня есть компонент, который успешно использует избыточную форму onSubmit для вызова создателя действия. Создатель выполняет вызов ajax, но действие никогда не отправляется, чтобы сохранить его в хранилище. Должно быть, я что-то напутал в проводке react-redux и redux-form, возможно, в привязке создателя действия. Я прочитал все, что нашел в 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
  };

};

person brandonlehr    schedule 27.09.2016    source источник


Ответы (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> 
  );
};

Поскольку функция, которую вы определяете, не имеет доступа к свойствам, это создает некоторую путаницу, поэтому попробуйте реорганизовать ее в определение компонента.

Это источник путаницы, потому что необходимо импортировать функцию, чтобы mapDispatchToProps мог ее обернуть... но есть соблазн забыть, что реальное действие находится в props, а не в самой функции. Поэтому я уверен, что вы видите результаты в фактической функции действия, но редукс не знает, потому что он не обернут в dispatch.

person erik-sn    schedule 27.09.2016
comment
Спасибо! Я знал, что просто что-то упускаю из виду! Теперь работает отлично. - person brandonlehr; 28.09.2016
comment
Чтобы добавить к этому, убедитесь, что вы объединили свой редуктор с корневым редуктором. - person tomhughes; 15.05.2018
comment
Спасибо. Я собирался пробить дырку в своем ноутбуке. - person assiegee; 23.04.2020