Понимание связанных .map и .filter с функциями .dispatch и arrow в рендеринге на стороне сервера React

Question

Я пришел из простого опыта работы в 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) работает для вызова и ожидания всех необходимых вызовов данных.

Answer 1

Вы просто модифицируете массив со вторыми filter и map - вы filter исключаете неподходящие элементы, вы map переводите их в формат, который будет использовать ваш следующий вызов filter, и, наконец,вы map из них в формате для вашего Promise.all вызова.

Promise.all - это метод Promise, который при наличии итеративной коллекции разрешается только тогда, когда все разрешимые элементыв коллекции решили.По сути, он ожидает, пока все обещания в коллекции не будут разрешены индивидуально, then выполняет функцию успеха.