feat: auth-redux

backend/index.js

@@ -67,4 +67,4 @@ app.get("/search", async (req, res) => {
 
 app.listen(PORT, () => {
     console.log(`Server is running on port ${PORT}`);
-});
+});                                                                                                                                                 

frontend/package.json

@@ -10,12 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.2.5",
     "axios": "^1.6.8",
     "he": "^1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-h5-audio-player": "^3.9.1",
     "react-icons": "^5.2.1",
+    "react-redux": "^9.1.2",
+    "redux-persist": "^6.0.0",
     "swiper": "^11.1.3"
   },
   "devDependencies": {

frontend/src/main.jsx

@@ -1,10 +1,20 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
+import { Provider } from "react-redux";
+import { store } from "./redux/store.js";
+import { PersistGate } from "redux-persist/integration/react";
+import { persistStore } from "redux-persist";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+const persistor = persistStore(store);
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <PersistGate persistor={persistor}>
+    <Provider store={store}>
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>
+    </Provider>
+  </PersistGate>
+);

frontend/src/redux/auth-slice.js

@@ -0,0 +1,38 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+    value:{
+        username:"",
+        isAuth:false,
+        email:"",
+    }
+}
+
+export const auth = createSlice({
+    name:"auth",
+    initialState,
+    reducers:{
+        logOut:()=>{
+            return initialState
+        },
+        logIn:(state,action)=>{
+            return {
+                value : {
+                    isAuth:true,
+                    email:action.payload.email
+                }
+            }
+        },
+        setUsername:(state,action) => {
+            return {
+                value : {
+                    isAuth:true,
+                    username:action.payload.username
+                }
+            }
+        }
+    }
+})
+
+export const {logIn,logOut,setUsername} = auth.actions;
+export default auth.reducer;

frontend/src/redux/store.js

@@ -0,0 +1,20 @@
+import { configureStore } from "@reduxjs/toolkit";
+import authReducer from "./auth-slice";
+import storage from 'redux-persist/lib/storage';
+import {persistReducer} from "redux-persist"
+import { combineReducers } from "@reduxjs/toolkit";
+
+const persistConfig = {
+    key: 'root',
+    storage
+}
+
+const reducer = combineReducers({
+    auth:authReducer,
+})
+
+const persistedReducer = persistReducer(persistConfig,reducer)
+
+export const store=configureStore({
+    reducer: persistedReducer,
+})