Javascript 行动赢得'；t使用Redux表单进行调度，无论是否连接

我正在学习react和redux，它们本身是很好的，但在redux形式上我遇到了障碍

我有以下表格：

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';
import { updateAuthToken } from '../actions/index';

class FormAuthUpdate extends Component {
  render() {
    const { handleSubmit } = this.props;

    return(
      <form onSubmit={handleSubmit} className="form-inline">
        <div className="form-group">
          <label htmlFor="authToken">New Auth Token </label>
          <Field component="input" type="text" name="authToken" className="form-control" />
        </div>
        <button className="btn btn-primary" type="submit">Set</button>
      </form>
    );
  };
}

FormAuthUpdate = reduxForm({ form: 'AuthUpdateForm', onSubmit: updateAuthToken })(FormAuthUpdate);
export default connect( undefined, { updateAuthToken })(FormAuthUpdate);

和相关减速器：

import { UPDATE_AUTH_TOKEN } from '../actions/index';

const INITIAL_STATE = { authToken: "" };

export default function(state = INITIAL_STATE, action) {
  console.log("reducer: " + JSON.stringify(action.type));
  switch(action.type) {
    case UPDATE_AUTH_TOKEN:
      console.log("switch");
      return { ...state, authToken: action.payload.authToken };
    default:
      return state;
  }
}

---

通过日志，我能够确定表单是否成功提交，是否调用了updateAuthToken操作创建者，但该操作从未被调度。我已经用connect、unconnect、显式定义的matchDispatchToProps尝试过了，但仍然没有调度。我错过了什么？

我已经明白了！问题是在connect上实现mapDispatchToProps方法

以下是更新的组件：

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';
import { updateAuthToken } from '../actions/index';

class FormAuthUpdate extends Component {
  render() {
    const { handleSubmit, dispatch } = this.props;
    return(
      <form onSubmit={handleSubmit} className="form-inline">
        <div className="form-group">
          <label htmlFor="authToken">New Auth Token </label>
          <Field component="input" type="text" name="authToken" className="form-control" />
        </div>
        <button className="btn btn-primary" type="submit">Set</button>
      </form>
    );
  };
}

FormAuthUpdate = reduxForm({ form: 'AuthUpdateForm', onSubmit: updateAuthToken })(FormAuthUpdate);
export default connect( undefined, { onSubmit: updateAuthToken })(FormAuthUpdate);

以及“更新”的减速器：

---

正如您所看到的，除了删除一堆日志代码之外，并没有什么变化。溶液的肉在组件的最后一行。我没有将updateAuthToken函数绑定到dispatch，而是将表单的onSubmit函数（updateAuthToken的另一个实例）绑定到动作创建者。这导致表单提交、分派操作和全面成功完成。我希望这能帮助任何使用redux表单的人

我已经弄明白了！问题是在connect上实现mapDispatchToProps方法

以下是更新的组件：

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';
import { updateAuthToken } from '../actions/index';

class FormAuthUpdate extends Component {
  render() {
    const { handleSubmit, dispatch } = this.props;
    return(
      <form onSubmit={handleSubmit} className="form-inline">
        <div className="form-group">
          <label htmlFor="authToken">New Auth Token </label>
          <Field component="input" type="text" name="authToken" className="form-control" />
        </div>
        <button className="btn btn-primary" type="submit">Set</button>
      </form>
    );
  };
}

FormAuthUpdate = reduxForm({ form: 'AuthUpdateForm', onSubmit: updateAuthToken })(FormAuthUpdate);
export default connect( undefined, { onSubmit: updateAuthToken })(FormAuthUpdate);

以及“更新”的减速器：

---

正如您所看到的，除了删除一堆日志代码之外，并没有什么变化。溶液的肉在组件的最后一行。我没有将updateAuthToken函数绑定到dispatch，而是将表单的onSubmit函数（updateAuthToken的另一个实例）绑定到动作创建者。这导致表单提交、分派操作和全面成功完成。我希望这能帮助任何使用redux表单的人

MapStateToProps将dispatch作为一个道具传递，您可能会错过直接发送动作创建者的调用或使用bindActionCreators。我还以为connect应该在react redux中进行绑定，因此，抽象出bindActionCreators.MapStateToProps将dispatch作为一个道具传递给您，您可能会错过直接分派动作创建者的调用或使用bindActionCreators。我认为connect应该在react redux中进行绑定，从而抽象出bindActionCreators。

export const UPDATE_AUTH_TOKEN = "UPDATE_AUTH_TOKEN";

export function updateAuthToken(props) {
  return {
    type: UPDATE_AUTH_TOKEN,
    payload: props.authToken
  }
}

import { UPDATE_AUTH_TOKEN } from '../actions/index';

const INITIAL_STATE = { authToken: "" };

export default function(state = INITIAL_STATE, action) {
  switch(action.type) {
    case UPDATE_AUTH_TOKEN:
      return { ...state, authToken: action.payload };
    default:
      return state;
  }
}