React + Flux - 在多页上卸载页面

Question

考虑一个多页面应用程序，当您打开一个页面时，它会启动一个计时器，负责每 n 秒读取一次数据。现在考虑你想转到另一个页面，你如何保证计时器将停止（因为第二页不需要它）。

我会按如下方式实现它：

App.jsx

onClickNavigateToPageA: function() { AppActions.goToA(); }

AppActions.js

goToA: function() {
   DispatchActionToLoadComponentPageA();
   DispatchActionToStartTimer();
}

现在点击进入B页，如何让定时器停止？如果我在 componentWillUnmount 上这样做（我相信是通过一个动作），我会在一个动作（加载页面 B 的动作）期间分派一个动作，所以这是错误的。

正确的方法是在加载页面 A 后立即注册一个回调（调用一个操作来禁用计时器），然后在加载任何其他页面时调用它？据我所知，商店现在不应该关于 api 用于从服务器获取数据（包括计时器，它应该在 action creators 上）。

Answer 1

如果您不将计时器与商店一起使用，我将不会使用动作和通量循环。如果它与商店有关，请使用通量循环。无论如何，我只会使用具有所需功能的通用 "timer" 模块，并在需要时将其 on/off。

Answer 2

您可以使用您想要的任何 JSON 有效负载来分派操作，这意味着您可以根据分派操作本身的属性对操作类型进行分组。在这种情况下，来自 DispatchActionToLoadComponentPageA 的负载可能是：

{ 
    type: 'pageLoad',
    page: 'pageA'
}

这与您可能发送的其他类型的操作不同，例如：

{ 
    type: 'xhrComplete',
    response: ...
}

现在您的计时器可以根据正在加载的页面是否需要计时器来侦听类型 pageLoad 和 start/stop 本身的操作。

React + Flux - Unload page on multi-page