Redux-Form 理解多页表单 Ajax PUT

Question

前言： 我是一名 Rails 开发人员，对 Javascript 足够熟悉，可以编写基本的东西，但我对相关框架的整体理解 react + react-redux + redux-form 可能不够。我还在努力。

要完成的任务： 我正在尝试使用 redux-form 实现多页表单。我有多页表单工作。我现在需要在一个 XHR 请求中发布所有三页向导的值。

问题： 我正在关注 redux-form 文档中的多页向导表单示例：http://redux-form.com/4.2.0/#/examples/wizard?_k=h898k7

但是，我似乎不明白应该在哪里处理 XHR 请求。这可能是对 react 和 react-redux 的根本误解。我看到他们有一个从 WizardForm.js 父组件传递给每个向导页面的 onSubmit 函数，但我认为我不明白 WizardForm.js 在哪里获取该 onSubmit 函数，也不知道如果目标是该函数的形状是什么在 WizardFormThirdPage.js 上完成一个 XHR PUT 请求。

此外，虽然表单提交的目标不是（还）改变任何 redux 存储的状态，但是当像“SUBMIT_FORM”这样的东西被分派时做出一个执行 XHR 的操作是否合理？

Answer 1

在以下情况下进行 XHR 操作是否合理？ 像“SUBMIT_FORM”这样发送的东西？

绝对！操作不必像 { type: FOO } 这样返回对象，它们也可以返回函数，当你想做 XHR 的事情时，这会让生活变得更轻松：http://redux.js.org/docs/advanced/AsyncActions.html。

至于您问题的其他部分，如果您不遵循异步操作路径，理论上 ajax 请求几乎可以在任何地方完成，但在组件层次结构中有意义的最高中心点通常更好。在您的情况下，WizardForm 组件没有理由不处理这个问题。 WizardForm 还必须跟踪在三个页面中输入的值，除非...

如果您已经使用 Redux 来存储该数据，那么您就可以开始了 - 只需使用存储，否则您必须将 WizardForm 中的函数传递给负责处理的每个单独页面更新 WizardForm 的本地状态。

在下面的伪示例中，您可以看到我如何将函数 onSetPageValue 传递给向导页面，并使用它来更改 WizardForm 的状态。在您发布的示例中，WizardForm 从链中更高的位置获取此函数，但原理相同，此概念是 React 的基础。

class WizardForm extends React.Component{
  constructor(props){
    super(props);
    this.onHandleSubmit = this.onHandleSubmit.bind(this);
    this.onSetPageValue = this.onSetPageValue.bind(this);
    this.state = {
      pageValues: {
        1: '',
        2: ''
      }
    }
  }
  onHandleSubmit () {
    /* Do all xhr stuff, update state/store/whatever fits your application */
  }
  onSetPageValue(page, value){
    this.setState({
      pageValues: Object.assign({}, this.state.pageValues, {[page]:value})
    });
  }
  render(){
    return (
      <div>
        <WizardPage1 onSetPageValue={this.onSetPageValue}/>
        <button onClick={this.onHandleSubmit}>Submit</button>
      </div>
    )
  }
}

class WizardPage1 extends React.Component {
  render(){
    return (
      <button onClick={() => {this.props.onSetPageValue(1, 'Foo!')}}>Trigger onSetPageValue</button>
    );
  }
}