perf(frontend) : Setup redux toolkit with persist

package.json

@@ -19,7 +19,10 @@
     "postcss": "^8.4.38",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.0",
+    "redux": "^5.0.1",
+    "redux-persist": "^6.0.0",
     "tailwindcss": "^3.4.3"
   },
   "devDependencies": {
@@ -29,6 +32,8 @@
     "@eslint/eslintrc": "^3.0.2",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
+    "@reduxjs/toolkit": "^2.2.3",
+    "@types/redux-persist": "^4.3.1",
     "@typescript-eslint/eslint-plugin": "^7.7.1",
     "@typescript-eslint/parser": "^7.7.1",
     "@vitejs/plugin-react": "^4.2.1",

src/components/home-page.tsx

@@ -1,7 +1,24 @@
 import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { RootState } from '../reducers/rootReducer'; // Import RootState
 
-const Homepage: React.FC = () => {
-  return <h2>Home</h2>;
+import { increment } from '../reducers/someReducers'; // Import your action creator
+
+const HomePage: React.FC = () => {
+  const count = useSelector((state: RootState) => state.someReducer.count); // Use RootState to annotate state
+
+  const dispatch = useDispatch();
+
+  const handleIncrement = () => {
+    dispatch(increment());
+  };
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={handleIncrement}>Increment</button>
+    </div>
+  );
 };
 
-export default Homepage;
+export default HomePage;

src/main.tsx

@@ -1,11 +1,19 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { App } from './app.tsx';
-
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import { App } from './app';
 import './index.scss';
+import store, { persistor } from './store/store';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+// eslint-disable-next-line react/no-deprecated
+ReactDOM.render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <App />
+      </PersistGate>
+    </Provider>
+  </React.StrictMode>,
+  document.getElementById('root')
 );

src/reducers/rootReducer.ts

@@ -0,0 +1,12 @@
+import { combineReducers } from '@reduxjs/toolkit';
+import someReducer from './someReducers';
+
+// Define RootState type based on the combined state of all reducers
+export type RootState = ReturnType<typeof rootReducer>;
+
+const rootReducer = combineReducers({
+  someReducer,
+  // Add other reducers here
+});
+
+export default rootReducer;

src/reducers/someReducers.ts

@@ -0,0 +1,22 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+interface SomeState {
+  count: number;
+}
+
+const initialState: SomeState = {
+  count: 0,
+};
+
+const someSlice = createSlice({
+  name: 'someReducer',
+  initialState,
+  reducers: {
+    increment(state) {
+      state.count += 1;
+    },
+  },
+});
+
+export const { increment } = someSlice.actions;
+export default someSlice.reducer;

src/store/store.ts

@@ -0,0 +1,20 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { persistReducer, persistStore } from 'redux-persist';
+import storage from 'redux-persist/lib/storage'; // Defaults to localStorage for web
+import rootReducer from '../reducers/rootReducer.ts'; // Import your root reducer
+
+const persistConfig = {
+  key: 'root',
+  storage,
+  // Add any other config options here
+};
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+const store = configureStore({
+  reducer: persistedReducer,
+  // Add any middleware or enhancers here if needed
+});
+
+export const persistor = persistStore(store);
+export default store;