同步异步 Redux 操作以进行乐观获取答案

【问题标题】：Synchronising Async Redux actions for optimistic fetching同步异步 Redux 操作以进行乐观获取
【发布时间】：2017-08-19 19:39:40
【问题描述】：

我正在使用 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 库来调度异步操作。

任何帮助将不胜感激！

【问题讨论】：

标签： javascript reactjs redux redux-saga

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

例如：

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

初始加载页面时为false，第一次成功请求产品后切换为true。

【讨论】：

我继续进行类似的操作，但不是将状态存储在减速器中，而是知道初始负载（在组件安装时）的组件基本上可以将此信息作为操作的一部分发送。然后 redux-saga 中间件可以监听 FETCH_PRODUCTS_REQUEST 并查看是否设置了初始负载，如果设置了，它可以在 FETCH_PRODUCTS_SUCCESS（生成器和暂停）之后调度 LOAD_PRODUCTS。无论如何谢谢！