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

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: {// data here}, error: null, loading: false} 。
• 提出错误请求后，请使用{data: {}, error: 'error', loading: false}更新存储。

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

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

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

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

1. 将存储清除为{data: {}, error: null, loading: false} 。
2. 在componentWillReceiveProps ，由于错误只会在错误请求之后存储，因此请检查prev error == []和是否提示下一个错误。

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

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

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
}