何时更新商店

时间:2018-01-19 21:40:50

标签: reactjs react-redux reactjs-flux

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

现在我正在做的是总是在安装组件时调度一个动作来更新商店,我相信这会破坏商店的目的,因为它的美妙之处在于无需点击服务器即可检索数据。但是,如果没有点击服务器,我将不知道商店中的数据是否是最新的。特别是当两个人同时使用该应用程序时,并且经常在一个人更改某个内容时,另一个人可能看不到该内容,直到商店重新提取最新内容。

我知道的解决方案是整合signalR并让它在数据发生变化时将更新推送到商店,这样我就可以安全地从商店获取而不用担心陈旧数据,但我没有时间实现这样的系统和想知道其他快速方法或其他人如何解决这个问题。

1 个答案:

答案 0 :(得分: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 () {
    // ...
  }
}