Question

在当前项目中，我正在使用React和Redux-Saga。

API将被调用以产生作用和效果。
数据，错误和加载状态将按如下方式存储在每个页面中。

{ page1: {data: {}, error: null, loading: false}, page2: {data: {}, error: null, loading: false} }

要调用API时，请用{data: {}, error: null, loading: true}更新存储。
成功调用后，用{data: {// data here}, error: null, loading: false}更新存储。
提出错误请求后，请用{data: {}, error: 'error', loading: false}更新商店。

在页面中，使用componentWillReceiveProps函数，如果error不为null，则页面将提示错误消息。

但是，这会导致一个问题-如果我转到另一个页面然后再返回，因为存储中的错误不会更改或重置，该页面将在调用API之前提示错误。 / strong>

显然，这不是正确的方法。

我通过两种方法克服了这个问题：

将商店清除为{data: {}, error: null, loading: false}。

在componentWillReceiveProps中，由于错误只会在错误请求后存储，因此请检查是否上一个错误== []以及下一个要提示的错误。

我是新开发人员，我不知道他们是否正确。

你们能给我一些帮助吗！！非常感谢！

Answer 1

我认为，好的方法是在组件卸载时清除error。

componentWillUnmount() {
    // call action to clear error
}

有关componentWillUnmount的更多信息：https://reactjs.org/docs/react-component.html#componentwillunmount

Answer 2

我建议将错误转移到redux状态的另一个分支。我将状态组织为

state = {
  data: {
    page1: {}, page2: {}, page3: {}
  },
  error: null,
  loading: false,
}

现在，无论何时切换到新页面，都将错误重置为null并在发生错误时进行设置。这样可以简化流程。

如果您不想更改redux状态的组织方式，那么

componentWillUnmount() {
   // Dispatch action to reset the error
}

使用Redux的错误消息提示（Redux-Saga）

2 个答案: