Redux 表单：使用 axios 使用来自顶部组件的数据填充表单的正确方法

Question

我正在使用 redux 表单（只是想学习）。和 axios 来获取我的 account 数据并将其填充到表单中。

我已经做了一个沙盒：https://codesandbox.io/s/mzlrv1n988

来自示例：https://redux-form.com/7.3.0/examples/initializefromstate/ 一切似乎都清晰明了。但它与实际应用程序无关：我对代码进行了一些重构，并且我为add && edit 操作提供了顶级组件，它们处理服务器数据和表单数据。我有一个表单组件：它的目标是表单 UI && 验证。

如何使用顶级组件中的数据填充我的表单？

我的意思是EditForm组件中的这部分代码：

  getAccount = () =>
    axios.get("https://jsonplaceholder.typicode.com/posts/1").then(Account => {
      loadAccount(Account);
    });

也形成组件：

import React from "react";
import { connect } from "react-redux";
import { Field, reduxForm } from "redux-form";
import { load as loadAccount } from "./account";
const data = {
  // used to populate "account" reducer when "Load" is clicked
  body: "testtest",
  title: "yep!"
};

let AccountForm = props => {
  const { handleSubmit, load, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <button type="button" onClick={() => load(data)}>
          Load Account (example)
        </button>
      </div>
      <div>
        <label>body</label>
        <div>
          <Field name="body" component="input" type="text" placeholder="body" />
        </div>
      </div>
      <div>
        <label>title</label>
        <div>
          <Field
            name="title"
            component="input"
            type="text"
            placeholder="title"
          />
        </div>
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Undo Changes
        </button>
      </div>
    </form>
  );
};

// Decorate with reduxForm(). It will read the initialValues prop provided by connect()
AccountForm = reduxForm({
  form: "initializeFromState" // a unique identifier for this form
})(AccountForm);

// You have to connect() to any reducers that you wish to connect to yourself
AccountForm = connect(
  state => ({
    initialValues: state.account.data // pull initial values from account reducer
  }),
  { load: loadAccount } // bind account loading action creator
)(AccountForm);

export default AccountForm;

如果可以在不使用 redux 架构的情况下做到这一点 - 那就更好了，我不需要这里的大部分逻辑......

还有一个小问题：如何在从服务器加载数据时禁用“提交”按钮？

Answer 1

如果您使用 redux devtools 查看沙箱，您会发现在 axios 调用完成后状态仍然为空。这是因为您直接调用 reducer 函数，而不是通过 dispatch 传递。

我编辑了笔来说明解决方案：https://codesandbox.io/s/o94p6ono3z

对于禁用按钮，您必须自己处理通常的 redux 过程：在 axios 运行之前在 reducer 中设置一个变量，在 axios 完成时取消设置。然后像往常一样在 react/redux 中传递该变量。如果该变量为真，则将按钮设置为禁用。

这意味着无论你是否有 redux-form，你都可以像在普通的 redux 上下文中那样做。 redux-form 提供的是 submitting 变量，您可以在表单提交时使用它来禁用按钮。