Reactjs with Flux：何时何地在 Flux 应用程序中初始化 Timer 实用程序

Question

我的应用程序中发生了三件不同的事情：

1. 定时器设置为 10 秒间隔，直到被要求才停止
2. 一旦计时器重新开始，异步 Api 实用程序模块会触发一个函数来调用 Api。
3. 我有一个组件（带有随附的 Action 和 Store 模块），它获取 api 数据（具有相同属性的类似项目的列表）并将它们呈现到页面。

我的问题是这样的：

我应该在何时何地初始化计时器，以便我的组件可以在其render() 方法被调用后开始接收数据？

---

我考虑在返回之前将其放入render 函数中，但这没有意义，因为我需要在收到数据后立即将 api 数据呈现到页面。

我是否错误地构建了这个应用程序？我的 Timer 和/或 Api 实用程序也应该是 React 组件吗？

Answer 1

我确信有几种方法，但这是我的 2 美分：

假设您有 LogViewer 应用程序，并且您希望每 10 秒获取和显示一次日志。

• 那么您将拥有一个LogStore 和一个LogViewer 组件。
• 在LogViewer 组件的componentDidMount 方法中，我会调用LogStore.getLogs()。
• LogStore.getLogs() 将调用 APIUtils.getLogs() 并设置一个定时器，每 10 秒触发一次，每次触发时调用 APIUtils.getLogs()。设置定时器后LogStore.getLogs()立即返回一个空数组。
• 空数组由LogViewer 组件渲染（或显示加载栏）。
• 同时，来自APIUtils.getLogs() 的ajax 调用返回，GET_LOGS_SUCCESS 服务器操作被分派到所有商店。
• LogStore 保存传入的日志并为LogViewer 组件发出更改事件以再次调用LogStore.getLogs() 函数。
• 如果在某个时候你想停止计时器，那么在LogViewer 组件中我会有一个停止按钮，单击该按钮会创建GET_LOGS_STOP 动作。
• 当GET_LOGS_STOP 操作被分派到LogStore 时，它会通过停止计时器来做出反应。

我认为这会满足您的要求。