Question

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

我的提交按钮触发一个动作（简单的调度或thunk）。如果表单有效，请提交 - 否则，触发错误消息。

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

我觉得这是两个不同的行动：VALIDATE

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

Answer 2

为什么在调度之前不验证表单，并调度相应的操作？或者您可以使用redux middle-ware click here

Answer 3

经典和整体解决方案：

将整个表单保存在您的状态中，例如：

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

将onInput事件添加到表单输入并跟踪其状态，以便在每次更改时进行验证。

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

redux-form 就是为此而建的。

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

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

以下是假设将react-redux用于mapStateToProps和mapDispatchToProps

的示例

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

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

Redux - 条件调度

3 个答案: