Redux - 条件付き発送

Question

古典的な問題 - フォームを送信する前に検証したいと思います。

[送信]ボタンはアクション（簡易ディスパッチまたはサンク）をトリガーします。フォームが有効な場合は送信し、そうでない場合はエラーメッセージを表示します。

単純な解決策：アクションをディスパッチします。減算器でフォームを検証し、エラー状態を送信または設定するVALIDATE_AND_SUBMIT

{ 
    type: "VALIDATE", 
    formData 
} 

これは検証し、エラーを設定する必要がありVALIDATE：私はこれらのように感じる

は、二つの異なるアクションです。

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

SUBMIT - エラー状態がない場合に提出してください。

私はredux-thunkを使用しても、最初のVALIDATEアクションからフィードバックを得ることはできません。私の思考プロセスはここで反パターンになっていますか？フォームを送信する前にどのように検証できますか？

Answer 1

は、私はあなたの問題の一部がではなく何かが起こっている何かなどのアクション状態がを変化させたと考えると思います。

"検証"はアクションではありません。 「検証に失敗しました」はアクションです。
データの送信はアクションではありません。 「データが提出されました」というアクションがあります。

だから、たとえば、このことを念頭に置いて、あなたのサンクを構築場合：

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 */}) 
     } 
    } 
} 

Answer 2

ディスパッチする前にフォームの検証を行い、適切なアクションを送信するのはなぜですか？またはあなたはReduxのミドルウェアを使用することができますclick here

Answer 3

クラシックとソリューション全体：

は、例えば、あなたの状態でフォーム全体をホールド：

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

onInputイベントをフォームの入力に追加し、すべての変更時に状態を確認します。

ユーザーが送信すると、有効な状態を確認して反応することができます。

redux-form がそのために作成されました。あなたはこの場合、フォーム全体の状態

を保持したくない、あなたが検証してから提出する必要がありますと仮定し

。

はここmapStateToPropsと反応-Reduxのを使用して仮定例ですmapDispatchToProps

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

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