Question

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

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

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

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

此外，尽管表单提交的目标尚未改变任何redux存储的状态，但是当发送某些内容时执行XHR的操作是否合理＆＃39; SUBMIT_FORM＆＃39;？

Answer 1

做出XHR的动作是否合理像“SUBMIT_FORM＆＃39;
”那样发送了一些东西

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

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

如果您已经使用Redux存储该数据，那么您就可以了 - 只需使用商店，如果不是，您必须将一个函数从WizardForm传递到每个单独的页面&& ＃39;负责更新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

1 个答案: