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中间件可以查看此值，然后决定是否必须在接收LOAD_PRODUCTS时调度FETCH_PRODUCTS_SUCCESS（这是因为redux sagas基于生成器，因此一旦结果由在异步API中，传奇可以通过基于动作标志发送相应的动作来响应。

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

2 个答案: