Javascript 如何分派多个动作创建者（React+；Redux+；服务器端渲染）

我一直在学习一门关于如何使用React和Redux构建服务器端渲染应用程序的很棒的课程，但现在我遇到了一个课程没有涵盖的情况，我自己也无法解决

请考虑下面的组件（这是非常基本的，除了底部的导出部分）：

但这并不好，因为我需要返回所有数据。。。请记住，导出的组件将以以下路由配置结束：

const Routes = [
    {
        ...App, 
        routes: [
            {
                ...HomePage, // Here it is!
                path: '/', 
                exact: true
            },
            {
                ...LoginPage, 
                path: '/login'
            },              
            {
                ...SinglePostPage, 
                path: '/:slug'
            },
            {
                ...ArchivePage, 
                path: '/tag/:tag'
            },                                      
        ]
    }
];

以下是当某条路线需要组件时，如何使用loadData函数：

app.get( '*', ( req, res ) => {

    const store = createStore( req ); 

    const fetchedAuthCookie = req.universalCookies.get( authCookie ); 

    const promises = matchRoutes( Routes, req.path ).map( ( { route } ) => {
        return route.loadData ? route.loadData( store, req.path, fetchedAuthCookie ) : null;
    }).map( promise => {
        if( promise ) {
            return new Promise( ( resolve, reject ) => {
                promise.then( resolve ).catch( resolve ); 
            }); 
        }
    });

    ...

}

此外，这里还有一个动作创建者触发的动作示例。他们都承诺：

export const fetchHomePageData = () => async ( dispatch, getState, api ) => {

    const posts = await api.get( allPostsEP );

    dispatch({
        type: 'FETCH_POSTS_LIST', 
        payload: posts
    });             

}

和减速器：

export default ( state = {}, action ) => {
    switch( action.type ) {
        case 'FETCH_POSTS_LIST':
            return {
                ...state, 
                homepagePosts: action.payload.data 
            }                                       
        default: 
            return state; 
    }
}

---

所以，你的行动回报了一个承诺，你在问，你怎么能回报不止一个承诺。使用：

但是。。。记住Promise.all将在其所有承诺解决时解决，并且它将返回一个值数组：

function loadData({ dispatch }) {
  return Promise.all([
    dispatch( fetchFeaturedNews() ),
    dispatch( fetchHomePageData() ),
  ]).then(listOfResults => {
    console.log(Array.isArray(listOfResults)); // "true"
    console.log(listOfResults.length); // 2
  });
}

---

因此，您可能希望以不同的方式处理它。

我可能遗漏了一些内容，但您不能直接返回数组吗？你能展示一下你的

loadData

函数以后是如何使用的吗？@TomaszMularczyk嗨，我已经更新了我的答案。谢谢你的关注@grazianodev，你能解释一下吗，但这不是很好，因为我需要返回所有数据？“要返回的数据”是什么意思？@MayankShukla嗯，现在loadData函数只返回由

fetchHomePageData（）获取的数据。

；我想要的是loadData函数返回它和由

fetchFeaturedNews（）

获取的数据。换句话说，我希望它返回两组数据，而不是一组，这样它们都可以映射到我问题最底层的

app.get（…）

函数中。将它们组合成一个数组，如@tomasumularczyk，听起来不错，但我似乎无法让它工作……可能会显示fetch的实现。。。他们会回来吗？这正是我想要的。非常感谢你！非常感谢。但是在MapStateTops函数中如何处理这个问题，我只得到第二个请求的结果。

export default ( state = {}, action ) => {
    switch( action.type ) {
        case 'FETCH_POSTS_LIST':
            return {
                ...state, 
                homepagePosts: action.payload.data 
            }                                       
        default: 
            return state; 
    }
}

function loadData({ dispatch }) {
  return Promise.all([
    dispatch( fetchFeaturedNews() ),
    dispatch( fetchHomePageData() ),
  ]);
}

function loadData({ dispatch }) {
  return Promise.all([
    dispatch( fetchFeaturedNews() ),
    dispatch( fetchHomePageData() ),
  ]).then(listOfResults => {
    console.log(Array.isArray(listOfResults)); // "true"
    console.log(listOfResults.length); // 2
  });
}