同步 Async Redux 操作以进行乐观提取

Question

我正在使用 Redux 构建产品列表网格（就像在电子商务网站主页中一样）。用户可以无限滚动，并且在滚动时从服务器加载项目。在空闲时间还有一个抢先获取，用于下一批项目。

我已将我的 redux 操作（部分）建模如下：

FETCH_PRODUCTS_REQUEST：发起请求时调度
FETCH_PRODUCTS_SUCCESS：当前面的请求成功时调度
LOAD_PRODUCTS：当用户滚动到页面底部附近时调度，因此预取项目可以加载到 DOM.

在中间 LOAD_PRODUCTS 期间，我可以设置超时以调度 FETCH_PRODUCTS_REQUEST 以便抢先获取下一批的项目集。

但是，我不完全确定如何在初始页面加载时同步这些操作（即，当 ProductGrid 组件已安装时）。理想情况下，我想在组件安装上发送 FETCH_PRODUCTS_REQUEST 然后等待 FETCH_PRODUCTS_SUCCESS 发生然后发送LOAD_PRODUCTS。

考虑到 Redux 中的单向数据流，我不清楚如何确保初始 FETCH_PRODUCTS_SUCCESS 已被解雇（即我的商店具有抢占式数据），然后我才能分派 LOAD_PRODUCTS 以将此数据渲染到 DOM 上。

我正在使用 redux-saga 库来分派异步操作。

如有任何帮助，我们将不胜感激！

Answer 1

一种天真的方法是存储应用程序的初始化状态。

例如：

function initialized(state = false, action) {
  switch (action.type) {
    case FETCH_PRODUCTS_SUCCESS:
      return true;
    default:
      return state;
  }
}

这将是 false 最初加载页面并在第一次成功请求产品后切换到 true。

Answer 2

这里的关键是 ProductGrid 组件知道它正在调度的 FETCH_PRODUCTS_REQUEST 是否是一个初始化操作（它发生在 componentDidMount 内部）。我添加了一个 isInitial 标志作为操作负载的一部分。然后 redux-saga 中间件可以查看这个值，然后决定是否必须在接收到 FETCH_PRODUCTS_SUCCESS 时分派 LOAD_PRODUCTS（这是有效的，因为 redux sagas 基于生成器，所以一旦结果由async API，saga 可以根据动作标志发送相应的动作来响应）。

同步 Async Redux 操作以进行乐观提取

Synchronising Async Redux actions for optimistic fetching

javascript

reactjs

redux

redux-saga