react-redux s-s-r 异步 api 调用未按预期工作

Posted 2023-02-22

【中文标题】react-redux s-s-r 异步 api 调用未按预期工作

【英文标题】：react-redux s-s-r async api call not working as expected

【发布时间】：2020-08-19 21:38:02

【问题描述】：

我正在尝试为我的 react 应用程序实现服务器端渲染。我正在使用 redux，thunk 也。

当我尝试调度操作以调用该页面的 API 时。我想等待 api 调用完成，然后在服务器上呈现 html 并发送它。但是在我得到 api 的响应之前，我的承诺就已经解决了。

这是我的代码。

const promises = [];
  routes.map(( route, match ) => 
    if (route && route.loadData) 
      const loadRes = route.loadData(store, match);
      console.log('l', loadRes);
      promises.push(loadRes);
    
  );

  Promise.all(promises)
    .catch(() => promises)
    .then(() => 
      console.log('caall');
      render(req, res, store);
    );

我的路线

export default [
  
    path: '/',
    component: Home,
    exact: true,
    loadData: (dispatch) => dispatch(getNews(0)),
  ,
  
    path: '/:pageNumber/page',
    component: Home,
    loadData: (store, match) => 
      return [store.dispatch(getNews(match.params.pageNumber))];
    ,
  ,
];

这是我的行动

export const getNews = (page) => async (dispatch) => 
  const response = await axios.get(
    `http://hn.algolia.com/api/v1/search?page=$page || 0`
  );
  const res = await getHits(response.data);
  console.log('hit', res.length);

  dispatch( type: 'UpdateNews', payload: res );
;

我不知道我在哪里做错了。我在渲染 html 后得到响应。

【参考方案1】：

/:pageNumber/page 路由中的 loadData 函数返回承诺数组而不是承诺。因此，当您将嵌套数组传递给 Promise.all() 函数时，它会立即解析。 / 路由中的 loadData 函数签名不正确，因为您将 store 作为第一个参数传递，而不是 dispatch。

也就是说，你应该如下修改你的路由代码：

export default [
  
    path: '/',
    component: Home,
    exact: true,
    loadData: ( dispatch ) => dispatch(getNews(0)),
  ,
  
    path: '/:pageNumber/page',
    component: Home,
    loadData: (store, match) => 
      return store.dispatch(getNews(match.params.pageNumber));
    ,
  ,
];