redux

21.react/高阶/project5/package.json

@@ -13,7 +13,8 @@
     "@reduxjs/toolkit": "^2.12.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "react-redux": "^9.3.0"
+    "react-redux": "^9.3.0",
+    "redux-persist": "^6.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.17",
@@ -22,4 +23,4 @@
     "oxlint": "^1.75.0",
     "vite": "^8.2.0"
   }
-}
+}

21.react/高阶/project5/src/components/CountPage.jsx

@@ -1,17 +1,23 @@
 import { useDispatch, useSelector } from "react-redux";
 // useSelector 读数据  你选择的state片段 useSelector()
 import { addOne, asyncAddThing } from "../store/slices/counterSlice";
+
 function CountPage() {
     const { value } = useSelector(x => x.counterSlice);
+    const { token } = useSelector(x => x.userInfoSlice)
+    console.log(token)
     const dispatch = useDispatch();
     // useDispatch 写数据 触发函数 
     console.log(dispatch, 'dd')
     return (
         <div>
+            <h1>展示token:{token}</h1>
+            <button onClick={() => localStorage.setItem('token1', Date.now())}>添加token</button>
             <h1>计数器</h1>
             <h2>初始值:{value}</h2>
             <button onClick={() => dispatch(addOne(10))}>加一</button>
-            <button onClick={() => dispatch(asyncAddThing)}>延迟2s加一</button>
+            <button onClick={() => dispatch(asyncAddThing(5))}>延迟2s加一</button>
+            <button>添加用户信息</button>
         </div>
     )
 }

21.react/高阶/project5/src/store/index.js

@@ -1,13 +1,47 @@
 // 引入创建仓库方法
-import { configureStore } from "@reduxjs/toolkit";
+import { configureStore, combineReducers } from "@reduxjs/toolkit";
+
 // 将切片进行引入
 import counterSlice from "./slices/counterSlice";
+import userInfoSlice from './slices/userInfo';
+
+// 引入storage
+import storage from 'redux-persist/lib/storage'
+
+// 合并reducer
+const rootReducer = combineReducers({
+    counterSlice,
+    userInfoSlice
+})
+
+// persist配置
+const persistConfig = {
+    key: 'redux-main',
+    storage,
+    whiteList: ['user1'],
+    // blackList:[]
+}
+
+// 将reducer传入持久化中 // 数据持久化 redux-persist
+const persistReducer = persistReducer(persistConfig, rootReducer)
 
 // 将切片集成到仓库上
 const store = configureStore({
-    reducer: {
-        counterSlice
-    }
+    reducer: persistReducer,
+    middleware: getDefaultMiddleware => getDefaultMiddleware({
+        serializableCheck: {
+            ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
+        }
+        /**
+         * FLUSH state变化
+         * PAUSE 调用persist.pause方法
+         * REHYDRATE 页面加载
+         * PERSIST 手动调用
+         * PURGE 调用persist.purge方法
+         * REGISTER 初始化
+         */
+    })
+
 })
 
 // 抛出 外部使用

21.react/高阶/project5/src/store/slices/counterSlice.js

@@ -16,14 +16,15 @@ const counterSlice = createSlice({
     }
 })
 
-// redux-thunk redux-saga 
+// redux-thunk redux-persist
 // 把异步操作从reducer里拿出来 放在一个特殊的函数内 
 // 异步完成后 在用dispatch执行同步函数
-export function asyncAddThing(dispatch) {
-    // console.log(getState, '打印')
-    setTimeout(() => {
-        dispatch(addOne());
-    }, 2000)
+export function asyncAddThing(val) {
+    return (dispatch) => {
+        setTimeout(() => {
+            dispatch(addOne(val));
+        }, 2000)
+    }
 }
 // 抛出方法
 export const { addOne } = counterSlice.actions;

21.react/高阶/project5/src/store/slices/userInfo.js

@@ -0,0 +1,13 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const userSlice = createSlice({
+    name: "user1",
+    initialState: {
+        token: localStorage.getItem("token1") || null
+    },
+    reducers: {
+
+    }
+})
+
+export default userSlice.reducer;