[Feat] Redux Store

1. Did some learning on how redux store works from redux.js.org
2. Implemented the initial barebones required for redux state, middleware, reducers and store
3. Given the provider component to the main index.js file
4. Checked the working condition of the initial redux state from redux-devtools

package.json

@@ -3,14 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@redux-devtools/extension": "^3.2.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.2.2",
     "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/all-reducers.js

@@ -0,0 +1,17 @@
+/**
+  * helps to create the combined reducers instance for the redux store
+  **/
+
+/* node module imports */
+import { combineReducers } from "redux";
+
+/* app imports */
+import cardsReducer from "./cards/index.js";
+import gameStateReducer from "./game-state/index.js";
+
+export const reducersCentral = () => {
+  return combineReducers({
+    cards: cardsReducer,
+    gameIsComplete: gameStateReducer
+  });
+};

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

@@ -0,0 +1,5 @@
+let initialState = [];
+
+export default function cardsReducer(state = initialState, action) {
+  return state;
+}

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

@@ -0,0 +1,5 @@
+let initialState = false;
+
+export default function gameStateReducer(state = initialState, action) {
+  return state;
+}

src/app-redux-store/index.js

@@ -0,0 +1,17 @@
+/**
+  * main entry file for the application's redux store
+  **/
+
+/* node modules import */
+import { createStore } from "redux";
+
+/* app imports */
+import { reducersCentral } from "./all-reducers.js";
+import { appMiddlewareCentral } from "./middleware/index.js";
+
+export const appReduxStore = () => {
+  return createStore(
+    reducersCentral(),
+    appMiddlewareCentral()
+  );
+};

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

@@ -0,0 +1,17 @@
+/**
+  * this gives the ability to use middleware along with the redux dev tools instance to track state
+  * changes in the app
+  **/
+
+/* node modules imports */
+import { applyMiddleware } from "redux";
+import { composeWithDevTools } from '@redux-devtools/extension';
+
+/* app imports */
+import { samuraiMiddleware } from "./samurai-api-fetch/index.js";
+
+export const appMiddlewareCentral = () => {
+  return composeWithDevTools(
+    applyMiddleware(samuraiMiddleware)
+  );
+};

src/app-redux-store/middleware/samurai-api-fetch/index.js

@@ -0,0 +1,8 @@
+export const samuraiMiddleware = (storeApi) => {
+  return (next) => {
+    return (action) => {
+      next(action);
+      return;
+    };
+  };
+};

src/index.js

@@ -1,6 +1,15 @@
+/* node modules imports */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { Provider } from "react-redux";
+
+/* app imports */
 import { App } from './App';
+import { appReduxStore } from "./app-redux-store/index.js";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<App />);
+root.render(
+  <Provider store={appReduxStore()}>
+    <App />
+  </Provider>
+);