refactor(products): use payload-based action

arrange apiMiddleware to match payload actions for fetchProducts reducer improves #34, #35
aneurysmjs · Sep 23, 2019 · c2bb484 · c2bb484
1 parent bb198b7
commit c2bb484
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 34 deletions.
diff --git a/src/app/store/config/enhancer.js b/src/app/store/config/enhancer.js
@@ -17,6 +17,7 @@ const devtools =
   /* eslint-enable */
 const composeEnhancers = devtools || compose;
 // eslint-disable-next-line no-underscore-dangle
+// $FlowFixMe
 const enhancer: EnhancerType = composeEnhancers(applyMiddleware(...middlewares));
 
 export default enhancer;
diff --git a/src/app/store/config/middlewares/apiMiddleware/apiMiddleware.js b/src/app/store/config/middlewares/apiMiddleware/apiMiddleware.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 // @flow strict
 import type { Dispatch, Middleware } from 'redux';
 
@@ -8,18 +7,27 @@ import type { Actions, AsyncAction } from '@/store/types/Actions';
 type ApiMiddlewareType = Middleware<State, Actions, Dispatch<AsyncAction>>;
 
 const apiMiddleware: ApiMiddlewareType = ({ dispatch, getState }) => (next) => (action) => {
-  const {
-    types,
-    callAPI,
-    shouldCallAPI = (s = true) => s,
-    payload = {},
-  } = action;
+  let meta = {};
+
+  if (action.meta) {
+    meta = { ...action.meta };
+  }
 
-  if (!types) {
+  if (!action.meta && !meta.types) {
     // Normal action: pass it on
     return next(action);
   }
 
+  const {
+    payload = {},
+  } = action;
+
+  const {
+    types,
+    callAPI,
+    shouldCallAPI = (s = true) => s,
+  } = meta;
+
   if (
     !Array.isArray(types)
       || types.length !== 3
@@ -40,22 +48,20 @@ const apiMiddleware: ApiMiddlewareType = ({ dispatch, getState }) => (next) => (
   const [requestType, successType, failureType] = types;
 
   dispatch({
-    ...payload,
+    payload: { ...payload },
     type: requestType,
   });
   // $FlowFixMe
   return (async () => {
     try {
       const response = await callAPI();
       return dispatch({
-        ...payload,
-        response,
+        payload: { response },
         type: successType,
       });
     } catch (error) {
       return dispatch({
-        ...payload,
-        error,
+        payload: { error },
         type: failureType,
       });
     }

diff --git a/src/app/store/modules/products/actions/fetchProducts.js b/src/app/store/modules/products/actions/fetchProducts.js
@@ -13,16 +13,18 @@ import { getProducts } from '@/store/modules/products/selectors';
 export default function fetchProducts(query: string = ''): AsyncAction {
   return {
     type: ASYNC_ACTION_TYPE,
-    types: [
-      types.GET_PRODUCTS_REQUEST,
-      types.GET_PRODUCTS_SUCCESS,
-      types.GET_PRODUCTS_FAILURE,
-    ],
-    callAPI: () => api.get<string, ProductsType>(query),
-    shouldCallAPI: (state) => {
-      const products = getProducts(state);
-      // $FlowFixMe - это не должно орать
-      return !products.length;
+    meta: {
+      types: [
+        types.GET_PRODUCTS_REQUEST,
+        types.GET_PRODUCTS_SUCCESS,
+        types.GET_PRODUCTS_FAILURE,
+      ],
+      callAPI: () => api.get<string, ProductsType>(query),
+      shouldCallAPI: (state) => {
+        const products = getProducts(state);
+        // $FlowFixMe - это не должно орать
+        return !products.length;
+      },
     },
   };
 }
diff --git a/src/app/store/modules/products/reducers/products.js b/src/app/store/modules/products/reducers/products.js
@@ -24,8 +24,10 @@ export default createReducer<ProductsType, ProductActionType>(initialState, {
   },
   [GET_PRODUCTS_SUCCESS](state, action) {
     const {
-      response: {
-        data,
+      payload: {
+        response: {
+          data,
+        },
       },
     } = action;
     return {
@@ -35,7 +37,7 @@ export default createReducer<ProductsType, ProductActionType>(initialState, {
     };
   },
   [GET_PRODUCTS_FAILURE](state, action) {
-    const { error } = action;
+    const { payload: { error } } = action;
     return {
       ...state,
       isLoading: false,

diff --git a/src/app/store/types/Actions.js b/src/app/store/types/Actions.js
@@ -12,8 +12,10 @@ export type Actions =
 
 export type AsyncAction = {
   type: string,
-  types?: Array<string>,
-  callAPI?: () => Promise<*>,
-  shouldCallAPI?: (State) => boolean,
   payload?: *,
+  meta?: {
+    types: Array<string>,
+    callAPI: () => Promise<*>,
+    shouldCallAPI?: (State) => boolean,
+  }
 };
diff --git a/src/app/store/types/ProductsType.js b/src/app/store/types/ProductsType.js
@@ -1,6 +1,4 @@
 // @flow strict
-import type { Action } from 'redux';
-
 import type { Response, ResponseError } from '@/store/types/CommonType';
 
 export type ProductType = {
@@ -23,7 +21,6 @@ export type ProductsType = {
 };
 
 export type ProductActionType = {
-  ...$Exact<Action<string>>,
-  ...$Exact<Response<Array<ProductType>>>,
-  ...$Exact<ResponseError>,
+  type: string,
+  payload: Response<Array<ProductType>> & ResponseError,
 };