Redux表单理解多页形式Ajax PUT
序言:我是一个rails开发人员，对Javascript非常熟悉，可以编写基本的东西，但是我对相关框架的总体理解-- react +redux+redux-表单--可能还不够。我还在努力呢。
要完成的任务：，我正在尝试使用redux实现多个页面表单。我的多页表单正在工作。现在，我需要在一个XHR请求中发布向导值的所有三个页面。
问题：我正在遵循redux文档中的多页向导表单示例：k=h898k7
但是，我似乎不明白应该在哪里处理XHR请求。这可能是对反应和反应的根本误解。我看到他们有一个从onSubmit父组件传递给每个向导页面的WizardForm.js函数，但是我认为我不理解WizardForm.js从哪里得到这个onSubmit函数，也不明白如果目标是在WizardFormThirdPage.js上完成XHR请求，这个函数的形状是什么。
此外，尽管表单提交的目标不是(目前)更改任何redux存储的状态，但是，在发送'SUBMIT_ form‘之类的东西时执行XHR操作是否合理呢？
回答 1
Stack Overflow用户
发布于 2016-03-25 00:14:20
在发出诸如'SUBMIT_FORM‘之类的信息时，执行XHR操作是否合理？
绝对一点儿没错!操作不一定要返回像{ type: FOO }这样的对象，它们还可以返回函数，当您想要执行XHR内容：http://redux.js.org/docs/advanced/AsyncActions.html时，这会使生活变得更容易一些。
至于问题的其他部分，如果您不遵循异步操作路径，理论上ajax请求可以在任何地方完成，但是组件层次结构中最重要的中心点通常更好。在您的示例中，WizardForm组件没有理由不处理这个问题。WizardForm还必须跟踪三页中输入的值，除非.
--如果您已经使用Redux来存储数据，那么就可以使用了--只需使用这个存储，如果不是，您必须将一个函数从WizardForm传递给负责更新WizardForm的本地状态的每个单独的页面。
在下面的伪示例中，您可以看到如何将函数onSetPageValue传递给向导页面，并使用它来更改WizardForm的状态。在您发布的示例中，WizardForm从链的较高位置获得了这个函数，但是原理是相同的，这个概念是反应的基础。
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>
);
}
}https://stackoverflow.com/questions/36211298
复制相似问题
腾讯云开发者
