Redux-Form 理解多页表单 Ajax PUT

Question

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

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

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

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

上完成 XHR PUT 请求

此外，虽然表单提交的目标（还）不是改变任何 redux 存储的状态，但是当像 'SUBMIT_FORM'?

Answer 1

would it be rational to make an action that does the XHR when something is dispatched like 'SUBMIT_FORM'?

当然！动作不必 return 像 { type: FOO } 这样的对象，它们也可以 return 函数，当你想做 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>
    );
  }
}

Redux-Form 理解多页表单 Ajax PUT

Redux-Form Understanding Multipage Form Ajax PUT

javascript

ajax

reactjs

redux-form

react-redux