Redux - 有條件派遣

經典問題 - 我想在提交表單前驗證表單。Redux - 有條件派遣

我的提交按鈕觸發一個動作（簡單調度或thunk）。如果表單有效，請提交 - 否則，觸發錯誤消息。

簡單的解決方案：派遣一個動作，例如VALIDATE_AND_SUBMIT，它在reducer中驗證表單，並提交或設置錯誤狀態。

我覺得這是兩個不同的操作：驗證

{ 
    type: "VALIDATE", 
    formData 
}

這應該驗證並設置錯誤。

{ 
    type: "SUBMIT", 
    // get form data and errors from state 
}

提交 - 應提交沒有錯誤狀態。

即使我使用了redux-thunk，我也無法從第一個VALIDATE動作獲得反饋。我的思維過程是反模式嗎？如何在提交表單之前進行驗證？

來源

2017-02-28 tgun926

我覺得你的問題的一部分是行動的事情正在發生而不是事情已經引起了狀態改變思考。

「驗證」不是一個動作。「驗證失敗」是該操作。
「提交」數據不是一個行爲。「數據已提交」是行動。

所以，如果你與構建你的thunk記住，例如：

export const validateAndSubmit =() => { 
    return (dispatch, getState) => { 
     let formData = getState().formData 

     if (isValid(formData)) { 
      dispatch({type: "VALIDATION_PASSED"}) 
      dispatch({type: "SUBMISSION_STARTED"}) 

      submit(formData) 
       .then(() => dispatch({type: "SUBMITTED" /* additional data */})) 
       .catch((e) => dispatch({type: "SUBMISSION_FAILED", e})) 
     } 
     else { 
      dispatch({type: "VALIDATION_FAILED" /* additional data */}) 
     } 
    } 
}

來源

2017-02-28 12:13:17

我FORMDATA存儲在我的國家，所以我不能一個thunk內訪問 - 你將如何解決這個問題？ – tgun926

你可以在thunk中使用第二個參數，它是'getState'函數。您可以使用它從商店獲取當前狀態。我會更新我的答案來證明這一點。 –

爲什麼在分派之前不驗證表單，併發送適當的操作？或者您可以使用終極版中間件click here

來源

2017-02-28 11:51:35 challenger

古典和整體解決方案：

保持整個造型在你的狀態，例如：

{ 
    valid: false, 
    submitAttempted: false, 
    username: '', 
    email: '', 
}

將onInput事件添加到您的表單輸入並跟蹤其狀態，以驗證每次更改。

所以當用戶提交時，可以檢查有效狀態並作出反應。

redux-form 就是爲此而建造的。

假設你不想保存整個表單狀態

在這種情況下，你必須驗證，然後提交。

下面是一個例子使用反應 - 終極版與mapStateToProps假設mapDispatchToProps

// action in component 
submitButtonAction() { 
    props.validate(); 
    if(props.formValid) props.submitForm(); 
} 

// JSX 
<FormSubmitButton onClick={this.submitButtonAction} />

來源

2017-02-28 12:30:16 SagiSergeNadir

我確實在redux中持有表單狀態 - 所以你說要驗證並提交在減速器中的1次調度？ – tgun926

取決於您使用REDX運行的環境。例如，在一個反應組件中，您創建了一個方法，就像我在上面的示例中所示的一個名爲'submitButtonAction'的方法，該方法調用了兩個驗證然後提交的操作。但是如果你在這個狀態下持有表格，我建議在輸入表格時進行驗證。如果表單有效或無效，則不必顯示用戶，但會爲您跟蹤該表單，以防用戶單擊提交併且表單有效時，情況將繼續。 – SagiSergeNadir

Redux - 有條件派遣

回答

相關問題