用于在存储更新时提取数据的Redux/Flux模式

我相信这是一个非常普遍的情况。。。我正在构建一个由一些数据源驱动的组件组成的仪表板。在视图顶部是一系列过滤器，例如日期范围。更新日期范围时，屏幕上的组件需要根据所选范围更新其数据。这将反过来迫使从属于该选择器的各个组件需要基于新选择的范围获取新数据async action/XHR

屏幕上可能有许多组件，用户可能希望添加/删除可用的显示，因此它不像总是刷新所有组件的数据那样简单，因为它们可能存在，也可能不存在

我认为处理这个问题的一种方法是在选择新的日期范围时调度操作，即找出屏幕上从存储派生的组件，并调度异步操作来获取这些组件的数据。这似乎需要做大量的工作才能完成日期更改操作

另一种选择可能是检测来自每个组件的store.subscribe回调中的日期范围更改。这似乎解耦了从导致这种情况发生的操作中获取数据的逻辑。然而，我认为在发送时发送是一种不好的做法，甚至是一种错误。当然，我可以用setTimeout来包装它，但这感觉也不对

我想到的第三件事是直接在组件的store.subscribe中执行fetch调用，并在这些调用返回时进行调度，但我认为这打破了连接模型

这似乎是一种基于状态更改获取的常见模式，但我不知道最好将它们放在哪里。关于上述问题有什么好的文档/示例吗？

不要使用store.subscribe。当DATE_CHANGED到达它的目的地时，只需更改应用程序状态，我假设DATE range是存储的一部分。所以你有state.rangeStart和state.rangeEnd

您没有提到正在使用的视图渲染库，因此我只能描述如何使用React执行此操作：

组件知道当前安装的组件是否可见，因此redux不需要担心这一点。您需要的是一种检测状态的方法。rangeStart或state.rangeEnd已更改。 在React中，有一个生命周期钩子，用于在最新版本中组件将接收Props或getDerivedStateFromProps。在这个处理程序中，您可以调度异步redux操作来获取组件所需的数据。您的视图库可能会有类似的内容。 当您等待新数据时，组件通常会显示某种空或加载状态。因此，一个好的做法是使存储在处理日期更改操作的reducer中的数据无效/清除。例如，如果数组的state.listOfThings完全依赖于日期范围，则在日期更改时，您会将其设置为空数组：return{…state，listOfThings:[]}。这会导致组件显示正在再次提取数据。 当所有异步redux操作都经过请求->成功/失败周期并用数据填充存储时，连接的组件将自动呈现数据。这是它自己的一章，如果需要更多信息，请查看redux异步操作。 棘手的部分是组件和它们呈现的应用程序之间的相互依赖关系。例如，如果两个不同的仪表板组件要获取和呈现当前日期范围的state.listOfThings，则不需要两次获取此数据。因此，需要有一种方法来检测1数据范围已更改，但2获取物品列表的请求已在进行中。这通常是通过状态为state.isFetchingListOfThings的布尔标志完成的。获取此数据的异步操作会导致还原程序将此标志设置为true。您的组件需要知道这一点，并有条件地分派操作：if props.rangeStart！==nextProps.rangeStart&！nextProps.isFetchingListOfThings{props.fetchListOfThings；}。

---

+1.我认为缺少的或外来的部分是在componentWillReceiveProps中发送动作。我想问一个独立于视图库的问题。我认为在componentWillReceiveProps生命周期中异步操作被调度之前，调度仍将进行中。在调用此生命周期时保证已完成的存储更新？这是否打破了容器和呈现组件之间的分离？