在操作中访问状态是否违反了 Flux 原则？答案

【问题标题】：Is accessing state in an action a violation of Flux principles?在操作中访问状态是否违反了 Flux 原则？
【发布时间】：2016-04-15 08:31:12
【问题描述】：

我是 React 新手，正在编写无限滚动功能。

window.addEventListener( 'scroll', DutyActions.scrollDuties );

在每个滚动事件中，我调用操作scrollDuties，它从服务器获取数据。然后调用一个名为loadDuties 的服务器操作将响应传递给商店，商店将其广播给视图。

问题在于，在快速滚动时，它会多次点击 API，因为第二个滚动事件在 setState({loading: true}) 语句呈现在页面上之前触发。我认为唯一的解决方案是读取动作中的状态并仅在 loading 标志为 false 时才触发 ajax。

这会违反 Flux 原则吗？

【问题讨论】：

为了清楚起见，我对其进行了编辑，但您需要添加具有竞争条件的代码，以便我们可以更好地帮助您。理想情况下，您应该提供最低限度的可重现场景。
我不会从 Action 本身中读取状态，而是从组件中读取状态。
你尝试使用去抖动功能了吗？ davidwalsh.name/javascript-debounce-function 对我来说，它似乎应该解决您的多个事件命中问题。

标签： reactjs flux

【解决方案1】：

The Redux flavor of Flux handles this situation in the action elegantly by way of the redux-thunk middleware. 在该范例中，动作创建者可以返回一个函数，该函数具有获取商店的参数。它的调度器知道如何评估这个函数，以便可以将存储暴露给操作，而无需在操作中创建显式存储依赖。

使用更标准的 Flux 实现，要实现相同的解耦，我相信您必须将存储参数从组件传递给操作。也许是这样的：

doScrollAction: function (scrollParam) {
  var isLoadingStore = IsLoadingStore.getAll()
  DutyActions.scrollDuties(scrollParam, IsLoadingStore)
}

window.addEventListener( 'scroll', doScrollAction );

【讨论】：