在 redux action creators 中设置监听器是个坏主意吗？答案

【问题标题】：Is setting up listeners inside redux action creators a bad idea?在 redux action creators 中设置监听器是个坏主意吗？
【发布时间】：2017-11-28 08:55:08
【问题描述】：

我正在构建一个应用程序，它会不断地监听位置变化并更新商店。我想知道将我的侦听器放在我的动作创建器中而不是组件本身是否是个好主意。

例如，

componentWillMount() {
    this.props.watchLocation();
}

// inside action creator
export function watchLocation() {
  LocationManager.on("location", location => {
    dispatchLocationlocation);
  });
}

或者，在我的 react-native 组件中，

componentWillMount() {
  LocationManager.on("location", location => {
    // call action to dispatch location updates
  });
}

如果我将侦听器放在我的动作创建器中，在性能方面有什么不同？

【问题讨论】：

标签： javascript reactjs react-native redux redux-thunk

【解决方案1】：

就性能而言，我认为这不会有太大的不同，但我不同意 Varun 关于听众位置的回答。如果您创建这样的操作并分派一次，则需要一个额外的操作来更新存储（当然，您可以使用 thunk 来实现），并且以后可能很难禁用回调，因为您无法访问回调引用，因为它只在动作调用中使用。如果您使用 componentDidMount/componentWillUnmount 生命周期方法来跟踪您的事件处理程序，很容易避免内存泄漏。顺便说一句，不要将 componentWillMount 用于任何可能导致副作用的事情：

componentWillMount() 在安装发生之前立即调用。它在 render() 之前调用，因此在此方法中同步设置状态不会触发重新渲染。避免在此方法中引入任何副作用或订阅。

请参阅documentation 了解更多信息。

【讨论】：

为什么需要额外的操作？如果不放怎么办？在定期作业的情况下，如果您需要稍后禁用它，您可以触发一个操作以将计时器 id 存储在存储中（如果您使用 setInterval），然后再通过另一个操作禁用它。或者在那个 API 的情况下，你可能不需要存储任何东西，我猜有一个方法 LocationManager.stopWatching。我喜欢 Varun 关于让您的代码更可扩展、更模块化并从组件中删除所有逻辑（仅显示内容）的评论。
因为你需要一个动作来开始监听，而另一个真正进入减速器的动作。您是对的，您可以将计时器 ID 存储在商店中，但由于它们很可能会绑定到组件的生命周期，因此我认为这有点矫枉过正（创建启用/禁用操作，为其设置减速器)，并注意在正确的位置调度操作，最终很可能是 componentDidMount/componentWillUnmount 方法。
此外，很多库不会为您处理回调，例如可以接受 n 个回调的事件侦听器（例如，简单的 addEventListener）。你如何告诉 removeEventListener 你想停止使用哪个回调？您唯一的选择是对回调函数的引用。此外，就模块化而言，它几乎保持不变，有一个更新存储中值的操作，以及一个组件中的两行额外的行来跟踪调度更新的回调。
好吧同意矫枉过正，没错，它很可能与组件的生命周期有关。并同意 eventListener （即使我在过去 3 个月里一直没有使用，所以没有面对它）。仍然为什么在特定情况下你需要不惜一切代价在减速器中进行配对操作？没有什么能强迫你（我有非常相似的动作，不会立即调度任何动作），它仍然是连贯的，因为它会在某个时候调度一个动作。
是的，马丁，你是对的，需要额外的操作来分派数据，我同意。事实上，我的应用程序包含其他几个单独需要这些额外方法的方法，所以如果没有性能缺陷，我想我可以接受这种设置。

【解决方案2】：

如果您在动作创建器或组件本身中设置侦听器，性能应该没有任何差异，但我认为在动作创建器中设置它们是个好主意，因为您可以轻松访问当前状态动作创建者（使用 redux-thunk 或其他包）并允许代码更具可扩展性。

【讨论】：