使用Redux的错误消息提示(Redux-Saga)

Question

在当前的项目中，我使用的是React和Redux。

• 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的函数中，如果错误不是null，页面将提示错误消息。

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

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

我用两种方式克服了这件事：

1. 将商店清空为{data: {}, error: null, loading: false}。
2. 在componentWillReceiveProps中，由于错误只能在错误请求后存储，所以请检查prev error == []和下一个错误是否提示。

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

你们能帮我一下吗！！非常感谢!

Answer 1

我建议将错误移到redux状态的另一个分支。我会把州组织成

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

现在，每当您更改为新页时，请将错误重置为null，并在发生错误时将其设置为空。这将简化这一过程。

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

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

Answer 2

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

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

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