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, сейчас по-разному все модули подключаются)
- Дебаггинг
Redux code splitting
By shimmy
