Redux code splitting

Before

Partner / App / Pages / ClientsList / reducer.js

After

Partner / App / Pages / ClientsList / reducer.js

Before

Partner / App / Pages / ClientsList / saga.js

After

Partner / App / Pages / ClientsList / saga.js

Before

Partner / App / Pages / ClientsList / index.js

export default createPageComponentWithRouter(ClientsListRoot, rootReducer, partnerSagasWrapper(clientListRootSaga));

After

Partner / App / Pages / ClientsList / index.js

export default createPageComponentWithRouter(ClientsListRoot, rootReducers);

New boi

Partner / App / Components / Client / Container.jsx

New boi

Partner / App / Components / Client / Container.jsx

export const ClientContainer = (props) => {
    const reducersInjected = useInjectableReducers({
        client: clientReducer,
        clientPage: clientPageReducer,
        clientHtmlBlocks: clientHtmlBlocksReducer,
        clientMainBlock: clientMainBlockReducer,
        clientBillsList: clientBillsListReducer,
        clientManagersList: clientManagersListReducer,
        clientSales: clientSalesReducer,
        clientContactsAndRelations: clientContactsAndRelationsReducer
    });

    const sagasInjected = useInjectableSagas([
        clientRootSagas,
        clientInfoSagas,
        clientBillsListSagas,
        clientSalesSagas,
        contactsAndRelationsRootSaga,
        clientManagersListSagas
    ]);

    if (!reducersInjected || !sagasInjected) {
        return null;
    }

    return <ClientWrapper {...props} />;
};

New boi

Partner / App / Components / Client / Container.jsx

export const ClientContainer = (props) => {
    const reducersInjected = useInjectableReducers({
        client: clientReducer,
        clientPage: clientPageReducer,
        clientHtmlBlocks: clientHtmlBlocksReducer,
        clientMainBlock: clientMainBlockReducer,
        clientBillsList: clientBillsListReducer,
        clientManagersList: clientManagersListReducer,
        clientSales: clientSalesReducer,
        clientContactsAndRelations: clientContactsAndRelationsReducer
    });

    const sagasInjected = useInjectableSagas([
        clientRootSagas,
        clientInfoSagas,
        clientBillsListSagas,
        clientSalesSagas,
        contactsAndRelationsRootSaga,
        clientManagersListSagas
    ]);

    if (!reducersInjected || !sagasInjected) {
        return null;
    }

    return <ClientWrapper {...props} />;
};

New boi

Partner / App / Components / Client / Container.jsx

export const ClientContainer = (props) => {
    const reducersInjected = useInjectableReducers({
        client: clientReducer,
        clientPage: clientPageReducer,
        clientHtmlBlocks: clientHtmlBlocksReducer,
        clientMainBlock: clientMainBlockReducer,
        clientBillsList: clientBillsListReducer,
        clientManagersList: clientManagersListReducer,
        clientSales: clientSalesReducer,
        clientContactsAndRelations: clientContactsAndRelationsReducer
    });

    const sagasInjected = useInjectableSagas([
        clientRootSagas,
        clientInfoSagas,
        clientBillsListSagas,
        clientSalesSagas,
        contactsAndRelationsRootSaga,
        clientManagersListSagas
    ]);

    if (!reducersInjected || !sagasInjected) {
        return null;
    }

    return <ClientWrapper {...props} />;
};

Loadable

+++

Явное разделение на модули
Code splitting
Нет (или почти) упячных прослоек rootSaga, rootReducer
Сложнее воткнуть модуль в сторе не пойми куда

???

Что подключать сразу, а что потом?
Неконсистентность подхода (есть общие штуки вроде componentsMetaInfo, сейчас по-разному все модули подключаются)
Дебаггинг