13. react 全局状态管理 - redux
This commit is contained in:
parent
44e70ac25b
commit
a82bba0e28
GPG Key ID:
BD85FF18B373C341
42
package-lock.json
generated
42
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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": {
|
||||
|
||||
57
src/App.js
57
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);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
24
src/store/msgReducer.js
Normal file
24
src/store/msgReducer.js
Normal file
@ -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;
|
||||
11
src/store/store.js
Normal file
11
src/store/store.js
Normal file
@ -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;
|
||||
Loading…
Reference in New Issue
Block a user