reactjs - react-redux ssr 异步 api 调用未按预期工作
问题描述
我正在尝试为我的 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 后得到响应。
解决方案
- 您
loadData
在/:pageNumber/page
路由中的函数返回承诺数组而不是承诺。因此,当您将嵌套数组传递给Promise.all()
函数时,它会立即解析。 - 您在路由中有不正确
loadData
的函数签名/
,因为您将 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));
},
},
];
推荐阅读
- javascript - 我想用我在另一个 php 文件中使用 ajax 从我的数据库中获取的数据填充我的表单元素
- csv - 在数据库中插入保存\n
- hibernate - JPA 标准 - 如何使用 EXTRACT(字段 FROM 时间戳)?
- qt - Qt如何导入语言绑定
- android - 无法使用布局作为根视图通过 xml 进行数据绑定
- sql - 如何从字符串中拆分值并将其放在其他字段中
- node.js - 删除 sql 语句不起作用 - 尝试使用 recipe_id 删除配方
- node.js - 如何使用 ExpressJS 将请求值传播到上下文?
- c# - N 层架构,如何加入我的表?
- javascript - 覆盖 ngOnDestroy