在React服务器端呈现中使用.dispatch和箭头函数了解链接的.map和.filter

Posted 2021-04-03

我来自一个简单的Express背景，并学习如何使用React进行服务器端渲染。

我遇到了一个示例应用程序，其路由定义如下：

export default [
    {
        path: "/",
        component: Home,
        exact: true,
    },
...
}

服务器处理这样的路由：

app.get( "/*", ( req, res ) => {
...
 const dataRequirements =
        routes
            .filter( route => matchPath( req.url, route ) ) // filter matching paths
            .map( route => route.component ) // map to components
            .filter( comp => comp.serverFetch ) // check if components have data requirement
            .map( comp => store.dispatch( comp.serverFetch( ) ) ); // dispatch data requirement

    Promise.all( dataRequirements ).then( ( ) => {
        const jsx = (
                 <ReduxProvider store={ store }>
                     <StaticRouter context={ context } location={ req.url }>

我理解路由的模块性，以及这一系列方法如何实现任何所需数据的一般过程。据我所知：

1. 路径对象通过过滤器拉出
2. 要汇集到LinkRouter中的必要路由被映射到它们所需的组件

这是我朦胧的地方，因为我不明白什么调用.filter（）。map（）。filter（）。map（）实际上对数据类型做了什么，我从来没有看到方法调用的分层并且找不到解释它的资源。

我理解Promise.all调用所有数据，然后等待并调用没有参数的箭头函数。但我在第3次和第4次调用过滤和映射时遇到问题，以及Promise.all（dataRequirements）如何调用并等待所有必要的数据调用。

答案

你只是用第二个filter和map进一步修改数组 - 你filter不合适的元素，你map那些你的下一个filter调用将使用的格式，最后你map那些为你的Promise.all调用格式。

Promise.all是一种Promise方法，当给定可迭代集合时，只有当集合中的所有可解析元素都已解析时才会解析。它基本上等待，直到集合中的所有承诺都被单独解决，then执行成功函数。