chenxuan/react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

5555

Browse Source
This commit is contained in:
yinjun.chen1
2024-06-30 21:25:34 +08:00
parent e5ceb6d487
commit 6729c39fb9
11 changed files with 139 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
redux/conect/package-lock.json
Generated
+42
View File
@@ -47,7 +47,9 @@
"react-app-polyfill": "^3.0.0",
"react-dev-utils": "^12.0.1",
"react-dom": "^18.3.1",
"react-redux": "^9.1.2",
"react-refresh": "^0.11.0",
"redux": "^5.0.1",
"resolve": "^1.20.0",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^12.3.0",
@@ -4503,6 +4505,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.10",
"resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.5.10.tgz",
@@ -14994,6 +15001,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",
@@ -15057,6 +15086,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",
@@ -17202,6 +17236,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",
redux/conect/package.json
+2
View File
@@ -42,7 +42,9 @@
"react-app-polyfill": "^3.0.0",
"react-dev-utils": "^12.0.1",
"react-dom": "^18.3.1",
"react-redux": "^9.1.2",
"react-refresh": "^0.11.0",
"redux": "^5.0.1",
"resolve": "^1.20.0",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^12.3.0",
redux/conect/src/App.css
+11 -1
View File
@@ -1,7 +1,15 @@
.App {
text-align: center;
display: flex;
justify-content: flex-start;
align-items: center;
}
.page1{
width: 30%;
}
.page2{
width: 30%;
}
.App-logo {
height: 40vmin;
pointer-events: none;
@@ -15,7 +23,9 @@
.App-header {
background-color: #282c34;
width: 40%;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
redux/conect/src/App.js
+4 -1
View File
@@ -1,6 +1,7 @@
import logo from './logo.svg';
import './App.css';
import Page1 from './container/page1';
import Page2 from './container/page2';
function App() {
return (
<div className="App">
@@ -18,6 +19,8 @@ function App() {
Learn React
</a>
</header>
<Page1 />
<Page2 />
</div>
);
}
redux/conect/src/container/page1.jsx
+21
View File
@@ -0,0 +1,21 @@
import {connect} from 'react-redux'
import {username} from '../store/action'
function Page1(props){
const load=()=>{
props.load('chenyinjun')
}
return (
<div className='page1'>
<h1>Page1</h1>
<button onClick={load}>load</button>
<h2>{props.username}</h2>
</div>
)
}
const mapStateToProps = (state) => {
return {
username:state.username
}
}
const mapDispathToProps = (dispatch) => ({load:data=>dispatch(username(data))})
export default connect(mapStateToProps,mapDispathToProps)(Page1)
redux/conect/src/container/page2.jsx
+21
View File
@@ -0,0 +1,21 @@
import {connect} from 'react-redux'
import {username} from '../store/action'
function Page2(props){
const load=()=>{
props.load('大侠')
}
return (
<div className='page2'>
<h1>Page2</h1>
<button onClick={load}>load</button>
<h2>{props.username}</h2>
</div>
)
}
const mapStateToProps = (state) => {
return {
username:state.username
}
}
const mapDispathToProps = (dispatch) => ({load:data=>dispatch(username(data))})
export default connect(mapStateToProps,mapDispathToProps)(Page2)
redux/conect/src/index.js
+5 -6
View File
@@ -3,15 +3,14 @@ import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './store/index';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
redux/conect/src/store/action.js
+11
View File
@@ -0,0 +1,11 @@
import { SETUSERNAME } from "./const";
const username=(data)=>{
return {
type:SETUSERNAME,
data
}
}
export {
username
}
redux/conect/src/store/const.js
+4
View File
@@ -0,0 +1,4 @@
const SETUSERNAME='setUsername'
export{
SETUSERNAME
}
redux/conect/src/store/index.js
+6
View File
@@ -0,0 +1,6 @@
import { combineReducers,createStore} from "redux";
import {usernameReducer} from "./reducer";
const store=combineReducers({
username:usernameReducer
})
export default createStore(store);
redux/conect/src/store/reducer.js
+12
View File
@@ -0,0 +1,12 @@
const usernameReducer=(state='xxxx',action)=>{
const{type,data}=action
switch(type){
case 'setUsername':
return data
default:
return state
}
}
export {
usernameReducer
}