react redux ssr async api调用未按预期工作

Question

我正在尝试为我的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。

Answer 1

1. /:pageNumber/page路由中的loadData函数返回promise数组，而不是promise。因此，当您将嵌套数组传递到Promise.all()函数时，它会立即解析
2. 您在/路由中有不正确的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));
},
},
];