Redux - 条件调度

Question

经典问题 - 我想在提交之前验证表单.

我的提交按钮触发一个动作(简单的调度或thunk).如果表单有效,请提交 - 否则,触发错误消息.

简单的解决方案:调度一个动作,例如VALIDATE_AND_SUBMIT,它在reducer中将验证表单,并提交或设置错误状态.

我觉得这些是两种不同的行为:有效

{
   type: "VALIDATE",
   formData
}

这应验证并设置错误.

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

提交 - 如果没有错误状态,则应提交.

即使我使用redux-thunk,我也无法从第一个VALIDATE操作获得反馈.我的思维过程是反模式吗？如何在提交表单之前进行验证？

Answer 1

我认为你的问题的一部分是将行动视为正在发生的事情而不是导致国家改变的事情.

"验证"不是动作."验证失败"就是行动.
"提交"数据不是一个动作."提交数据"是行动.

因此,如果你考虑到这一点来构建你的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 */})
        }
    }
}