Redux - 条件调度

Question

经典问题 - 我想在提交表单之前对其进行验证。

我的提交按钮触发一个 Action (简单的调度或重击)。如果表单有效，请提交它 - 否则，触发错误消息。

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

我觉得这是两个不同的 Action :验证

{
   type: "VALIDATE",
   formData
}

这应该验证并设置错误。

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

提交 - 如果没有错误状态，应该提交。

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

Answer 1

我认为您的部分问题是将 Action 视为正在发生的事情，而不是导致状态发生变化的事情。

“验证”不是一个 Action 。 “验证失败”是操作。
“提交”数据不是一个 Action 。 “数据已提交”是操作。

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