Using immer in reducers

Author: tduyng

src/components/Auth/Auth.reducers.ts

@@ -1,4 +1,5 @@
 import * as types from './Auth.constants';
+import produce from 'immer';
 
 let userType: IUser = {
   id: '',
@@ -14,47 +15,38 @@ const initialState = {
   user: userType,
 };
 
-export const authReducer = (state = initialState, action: ActionRedux) => {
-  const { type, payload } = action;
-  switch (type) {
-    case types.USER_LOADED:
-      return {
-        ...state,
-        isAuthenticated: true,
-        loading: false,
-        token: payload.id,
-        user: payload,
-      };
-    case types.LOGIN_SUCCESS:
-    case types.REGISTER_SUCCESS:
-      localStorage.setItem('user', JSON.stringify(payload));
-      return {
-        ...state,
-        ...payload,
-        isAuthenticated: true,
-        loading: false,
-        user: payload,
-      };
-    case types.LOGIN_FAILED:
-    case types.AUTH_ERROR:
-    case types.REGISTER_FAILED:
-      localStorage.removeItem('user');
-      return {
-        ...state,
-        token: null,
-        isAuthenticated: false,
-        loading: false,
-      };
-    case types.LOGOUT:
-      localStorage.removeItem('user');
-      return {
-        ...state,
-        token: null,
-        isAuthenticated: false,
-        loading: false,
-      };
+export const authReducer = (state = initialState, action: ActionRedux) =>
+  produce(state, draft => {
+    switch (action.type) {
+      case types.USER_LOADED:
+        draft.isAuthenticated = true;
+        draft.loading = false;
+        draft.token = action.payload.id;
+        draft.user = action.payload;
+        break;
+      case types.LOGIN_SUCCESS:
+      case types.REGISTER_SUCCESS:
+        localStorage.setItem('user', JSON.stringify(action.payload));
+        draft.isAuthenticated = true;
+        draft.loading = false;
+        draft.user = action.payload;
+        break;
+      case types.LOGIN_FAILED:
+      case types.AUTH_ERROR:
+      case types.REGISTER_FAILED:
+        localStorage.removeItem('user');
+        draft.token = null;
+        draft.isAuthenticated = false;
+        draft.loading = false;
+        break;
+      case types.LOGOUT:
+        localStorage.removeItem('user');
+        draft.token = null;
+        draft.isAuthenticated = false;
+        draft.loading = false;
+        break;
 
-    default:
-      return state;
-  }
-};
+      default:
+        return state;
+    }
+  });

src/components/Products/Product.reducers.ts

@@ -1,4 +1,5 @@
 import * as types from './Product.constants';
+import produce from 'immer';
 
 const products = [] as Product[];
 const initialState = {
@@ -8,56 +9,42 @@ const initialState = {
   products: products,
 };
 
-export const productReducer = (state = initialState, action) => {
-  const { type, payload } = action;
+export const productReducer = (state = initialState, action) =>
+  produce(state, draft => {
+    const { type, payload } = action;
+    switch (type) {
+      case types.GET_PRODUCTS:
+        draft.products = payload;
+        draft.loading = false;
+        break;
+      case types.GET_PRODUCT:
+        draft.product = payload;
+        draft.loading = false;
+        break;
+      case types.CREATE_PRODUCT:
+        draft.products = [payload, ...state.products];
+        draft.loading = false;
+        break;
+      case types.UPDATE_PRODUCT:
+        draft.product = payload;
+        draft.loading = false;
+        break;
+      case types.DELETE_PRODUCT:
+        draft.products = state.products.filter(p => p.id !== payload);
+        draft.loading = false;
+        break;
+      case types.PRODUCT_ERROR:
+        draft.error = payload;
+        draft.loading = false;
+        draft.products = [];
+        draft.product = null;
+        break;
 
-  switch (type) {
-    case types.GET_PRODUCTS:
-      return {
-        ...state,
-        products: payload,
-        loading: false,
-      };
-    case types.GET_PRODUCT:
-      return {
-        ...state,
-        product: payload,
-        loading: false,
-      };
-    case types.CREATE_PRODUCT:
-      return {
-        ...state,
-        products: [payload, ...state.products],
-        loading: false,
-      };
-    case types.UPDATE_PRODUCT:
-      return {
-        ...state,
-        product: payload,
-        loading: false,
-      };
-    case types.DELETE_PRODUCT:
-      return {
-        ...state,
-        products: state.products.filter(p => p.id !== payload),
-        loading: false,
-      };
-    case types.PRODUCT_ERROR:
-      return {
-        ...state,
-        error: payload,
-        loading: false,
-        products: [],
-        product: null,
-      };
-    case types.CLEAR_PRODUCT:
-      return {
-        ...state,
-        product: null,
-        loading: false,
-      };
-
-    default:
-      return state;
-  }
-};
+      case types.CLEAR_PRODUCT:
+        draft.product = null;
+        draft.loading = false;
+        break;
+      default:
+        return state;
+    }
+  });