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

Question

我认为这是一个非常常见的场景...我正在构建一个由某些数据源驱动的组件仪表板。视图顶部将是一系列过滤器（例如日期范围）。更新日期范围时，屏幕上的组件需要根据所选范围更新其数据。这反过来会迫使从属于该选择器的各个组件需要根据新选择的范围获取新数据（异步操作/XHR）。

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

我认为处理此问题的一种方法是在选择新日期范围时分派的操作是确定屏幕上的组件（派生自 Store）并分派异步操作以获取这些组件的数据。看来 DATE_CHANGED 操作需要做很多工作。

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

想到的第三件事就是直接在组件的 store.subscribe() 中执行 fetch 调用，并在它们返回时进行调度，但我认为这会破坏连接模型。

这似乎是一种根据状态变化进行获取的常见模式，但我不知道将它们放在哪里最好。关于上述问题的任何好的文档/示例？

Answer 1

不要为此使用store.subscribe。当DATE_CHANGED 到达它所指的reducer 时，只需更改应用程序状态（我假设日期范围是商店的一部分）。所以你有像state.rangeStart 和state.rangeEnd 这样的东西。

你没有提到你正在使用什么视图渲染库，所以我只能描述通常是如何使用 React 完成的：

• 组件知道它们当前是否已挂载（可见），因此 redux 不需要关心这些。您需要一种方法来检测state.rangeStart 或 state.rangeEnd 发生了变化。
• 在 React 中有一个生命周期钩子（componentWillReceiveProps 或 getDerivedStateFromProps 在最新版本中）。在此处理程序中，您分派异步 redux 操作以获取组件所需的数据。您的视图库可能会有类似的内容。
• 当您等待新数据时，组件通常会显示某种“空”或“加载”状态。因此，一个好的做法是使处理DATE_CHANGED 操作的reducer 中的存储无效/清除数据。例如，如果state.listOfThings（一个数组）完全取决于日期范围，您可以在日期更改后立即将其设置为一个空数组：return { ...state, listOfThings: [] }。这会导致组件显示正在再次获取数据。
• 当所有异步 redux 操作都经过 REQUEST -> SUCCESS/FAILURE 循环并使用数据填充存储时，连接的组件将自动呈现它。这是它自己的章节，如果您需要更多信息，请查看redux async actions。
• 棘手的部分是组件和它们正在呈现的应用程序之间的相互依赖关系。例如，如果两个不同的仪表板组件想要获取并呈现当前日期范围内的state.listOfThings，您不希望获取此数据两次。因此，需要有一种方法来检测 1) 数据范围已更改，但 2) 获取 listOfThings 的请求已经在进行中。这通常使用状态中的布尔标志完成：state.isFetchingListOfThings。获取此数据的异步操作会导致 reducer 将此标志设置为 true。您的组件需要意识到这一点并有条件地调度操作：if (props.rangeStart !== nextProps.rangeStart && !nextProps.isFetchingListOfThings) { props.fetchListOfThings(); }。