javascript - 无论有或没有连接，操作都不会通过 Redux-Form 进行调度

Question

我正在学习 React 和 Redux，它们本身很好，但在 Redux-form 方面我遇到了障碍。

我有以下表格:

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);

执行以下操作:

export const UPDATE_AUTH_TOKEN = "UPDATE_AUTH_TOKEN";

export function updateAuthToken(props) {
  const test = {
    type: UPDATE_AUTH_TOKEN,
    payload: props.authToken
  }

  console.log("action: " + JSON.stringify(test));

  return test;
}

以及相关 reducer :

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 操作创建者，但该操作从未调度。我已经尝试过使用连接、不使用连接、使用显式定义的 matchDispatchToProps，但仍然没有调度。我错过了什么？

Answer 1

我已经明白了!问题在于 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);

更新了 Action 创建器:

export const UPDATE_AUTH_TOKEN = "UPDATE_AUTH_TOKEN";

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

以及“更新的” reducer :

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;
  }
}

如您所见，除了删除一堆日志记录代码之外，没有发生太大变化。解决方案的核心位于组件的最后一行。我必须将表单的 onSubmit 函数(updateAuthToken 的不同实例)绑定(bind)到操作创建者，而不是将 updateAuthToken 函数绑定(bind)到调度。这导致表单提交、调度操作以及所有周围的操作成功完成。我希望这可以帮助任何使用 redux-form 的人!