Redux-条件调度

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

“我的提交”按钮触发一个操作（简单分派或thunk）。如果表单有效，则提交它-否则，触发错误消息

简单的解决方案是：发送一个动作，例如VALIDATE_和_SUBMIT，它将在reducer中验证表单，并提交或设置一个错误状态

我觉得这是两种不同的行为：验证

{
   type: "VALIDATE",
   formData
}

这将验证并设置错误

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

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

---

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

为什么不在发送表单之前进行验证，并发送相应的操作？或者您可以使用redux中间件

我认为您的问题的一部分是将操作视为正在发生的事情，而不是导致状态改变的事情

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

因此，如果你将这一点牢记在心，例如：

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

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

---

经典和整体解决方案：

在您所在的州保存整个表单，例如：

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

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

将

onInput

事件添加到表单输入中，并在每次更改时跟踪它们的状态

因此，当用户提交时，您可以检查有效状态并作出反应

就是为了这个

假设您不想保留整个表单状态

在这种情况下，您必须进行验证，然后提交

下面是一个示例，假设将react-redux与

MapStateTrops

和

mapDispatchToProps

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

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

//组件中的操作
submitButtonAction（）{
props.validate（）；
if（props.formValid）props.submitForm（）；
}
//JSX

My formData存储在My state中，因此我无法在thunk中访问-您如何解决此问题？thunk中还可以使用另一个参数，即

getState

函数。您可以使用它从存储中获取当前状态。我将更新我的答案以说明这一点。请参阅关于为什么Redux操作应被称为事件的讨论，以避免这种混淆我确实在Redux中保留表单状态-因此您是说在reducer中的1分派中验证和提交这两个操作？取决于您运行Redux的环境。例如，在一个react组件中，您创建了一个方法，如我在上面的示例中所示，名为

submitButtonAction

，它调用两个动作validate-then-submit。但是如果您将表单保持在状态，我建议在表单输入时进行验证。如果表单有效或无效，您不必显示用户，但它会为您跟踪它，如果用户单击提交&表单有效，事情将继续进行。