何时更新商店

Posted 2023-02-22

【中文标题】何时更新商店

【英文标题】：When to update store

【发布时间】：2018-06-29 05:12:07

【问题描述】：

我已经开始使用 reactjs，但我经常遇到这个问题，我不知道何时正确更新商店。

现在我所做的总是在安装组件时调度一个动作来更新存储，我认为这违背了存储的目的，因为它的美妙之处在于在不访问服务器的情况下检索数据。但是如果不访问服务器，我将不知道存储中的数据是否是最新的。当两个人同时使用该应用程序时尤其如此，并且经常当一个人更改某些内容时，另一个人可能在商店重新拉出最新版本之前看不到它。

我知道的解决方案是集成 signalR 并让它在数据更改时将更新推送到商店，这样我就可以安全地从商店获取数据而不必担心过时的数据，但我没有时间实施这样的系统和想知道其他快速方法或其他人如何解决此问题。

【问题讨论】：

如果你不能用静态数据加载初始数据，那么你会怎么做呢？组件非常有一个“我还没有任何数据”处理程序，访问服务器，然后在完成后渲染。即使数据是被推送而不是被拉取，您仍然需要在数据可用之前处理渲染。

我主要关心的是在加载了初始数据之后，我如何才能确保它是最新的？如果在我的初始拉取完成后应用程序上的另一个人正在更新某些内容，我将查看过时的数据。

它不会是最新的。如果您必须拥有最新版本，那么您必须 推送或使用 websockets 或其他任何东西。没有魔法；你要么有数据，要么没有。

啊，好的。我想推是唯一的途径。谢谢。

【参考方案1】：

我认为这违背了商店的目的，因为它的美妙之处在于无需访问服务器即可检索数据。但是不打服务器我不知道商店里的数据是不是最新的。

这并没有破坏目的，因为您必须以某种方式获取初始数据（componentDidMount 是实现此目的的好地方）。

除此之外，还有两种解决方案可以进一步更新您的状态：

1) 监听 WebSocket/SSE 并在它发生时触发更新操作（不是 ASP.NET 专家，但我相信这就是 SignalR 的用途）。

2) 实现某种轮询机制，并使用结果触发更新操作。然后，您可以将 API 调用的结果与您当前的状态进行比较，并且仅在发生更改时才更新状态。

假设您有一个获取一些数据的操作创建器，您可以使用计时器在一定时间间隔内一遍又一遍地调用操作。您可以在componentDidMount 中设置它，就像初始操作一样。不要忘记在组件卸载时清除计时器：

class MyComponent extends React.Component 
  componentDidMount () 
    this.props.actions.fetchData()

    // fire the action every 3 seconds
    this.intervalId = setInterval(this.props.actions.fetchData, 3000)
  

  componentWillUnmount () 
    clearInterval(this.intervalId)
  

  render () 
    // ...