react-redux ssr 异步 api 调用未按预期工作答案

【问题标题】：react-redux ssr async api call not working as expectedreact-redux ssr 异步 api 调用未按预期工作
【发布时间】：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 后得到响应。

【问题讨论】：

标签： reactjs redux promise react-redux redux-thunk

【解决方案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));
    },
  },
];

【讨论】：