Question

我学习反应和减少，这本身就很好，但在涉及还原形式时我遇到了障碍。

我有以下表格：

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操作创建者，但永远不会调度该操作。我尝试使用connect，没有连接，使用明确定义的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);

更新了动作创建者：

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

正如您所看到的，除了删除一堆日志记录代码之外，没有太多变化。解决方案的核心位于组件的最后一行。我不得不将updateAuthToken函数绑定到dispatch，而是必须将我的表单的onSubmit函数（updateAuthToken的另一个实例）绑定到动作创建者。这导致表单提交，调度操作，并且全部成功完成。我希望这可以帮助任何使用redux-form的人！

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

1 个答案: