13. react 全局状态管理 - redux + @reduxjs/toolkit

package-lock.json

@@ -8,6 +8,7 @@
       "name": "react-study-demo",
       "version": "0.1.0",
       "dependencies": {
+        "@reduxjs/toolkit": "^2.3.0",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -3250,6 +3251,38 @@
         }
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/@reduxjs/toolkit/-/toolkit-2.3.0.tgz",
+      "integrity": "sha512-WC7Yd6cNGfHx8zf+iu+Q1UPTfEcXhQ+ATi7CV1hlrSAaQBdlPzg7Ww/wJHNQem7qG9rxmWoFCDCPubSvFObGzA==",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmmirror.com/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.20.0",
       "resolved": "https://registry.npmmirror.com/@remix-run/router/-/router-1.20.0.tgz",
@@ -15101,6 +15134,14 @@
       "resolved": "https://registry.npmmirror.com/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
     },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -15245,6 +15286,11 @@
       "resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.8.tgz",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^2.3.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/App.js

@@ -12,6 +12,8 @@ import Page3 from "./pages/Page3";
 // import store from "./store/msgReducer";
 import {connect} from "react-redux"
 
+import {changeMsg} from "./store/tookit";
+
 // 异步组件, 懒加载
 const LazyPage = React.lazy(()=> import("./pages/SonPageLazy"))
 
@@ -326,10 +328,21 @@ export default connect((state) => {
         }
     }, (dispatch) => ({
         changeStoreMsg: () => {
-            dispatch({
+            // redux 原生
-                type: "change",
+            // dispatch({
-                payload: "修改后的 redux state msg"
+            //     type: "changeMsg",
-            })
+            //     payload: "修改后的 redux state msg"
+            // })
+
+            // toolkit 方式 1
+            // dispatch({
+            //     // toolkit 格式 => 切片名称/方法名
+            //     type: "msgSlice/changeMsg",
+            //     payload: "修改后的 redux toolkit state msg"
+            // })
+
+            // toolkit 方式 2
+            dispatch(changeMsg("修改后的 redux toolkit state msg"))
         }
     })
 )(App);

src/index.js

@@ -6,7 +6,8 @@ import reportWebVitals from './reportWebVitals';
 import {BrowserRouter} from "react-router-dom";
 
 // import store from "./store/msgReducer";
-import store from "./store/store"
+// import store from "./store/store"
+import store from "./store/tookit"
 import {Provider} from "react-redux"
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

src/store/msgReducer.js

@@ -1,15 +1,15 @@
 import {legacy_createStore as createStore} from "redux"
 
 export function msgReducer(state = {
-    msg: "hello",
+    msg: "redux state msg",
 }, action){
     // 具体的操作行为
     switch (action.type) {
-        case 'change':
+        case 'changeMsg':
             state.msg = action.payload
             break;
-        case 'reset':
+        case 'resetMsg':
-            state.msg = "hello"
+            state.msg = "redux state msg"
             break;
     }
 

src/store/tookit.js

@@ -0,0 +1,42 @@
+import {configureStore, createSlice} from "@reduxjs/toolkit";
+
+let msgSlice = createSlice({
+    name: "msgSlice",
+    initialState: {
+        msg: "redux toolkit state msg"
+    },
+    reducers: {
+        changeMsg(state, action){
+            state.msg = action.payload
+        }
+    }
+})
+
+let countSlice = createSlice({
+    name: "countSlice",
+    initialState: {
+        count: 0
+    },
+    reducers: {
+        addCount(state, action){
+            state.count+=1
+        }
+    }
+})
+
+let store = configureStore({
+    reducer: {
+        msgReducer: msgSlice.reducer,
+        countReducer: countSlice.reducer
+    }
+})
+
+export default store;
+
+export const {
+    changeMsg
+} = msgSlice.actions
+
+export const {
+    addCount
+} = countSlice.actions