Merge pull request #106 from tahmid-saj/dev-redux-init

initializing redux

package.json

@@ -25,11 +25,16 @@
  "react-apexcharts": "^1.4.1",
  "react-dom": "^17.0.0 || ^18.0.0",
  "react-google-charts": "^4.0.1",
+ "react-redux": "^9.1.2",
  "react-router-dom": "^6.15.0",
  "react-scripts": "5.0.1",
  "react-slideshow-image": "^4.2.1",
  "react-smart-slider": "^0.1.2",
  "read-chunk": "^4.0.3",
+ "redux": "^5.0.1",
+ "redux-logger": "^3.0.6",
+ "redux-persist": "^6.0.0",
+ "reselect": "^5.1.0",
  "sass": "^1.66.1",
  "styled-components": "^6.1.11",
  "web-vitals": "^2.1.4"

src/index.js

@@ -17,28 +17,36 @@ import { RecipesProvider } from './contexts/shared/recipes/recipes.context';
 import { NutritionTrackerProvider as NutritionTrackerProviderSignedIn } from './contexts/signed-in/nutrition-tracker/nutrition-tracker.context';
 import { CaloriesBurnedProvider as CaloiriesBurnedProviderSignedIn } from './contexts/signed-in/calories-burned/calories-burned.context';
 
+import { Provider } from "react-redux"
+import { persistor, store } from "./store/store"
+import { PersistGate } from "redux-persist/integration/react"
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
  <React.StrictMode>
- <BrowserRouter>
- <ChatBotProvider>
- <NutrientPredictorProvider>
- <NutritionTrackerProviderSignedOut>
- <CaloriesBurnedProviderSignedOut>
- <RecipesProvider>
- <UserProvider>
- <NutritionTrackerProviderSignedIn>
- <CaloiriesBurnedProviderSignedIn>
- <App />
- </CaloiriesBurnedProviderSignedIn>
- </NutritionTrackerProviderSignedIn>
- </UserProvider>
- </RecipesProvider>
- </CaloriesBurnedProviderSignedOut>
- </NutritionTrackerProviderSignedOut>
- </NutrientPredictorProvider>
- </ChatBotProvider>
- </BrowserRouter>
+ <Provider store={ store }>
+ {/* <PersistGate loading={ null } persistor={ persistor }> */}
+ <BrowserRouter>
+ <ChatBotProvider>
+ <NutrientPredictorProvider>
+ <NutritionTrackerProviderSignedOut>
+ <CaloriesBurnedProviderSignedOut>
+ <RecipesProvider>
+ <UserProvider>
+ <NutritionTrackerProviderSignedIn>
+ <CaloiriesBurnedProviderSignedIn>
+ <App />
+ </CaloiriesBurnedProviderSignedIn>
+ </NutritionTrackerProviderSignedIn>
+ </UserProvider>
+ </RecipesProvider>
+ </CaloriesBurnedProviderSignedOut>
+ </NutritionTrackerProviderSignedOut>
+ </NutrientPredictorProvider>
+ </ChatBotProvider>
+ </BrowserRouter>
+ {/* </PersistGate> */}
+ </Provider>
  </React.StrictMode>
 );
 

src/store/middleware/logger.js

@@ -0,0 +1,15 @@
+// redux middlewares
+
+export const loggerMiddleware = (store) => (next) => (action) => {
+ if (!action.type) {
+ return next(action)
+ }
+
+ console.log("type ", action.type)
+ console.log("payload ", action.payload)
+ console.log("currentState ", store.getState())
+
+ next(action)
+
+ console.log("next state ", store.getState())
+}

src/store/root-reducer.js

@@ -0,0 +1,5 @@
+import { combineReducers } from "redux"
+
+export const rootReducer = combineReducers({
+
+})

src/store/store.js

@@ -0,0 +1,33 @@
+import { compose, createStore, applyMiddleware } from "redux"
+import logger from "redux-logger"
+import { persistStore, persistReducer } from "redux-persist"
+import storage from "redux-persist/lib/storage"
+import { rootReducer } from "./root-reducer"
+import { loggerMiddleware } from "./middleware/logger"
+
+// root-reducer
+const middlewares = [
+ process.env.NODE_ENV !== "production" && loggerMiddleware,
+ process.env.NODE_ENV !== "production" && logger
+].filter(Boolean)
+
+const composeEnhancer = (
+ process.env.NODE_ENV !== "production" && window && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+) || compose
+
+// const composedEnhancers = composeEnhancer(applyMiddleware(...middleWares))
+const composedEnhancers = compose(applyMiddleware(...middlewares))
+
+// redux persist
+const persistConfig = {
+ key: "root",
+ storage: storage,
+ blacklist: ["user"]
+}
+
+// const persistedReducer = persistReducer(persistConfig, rootReducer)
+
+// store
+export const store = createStore(rootReducer, undefined, composedEnhancers)
+
+// export const persistor = persistStore(store)

src/utils/reducer/reducer.utils.js

@@ -0,0 +1,4 @@
+// reducer utils
+
+// creating reducer action
+export const createAction = (type, payload) => ({ type, payload })