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

【问题标题】：React + Flux - Unload page on multi-pageReact + Flux - 在多页上卸载页面
【发布时间】：2015-10-01 00:53:15
【问题描述】：

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

我会这样实现它：

App.jsx

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

AppActions.js

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

现在我点击进入页面B。如何告诉计时器停止？如果我在 componentWillUnmount 上执行此操作（我相信是通过操作），我将在操作期间调度操作（加载页面 B 的操作），所以这是错误的。

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

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：

看起来很干净
计时器只是一个例子。
我明白你现在在说什么。很明显，在页面加载时启动计时器的商店可以负责在需要其他页面时停止它。
但是考虑一个名为 FooApi 的 api 中的计时器。我不喜欢将商店与 FooApi 耦合的想法，我想让它成为动作创建者。或者这样做没有问题？（我认为有，因为我不希望我的商店触发操作（异步）。
我并没有完全跟进后续工作，但根据我对您的用例的了解，当用户单击按钮/链接时，您的组件将触发一个要调度的操作。拥有计时器的商店将接收该操作（以及您的其他商店），并且可以查看有效负载以查看它是否要对其进行操作。计时器应该在注册的东西里面，以监听分派的动作。我通常使用 ActionCreator 来触发异步操作，并且仅在完成时分派（api 没有计时器，但可能依赖于有的 Store）。

【解决方案2】：

如果您不将计时器与商店一起使用，我将不会使用动作和通量周期。如果它与商店有关，请使用通量循环。无论如何，我只会使用具有所需功能的通用“计时器”模块，并在需要时打开/关闭它。

【讨论】：

实际上，当我加载页面 A（例如）时，我会启动一个计时器来轮询数据并更新我的商店。因此，当我离开该页面时，我想停止计时器（因为不再需要数据更新）。所以，你是在告诉我我的实现是正确的？
我应该在哪里进行 API 调用？我目前正在对动作创建者执行此操作（请求一个动作，接收/失败时一个动作）。这是正确的，还是商店应该处理整个过程？我不喜欢耦合它，这就是为什么我不喜欢使用商店取消计时器。
调用行动是非常好的，在我看来是正确的方法，实际上在商店里这样做是一种反模式