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

问题描述 投票:0回答:1

我来自一个简单的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)如何调用并等待所有必要的数据调用。

javascript arrays function object ecmascript-6
1个回答
1
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.