Redux

Question

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

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

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

我觉得这是两个不同的操作：VALIDATE

{
   type: "VALIDATE",
   formData
}

这应该验证并设置错误。

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

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

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

Answer 1

为什么不在发送前验证表单，并发送适当的操作？或者你可以使用 redux 中间件 click here

Answer 2

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

"Validate" 不是一个动作。 "Validation failed" 是动作。
"Submitting" 数据不是动作。 "Data was submitted" 是动作。

因此，如果您在构建 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 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 - 条件调度

Redux - conditional dispatching

react-redux

redux-thunk