improvement(routing): use "withStoreModule" to inject reducer dynamic…

…ally

#improves #43

src/app/components/routing/Routing.tsx

@@ -1,15 +1,25 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, ComponentType } from 'react';
 import { Route } from 'react-router-dom';
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-// @ts-ignore
+
 import loadable from '@loadable/component'; // eslint-disable-line @typescript-eslint/no-unused-vars
-import Layout from '~/components/core/Layout';
+import { withStoreModule } from '~/store/config/dynoStore';
 
-// const Home = loadable(() => import(/* webpackChunkName: "Home" */'~/pages/Home/Home'));
+import Layout from '~/components/core/Layout';
 
-import Home from '~/components/pages/Home';
+/**
+ * @des by the moment it has be like this since @loable/babel-plugin gets mad:
+ *
+ * loadable: multiple import calls inside `loadable()` function are not supported.
+ *
+ * also if we remove @loable/babel-plugin, we no longer have code-splitting for SSR
+ */
+const HomeModule = (): Promise<{ default: ComponentType }> =>
+  withStoreModule(
+    import(/* webpackChunkName: "Home" */ '~/components/pages/Home'),
+    import(/* webpackChunkName: "productsReducer" */ '~/store/modules/products/reducers'),
+  );
 
-// const Loading = () => (<div>...</div>);
+const Home = loadable(HomeModule);
 
 const Routing = (): ReactElement => (
   <main>