diff --git a/src/app/components/pages/Home/Home.tsx b/src/app/components/pages/Home/Home.tsx
index ab0c3782..ae2f2d1c 100644
--- a/src/app/components/pages/Home/Home.tsx
+++ b/src/app/components/pages/Home/Home.tsx
@@ -2,46 +2,30 @@
import React, { useEffect, ReactElement } from 'react';
import { useDispatch, useSelector } from 'react-redux';
-import { useAlien } from '~/store/config/alienStore';
+import { AlienResult } from '~/store/config/alienStore/useAlien';
-// import Spinner from '~/components/base/Spinner';
-// import ProductCard from '~/components/common/ProductCard';
-//
-// import { fetchProducts } from '~/store/modules/products/actions';
-// import { getProducts } from '~/store/modules/products/selectors';
-//
-// import { ProductsStateType } from '~/store/modules/products/types';
+import Spinner from '~/components/base/Spinner';
+import ProductCard from '~/components/common/ProductCard';
+
+import { ProductsStateType } from '~/store/modules/products/types';
import './Home.scss';
-const Home = (): ReactElement => {
- const dispatch = useDispatch();
- // const { isLoading, products, error }: ProductsStateType = useSelector(getProducts);
+type PropsType = AlienResult;
- // useEffect(() => {
- // dispatch(fetchProducts(`/products`));
- // }, [dispatch]);
- const result = useAlien({
- getModule: () => import('~/store/modules/products'),
- });
+const Home = (props: PropsType): ReactElement => {
+ const dispatch = useDispatch();
+ const { isLoading, products, error }: ProductsStateType = useSelector(props.selectors.getProducts);
- // const selector = result ? result.selectors.getProducts : (): {} => ({});
-
- // const { isLoading, products, error } = useSelector(selector);
-
useEffect(() => {
- if (result) {
- dispatch(result.actions.fetchProducts(`/products`));
- }
- }, [dispatch, result]);
-
- console.log('result', result);
+ dispatch(props.actions.fetchProducts(`/products`));
+ }, [dispatch, props.actions]);
return (
Shop
- {/* {error ?
{error.message} : null}
+ {error ?
{error.message} : null}
{isLoading ? (
@@ -58,7 +42,7 @@ const Home = (): ReactElement => {
))
- : null} */}
+ : null}
);
diff --git a/src/app/components/routing/Routing.tsx b/src/app/components/routing/Routing.tsx
index dd42d47f..1eb01051 100755
--- a/src/app/components/routing/Routing.tsx
+++ b/src/app/components/routing/Routing.tsx
@@ -1,14 +1,20 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
import React, { ReactElement } from 'react';
import { Route } from 'react-router-dom';
import Layout from '~/components/core/Layout';
+import withAlien from '~/store/config/alienStore/withAlien';
import Home from '~/components/pages/Home';
const Routing = (): ReactElement => (
-
+ withAlien(Home, () => import('~/store/modules/products'))}
+ />
);
diff --git a/src/app/store/config/alienStore/useAlien.tsx b/src/app/store/config/alienStore/useAlien.tsx
index 60e28395..fcf6d097 100644
--- a/src/app/store/config/alienStore/useAlien.tsx
+++ b/src/app/store/config/alienStore/useAlien.tsx
@@ -11,6 +11,9 @@ export interface ReduxModule {
actions: {
[K: string]: ActionCreator;
};
+ selectors?: {
+ [K: string]: (state: S) => T;
+ };
}
export type AlienResult = Omit;
@@ -41,14 +44,14 @@ function useAlien(alienModule: AlienModule): AlienResult | null {
useEffect(() => {
(async (): Promise => {
try {
- const { reducers, actions } = await alienModule.getModule();
+ const { reducers, actions, selectors } = await alienModule.getModule();
const key = Object.keys(reducers).shift();
if (key) {
injectReducers(key, reducers[key]);
store.replaceReducer(rootReducer);
}
- setAlien({ actions });
+ setAlien({ actions, selectors });
} catch (err) {
setAlien(err);
}
diff --git a/src/app/store/config/alienStore/withAlien.test.tsx b/src/app/store/config/alienStore/withAlien.test.tsx
index ac976ecc..26ddee00 100644
--- a/src/app/store/config/alienStore/withAlien.test.tsx
+++ b/src/app/store/config/alienStore/withAlien.test.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode, ComponentType } from 'react';
+import React, { ReactElement, ReactNode, FunctionComponent } from 'react';
import { Store, AnyAction } from 'redux';
import { Provider } from 'react-redux';
import { renderHook } from '@testing-library/react-hooks';
@@ -18,7 +18,7 @@ type WrapperProps = {
};
// eslint-disable-next-line react/prop-types
-const wrapper: ComponentType = ({ children }) => (
+const wrapper: FunctionComponent = ({ children }) => (
{children}
);
@@ -54,8 +54,6 @@ describe('test "withAlien"', () => {
wrapper,
});
- expect(result.current.props).toStrictEqual({});
-
await waitForNextUpdate();
expect(result.current.props.actions).toStrictEqual(reduxModule.actions);
diff --git a/src/app/store/config/alienStore/withAlien.tsx b/src/app/store/config/alienStore/withAlien.tsx
index fb49c6e9..b65e8d1e 100644
--- a/src/app/store/config/alienStore/withAlien.tsx
+++ b/src/app/store/config/alienStore/withAlien.tsx
@@ -1,12 +1,13 @@
-import React, { ReactElement, ComponentType } from 'react';
+import React, { ReactElement, ComponentType, ReactNode } from 'react';
import useAlien, { ReduxModule, AlienResult } from './useAlien';
interface WithAlienProps {
+ children?: ReactNode;
actions: AlienResult['actions'];
}
-function withAlien(
+function WithAlien
(
Component: ComponentType
,
getModule: () => Promise,
): ReactElement | null {
@@ -17,7 +18,13 @@ function withAlien
(
getModule,
});
- return ;
+ if (alienResult) {
+ return ;
+ }
+
+ return null;
+ // return ;
+ // return typeof props.children === 'function' ? props.children() : props.children;
}
-export default withAlien;
+export default WithAlien;