13. react 全局状态管理 - redux

package-lock.json

@@ -14,8 +14,10 @@
         "proptypes": "^1.1.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-redux": "^9.1.2",
         "react-router-dom": "^6.27.0",
         "react-scripts": "5.0.1",
+        "redux": "^5.0.1",
         "web-vitals": "^2.1.4"
       }
     },
@@ -4416,6 +4418,11 @@
       "resolved": "https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmmirror.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "node_modules/@types/ws": {
       "version": "8.5.12",
       "resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.5.12.tgz",
@@ -14902,6 +14909,28 @@
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-redux": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmmirror.com/react-redux/-/react-redux-9.1.2.tgz",
+      "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.3",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25",
+        "react": "^18.0",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -15067,6 +15096,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -17214,6 +17248,14 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -9,8 +9,10 @@
     "proptypes": "^1.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
+    "redux": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,4 +1,4 @@
-import React, {useState, Suspense} from "react";
+import React, {useState, Suspense, useCallback} from "react";
 // import logo from './logo.svg';
 import './App.css';
 
@@ -9,10 +9,16 @@ import {Link, NavLink, Route, Routes} from "react-router-dom";
 import SonPage from "./pages/SonPage";
 import Page3 from "./pages/Page3";
 
+// import store from "./store/msgReducer";
+import {connect} from "react-redux"
+
 // 异步组件, 懒加载
 const LazyPage = React.lazy(()=> import("./pages/SonPageLazy"))
 
-function App() {
+function App(props) {
+    console.log("App props =>", props)
+    // console.log("store", store, store.getState())
+
     // vue3 组合式 API
     // React 必须大写 Pascal 命名 组件
     function FnHello({name = "Fn"}) {
@@ -174,6 +180,24 @@ function App() {
         return msg;
     }
 
+    // let changeStoreMsg = useCallback(()=>{
+    //     store.dispatch({
+    //         type: "change",
+    //         payload: "修改后的 store msg"
+    //     })
+    //
+    //     console.log("store", store, store.getState())
+    // }, [])
+    //
+    // let changeStoreMsg = useCallback(()=>{
+    //     props.dispatch({
+    //         type: "change",
+    //         payload: "修改后的 redux state msg"
+    //     })
+    //
+    //     console.log("store", props, props.msg)
+    // }, [props])
+
     return (
         <div className="App">
             <div>
@@ -276,9 +300,36 @@ function App() {
 
                     <SonComponent2 msg={msg} changeMsg={changeMsg}></SonComponent2>
                 </div>
+
+                <div>
+                    Redux
+
+                    <div>
+                        {props.msg}
+                    </div>
+                    <div>
+                        <button onClick={props.changeStoreMsg}>修改 redux state msg</button>
+                    </div>
+                </div>
             </header>
         </div>
     );
 }
 
-export default App;
+// connect
+// 第一个参数 映射 state, 把需要使用的 state 映射到组件的 props
+// 第二个参数 为方法映射, 往 props 传入哪些方法
+export default connect((state) => {
+        console.log("connect state", state)
+        return {
+            msg: state.msgReducer.msg
+        }
+    }, (dispatch) => ({
+        changeStoreMsg: () => {
+            dispatch({
+                type: "change",
+                payload: "修改后的 redux state msg"
+            })
+        }
+    })
+)(App);

src/index.js

@@ -5,6 +5,9 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import {BrowserRouter} from "react-router-dom";
 
+// import store from "./store/msgReducer";
+import store from "./store/store"
+import {Provider} from "react-redux"
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
     /**
@@ -14,7 +17,9 @@ root.render(
      */
     // <React.StrictMode>
     <BrowserRouter>
-        <App/>
+        <Provider store={store}>
+            <App/>
+        </Provider>
     </BrowserRouter>
     // </React.StrictMode>
 );

src/store/msgReducer.js

@@ -0,0 +1,24 @@
+import {legacy_createStore as createStore} from "redux"
+
+export function msgReducer(state = {
+    msg: "hello",
+}, action){
+    // 具体的操作行为
+    switch (action.type) {
+        case 'change':
+            state.msg = action.payload
+            break;
+        case 'reset':
+            state.msg = "hello"
+            break;
+    }
+
+    return {
+        // 展开对象 解除对原对象的引用
+        ...state,
+    }
+}
+
+const store = createStore(msgReducer)
+
+export default store;

src/store/store.js

@@ -0,0 +1,11 @@
+import {legacy_createStore as createStore, combineReducers} from "redux";
+import {msgReducer} from "./msgReducer";
+
+// 将多个 reducer 合并为一个
+let reducer = combineReducers({
+    msgReducer
+})
+
+let store = createStore(reducer)
+
+export default store;