diff --git a/package-lock.json b/package-lock.json index cab29ee..e97e57b 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 192b155..04d5910 100644 --- a/package.json +++ b/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": { diff --git a/src/App.js b/src/App.js index bdf0b82..8efd2c1 100644 --- a/src/App.js +++ b/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 (
@@ -276,9 +300,36 @@ function App() {
+ +
+ Redux + +
+ {props.msg} +
+
+ +
+
); } -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); diff --git a/src/index.js b/src/index.js index 8848cc0..9e77c28 100644 --- a/src/index.js +++ b/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( */ // - + + + // ); diff --git a/src/store/msgReducer.js b/src/store/msgReducer.js new file mode 100644 index 0000000..b5ce5e4 --- /dev/null +++ b/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; diff --git a/src/store/store.js b/src/store/store.js new file mode 100644 index 0000000..f7f4079 --- /dev/null +++ b/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;