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

Question

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

我会按如下方式实现它:

应用程序.jsx

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

AppActions.js

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

现在我点击转到页面B。如何告诉计时器停止？如果我在 componentWillUnmount 上这样做(我相信是通过一个 Action )，我会在一个 Action (加载页面 B 的 Action )期间分派(dispatch)一个 Action ，所以这是错误的。

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

Answer 1

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

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

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

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

现在您的计时器可以监听类型为 pageLoad 的操作，并根据正在加载的页面是否需要计时器来启动/停止自身。