如何清除来自 redux 操作的错误消息

Question

我有一个 API，它可能会返回错误。在简单的形式中，组件如下所示。问题是，当发生错误时，解除/清除错误消息的步骤是什么？

class LoginError extends Component {
    render() {
        return (
            {
                this.props.error != null ?
                    <h2>this.props.error</h2> :
                    undefined
            }
        )
    }
}

const mapStateToProps = (state) => {
    return {
        error: state.error
    };
}


export default connect(mapStateToProps, null)(LoginError);

Answer 1

没有直接的方法可以做到这一点，您基本上有两个选择：当另一个操作触发时，在减速器中将错误设置为未定义，或者使用可重用的错误组件在错误本身上提供一个关闭按钮，该组件将调度一个操作在减速器中将错误设置为未定义。

我个人一直使用第一种方法，以提交表单为例。当用户提交表单时，您会触发form-submit/request并可能显示一条加载消息。如果表单发送正确form-submit，则触发，如果发生错误，则触发form-submit/error，并在减速器中设置错误。然后form-submit/request清除错误，这样如果发生错误，用户会收到反馈，但如果再次提交表单，错误就会被清除。如果您不想在提交表单时执行任何操作（这很奇怪），您可以在form-submit触发时清除错误。这种方法的缺点是，例如，如果您想在表单的任何字段更改时清除错误，则必须添加另一个操作并使该操作的错误也未定义。

现在，如果您在错误组件中放置一个关闭按钮，则可以重用错误 React 组件，但是您必须action/dismiss-error为每个 API 调用执行一个操作，并将错误在每个 API 调用的减速器上设置为未定义，这可以得到很快就非常乏味。

对我来说最好的方法是使用第一种方法，但要仔细选择为每个页面或部分显示的错误数量。这样，每个页面都可以有其错误部分，该部分将为与该页面关联的任何 API 调用显示，并且您只需要为每个页面执行错误操作，而不需要为每个 API 调用执行错误操作。