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

Question

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

我将按以下方式实现它:

App.jsx

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

AppActions.js

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

现在我点击进入B页。如何告诉计时器停止？如果我在 componentWillUnmount 上执行此操作(我相信是通过操作)，我将在操作期间分派(dispatch)操作(加载页面 B 的操作)，因此这是错误的。

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

Answer 1

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

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

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

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

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