[Feat] Redux Toolkit

The application is now using redux toolkit instead of directly using redux/react-redux and other npm
package dependencies directly. Actions folder in the redux store is now deleted as RTK will
automatically create actions through createSlice

package.json

@@ -3,18 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@redux-devtools/extension": "^3.2.3",
+    "@reduxjs/toolkit": "^1.9.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.2.2",
-    "immer": "^9.0.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",
     "react-scripts": "5.0.1",
     "react-uuid": "^2.0.0",
-    "redux": "^4.2.0",
     "sass": "^1.56.0",
     "web-vitals": "^2.1.4"
   },

src/app-redux-store/middleware/cards/index.js

@@ -1,21 +1,21 @@
 /* app imports */
-import { createFreshCardsAction, rollDiceAction } from "@appReduxStore/actions/card-actions.js";
+import { createFreshCards, rollDice } from "@appReduxStore/reducers/cards/index.js";
 import createFreshDeck from "./create-fresh-deck.js";
 
 export const cardsMiddleware = (storeApi) => {
   return (next) => {
     return (action) => {
-      if (action.type === createFreshCardsAction().type) {
+      if (action.type === createFreshCards().type) {
         setTimeout(() => {
           const freshDeckOfCards = createFreshDeck();
-          action.payload = freshDeckOfCards;
-          action.setIsLoading(false);
+          action.payload.freshDeckOfCards = freshDeckOfCards;
+          action.payload.setIsLoading(false);
           next(action);
         }, 2000);
       }
-      else if (action.type === rollDiceAction().type) {
+      else if (action.type === rollDice().type) {
         setTimeout(() => {
-          action.setIsLoading(false);
+          action.payload.setIsLoading(false);
           next(action);
         }, 2000);
       }

src/app-redux-store/middleware/game-state/index.js

@@ -1,12 +1,14 @@
 /* app imports */
-import { checkIfGameIsComplete } from "@appReduxStore/actions/game-state-actions.js";
+import { checkIfGameIsComplete } from "@appReduxStore/reducers/game-state/index.js";
 
 export const gameStateMiddleware = (storeApi) => {
   return (next) => {
     return (action) => {
       if (action.type === checkIfGameIsComplete().type) {
         const currentCardsStack = storeApi.getState().cards;
-        action.payload.cards = currentCardsStack;
+        action.payload = {
+          cards: currentCardsStack
+        };
         return next(action);
       }
       else {

src/app-redux-store/middleware/root-middleware.js

@@ -0,0 +1,18 @@
+/**
+  * this gives the ability to use middleware along with the redux dev tools instance to track state
+  * changes in the app
+  **/
+
+/* app imports */
+import { cardsMiddleware } from "./cards/index.js";
+import { gameStateMiddleware } from "./game-state/index.js";
+
+export const rootMiddleware = (getDefaultMiddleware) => {
+  const appMiddleware = getDefaultMiddleware({
+    serializableCheck: {
+      ignoredActions: ['cards/createFreshCards', 'cards/rollDice']
+    }
+  }).concat(cardsMiddleware, gameStateMiddleware);
+
+  return appMiddleware;
+};

src/app-redux-store/reducers/cards/cards-normalizer.js

@@ -2,16 +2,11 @@
   * adviced best practice from redux docs for storage of data in the redux store
   **/
 
-/* node module imports */
-import produce from "immer";
-
 export const arrayToObjectNormalizer = (arrayOfCards) => {
-  let normalized = produce(arrayOfCards, (draft) => {
-    return draft.reduce((composed, card) => {
-      let key = card.id;
-      composed[key] = card;
-      return composed;
-    }, {});
-  });
+  let normalized = arrayOfCards.reduce((composed, card) => {
+    let key = card.id;
+    composed[key] = card;
+    return composed;
+  }, {});
   return normalized;
 };

src/app-redux-store/reducers/cards/generate-deck-on-roll.js

@@ -1,33 +1,29 @@
 /* node module imports */
 import uuid from "react-uuid";
-import produce from "immer";
 
 /* app imports */
 import { generateRandomNumbers } from "@appReduxStore/reducers/cards/generate-random-numbers.js";
 import { getCardMap } from "@appReduxStore/reducers/cards/card-map.js";
 
 export default function generateDeckOnRoll(state) {
-  let updatedDeck = produce(state, (draft) => {
-    const cardMap = getCardMap();
-    return Object.keys(draft).reduce((composed, key) => {
-      let card = draft[key];
+  const cardMap = getCardMap();
+  return Object.keys(state).reduce((composed, key) => {
+    let card = state[key];
 
-      if (card.isLocked) {
-        composed[key] = card;
-      }
-      else {
-        const randNum = String(generateRandomNumbers(1, 10));
-        const key = uuid();
-        composed[key] = {
-          id: key,
-          isLocked: false,
-          name: cardMap[randNum].name,
-          icon: cardMap[randNum].src
-        };
-      }
+    if (card.isLocked) {
+      composed[key] = card;
+    }
+    else {
+      const randNum = String(generateRandomNumbers(1, 10));
+      const key = uuid();
+      composed[key] = {
+        id: key,
+        isLocked: false,
+        name: cardMap[randNum].name,
+        icon: cardMap[randNum].src
+      };
+    }
 
-      return composed;
-    }, {});
-  });
-  return updatedDeck;
+    return composed;
+  }, {});
 }