无论有无连接，动作都不会使用 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;
}

和相关的减速器：

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

我想通了！问题是 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);

更新动作创建者：

export const UPDATE_AUTH_TOKEN = "UPDATE_AUTH_TOKEN";

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

和"updated"减速器：

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 的一个不同实例）绑定到操作创建者，而不是将 updateAuthToken 函数绑定到分派。这导致表单提交、分派操作和所有相关操作都成功完成。我希望这可以帮助任何使用 redux-form 的人！

无论有无连接，动作都不会使用 Redux-Form 进行调度

Action won't dispatch with Redux-Form with or without connect

javascript

reactjs

react-redux

react-redux-form