Redux形式瞭解多頁表單Ajax PUT

前言： 我是一名熟悉Javascript的Javascript開發人員編寫基本的東西，但我對問題框架的整體理解反應+ react-redux + redux-form可能不足。我仍在努力。Redux形式瞭解多頁表單Ajax PUT

任務完成： 我試圖用redux-form實現多頁表單。我有多個頁面表單工作。我現在需要在一個XHR請求中發佈嚮導的所有值。

問題： 我繼終極版形式的文檔中的多頁嚮導形式的例子：http://redux-form.com/4.2.0/#/examples/wizard?_k=h898k7

不過，我好像不明白的地方的XHR請求的處理方式。這可能是對反應和反應的基本誤解。我發現他們有一個onSubmit函數傳遞給WizardForm.js父組件的每個嚮導頁面，但我不認爲我理解了WizardForm.js在哪裏獲取onSubmit函數，也不知道如果目標是在WizardFormThirdPage.js上完成XHR PUT請求。

另外，儘管表單提交的目標還沒有（還）改變任何的redux商店狀態，但是當像'SUBMIT_FORM'這樣的東西被派發時，做一個XHR執行操作是否合理呢？

來源

2016-03-24 Chad M

當東西像'SUBMIT_FORM'一樣發出時，做出XHR的動作是否合理？

絕對！操作不必返回像{ type: FOO }這樣的對象，它們也可以返回函數，並且當您想要執行XHR內容時，這會使生活變得更輕鬆：http://redux.js.org/docs/advanced/AsyncActions.html。

至於你的問題的其他部分，如果你不遵循異步操作路徑，理論上ajax請求可以在任何地方都做到，但是在組件層次結構中有意義的最高中心點通常更好。在你的情況下，沒有理由讓WizardForm組件不應該處理這個問題。 WizardForm也有跟蹤的三個頁面中輸入的值，除非...

如果您已經使用終極版來存儲數據，那麼你是好去 - 只是消耗店，如果不您必須將一個函數從WizardForm傳遞到負責更新WizardForm本地狀態的每個單獨頁面。

在下面的僞示例中，您可以看到如何將SetPageValue上的函數傳遞給嚮導頁，並使用它來更改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> 
    ); 
    } 
}

來源

2016-03-25 00:14:20 dannyjolie

你，先生，是天賜之物。 –

@ChadM哈哈，我不會那麼遠。 – dannyjolie

@dannyjolie在這種情況下你不會得到2個按鈕嗎？ – softcode

Redux形式瞭解多頁表單Ajax PUT

回答

相關問題