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

no message

Browse Source
This commit is contained in:
chenxuan
2024-04-28 14:44:46 +08:00
parent c55113e41a
commit 7a3ac689ca
16 changed files with 242 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
redux/redux-reactRedux/src/App.js
+11 -5
View File
@@ -1,11 +1,17 @@
import './App.css';
import Count from './containers/count';
// import store from './redux/store';
/*
* @Author: chenxuan
* @Date: 2022-06-21 23:29:37
* @LastEditTime: 2022-08-03 00:08:46
* @LastEditors: chenxuan
*/
import Count from "./components/count/index"
import Person from './components/person/index'
function App() {
return (
<div className="App">
<Count/>
{/* <Count store={store}/> */}
<Count></Count>
<Person></Person>
</div>
);
}
redux/redux-reactRedux/src/components/count/index.jsx
+58
View File
@@ -0,0 +1,58 @@
/*
* @Author: chenxuan
* @Date: 2022-07-24 16:07:57
* @LastEditTime: 2022-08-02 00:14:06
* @LastEditors: chenxuan
*/
import React,{Component} from 'react'
import {connect} from 'react-redux'
import count from './style.module.css'
import {
createIncreementAction,
createDecreementAction,
createIncreementAsyncAction
} from '../../redux/action/count'
class Count extends Component{
increement=()=>{
const {value}=this.selectNumber
this.props.jia(value*1)
}
decreement=()=>{
const {value}=this.selectNumber
this.props.jian(value*1)
}
increementOdd=()=>{
const {value}=this.selectNumber
if(this.props.count%2!==0){
this.props.jia(value*1)
}
}
increementSync=()=>{
const {value}=this.selectNumber
this.props.asyncJia(value*1,500)
}
render(){
return(
<div className={count.hehe}>
<h1>组件1</h1>
<h2>当前求和为：{this.props.count1}</h2>
<select name="" id="" ref={c=>this.selectNumber=c}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button onClick={this.increement}>+</button>
<button onClick={this.decreement}>-</button>
<button onClick={this.increementOdd}>计数再加</button>
<button onClick={this.increementSync}>异步再加</button>
</div>
)
}
}
const mapStateToProps=state=>({count1:state.countReducer})
const mapDispatchToProps=(dispatch)=>({
jia:data=>dispatch(createIncreementAction(data)),
jian:data=>dispatch(createDecreementAction(data)),
asyncJia:(data,time)=>dispatch(createIncreementAsyncAction(data,time))
})
export default connect(mapStateToProps,mapDispatchToProps)(Count)
redux/redux-reactRedux/src/components/count/style.module.css
+11
View File
@@ -0,0 +1,11 @@
.hehe{
margin-top: 20px;
margin-left: 20px;
padding: 12px;
border: 1px solid green;
}
*{
padding: 0;
margin: 0;
}
redux/redux-reactRedux/src/components/person/index.jsx
+45
View File
@@ -0,0 +1,45 @@
/*
* @Author: chenxuan
* @Date: 2022-07-31 21:43:44
* @LastEditTime: 2022-08-04 01:03:46
* @LastEditors: chenxuan
*/
import {Component} from 'react'
import {nanoid} from 'nanoid'
import person from './style.module.css'
import createPerson from '../../redux/action/person'
import {connect} from 'react-redux'
class Person extends Component{
addPerson=()=>{
const name=this.nodeName.value
const age=this.nodeAge.value
const personObj={id:nanoid(),name,age}
this.props.createPerson(personObj)
this.nodeName=''
this.nodeAge=''
}
render(){
return(
<div className={person.hehe}>
<h1>组件2</h1>
<input type="text" ref={c=>this.nodeName=c} placeholder='请输入姓名'/>
<input type="text" ref={c=>this.nodeAge=c} placeholder='请输入年龄'/>
<button onClick={this.addPerson}>添加</button>
<ul>
<li>{this.props.count}</li>
{this.props.person.map((p)=>{
return <div key={p.id}>
<li>{p.name}</li>
<li>{p.age}</li>
</div>
})}
</ul>
</div>
)
}
}
export default connect(
state=>({person:state.personReducer,count:state.countReducer}),
{createPerson}
)(Person)
redux/redux-reactRedux/src/components/person/style.module.css
+12
View File
@@ -0,0 +1,12 @@
.hehe{
margin-top: 20px;
margin-left: 20px;
padding: 12px;
border: 1px solid red;
}
*{
padding: 0;
margin: 0;
list-style: none;
}
redux/redux-reactRedux/src/containers/persion/index.jsx
+46
View File
@@ -0,0 +1,46 @@
/*
* @Author: chenxuan
* @Date: 2022-07-31 21:43:44
* @LastEditTime: 2022-08-04 01:03:46
* @LastEditors: chenxuan
*/
import {useRef } from 'react'
import {nanoid} from 'nanoid'
import person from './style.module.css'
import createPerson from '../../redux/action/person'
import {connect} from 'react-redux'
function Person(props){
console.log(props)
const nodeName = useRef(null);
const nodeAge = useRef(null);
const addPerson=()=>{
const name=nodeName.current.value
const age=nodeAge.current.value
const personObj={id:nanoid(),name,age}
props.createPerson(personObj)
this.nodeName=''
this.nodeAge=''
}
return(
<div className={person.hehe}>
<h1>组件2</h1>
<input type="text" ref={nodeName} placeholder='请输入姓名'/>
<input type="text" ref={nodeAge} placeholder='请输入年龄'/>
<button onClick={addPerson}>添加</button>
<ul>
{/* <li>{props.count}</li> */}
{props.person.map((p)=>{
return <div key={p.id}>
<li>{p.name}</li>
<li>{p.age}</li>
</div>
})}
</ul>
</div>
)
}
export default connect(
state=>({person:state.personReducer,count:state.countReducer}),
{createPerson}
)(Person)
redux/redux-reactRedux/src/containers/persion/style.module.css
+12
View File
@@ -0,0 +1,12 @@
.hehe{
margin-top: 20px;
margin-left: 20px;
padding: 12px;
border: 1px solid red;
}
*{
padding: 0;
margin: 0;
list-style: none;
}
redux/redux-reactRedux/src/index.js
+8 -3
View File
@@ -1,10 +1,15 @@
/*
* @Author: chenxuan
* @Date: 2022-06-21 23:29:37
* @LastEditTime: 2022-07-31 21:39:12
* @LastEditors: chenxuan
*/
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import store from './redux/store';
import { Provider } from 'react-redux';
import {Provider} from 'react-redux'
import reportWebVitals from './reportWebVitals';
import store from './redux/store'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
redux/redux-reactRedux/src/redux/action/count.js
+3 -6
View File
@@ -1,10 +1,10 @@
/*
* @Author: chenxuan
* @Date: 2022-07-07 00:09:50
* @LastEditTime: 2022-07-07 00:50:42
* @LastEditTime: 2022-07-31 21:28:38
* @LastEditors: chenxuan
*/
import {INCREEMENT,DECREEMENT,ADDPERSON} from '../const'
import {INCREEMENT,DECREEMENT} from '../const'
function createIncreementAction(data){
return {type:INCREEMENT,data}
}
@@ -12,17 +12,14 @@ function createDecreementAction(data){
return {type:DECREEMENT,data}
}
function createIncreementAsyncAction(data,time){
// store调用createIncreementAsyncAction 能接收一个参数dispatch
return (dispatch)=>{
setTimeout(()=>{
dispatch(createIncreementAction(data))
},time)
}
}
const createPerson=data=>({type:ADDPERSON,data})
export {
createIncreementAction,
createDecreementAction,
createIncreementAsyncAction,
createPerson
createIncreementAsyncAction
}
redux/redux-reactRedux/src/redux/action/person.js
+6
View File
@@ -1,3 +1,9 @@
/*
* @Author: chenxuan
* @Date: 2022-07-31 23:01:33
* @LastEditTime: 2022-08-01 23:56:10
* @LastEditors: chenxuan
*/
import {ADDPERSON} from '../const'
const createPerson=data=>({type:ADDPERSON,data})
export default createPerson
redux/redux-reactRedux/src/redux/const.js
+6
View File
@@ -1,3 +1,9 @@
/*
* @Author: chenxuan
* @Date: 2022-07-07 00:34:47
* @LastEditTime: 2022-07-31 23:03:59
* @LastEditors: chenxuan
*/
const INCREEMENT="increement"
const DECREEMENT="decreement"
const ADDPERSON="addPerson"
redux/redux-reactRedux/src/redux/dist/store.dev.js
Vendored
+8 -2
View File
@@ -9,6 +9,8 @@ var _redux = require("redux");
var _count = _interopRequireDefault(require("./reducer/count"));
var _person = _interopRequireDefault(require("./reducer/person"));
var _reduxThunk = require("redux-thunk");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -16,9 +18,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
/*
* @Author: chenxuan
* @Date: 2022-06-25 16:54:00
* @LastEditTime: 2022-07-06 23:49:24
* @LastEditTime: 2022-08-01 23:19:58
* @LastEditors: chenxuan
*/
var store = (0, _redux.createStore)(_count["default"], (0, _redux.applyMiddleware)(_reduxThunk.thunk));
var allReducer = (0, _redux.combineReducers)({
countReducer: _count["default"],
personReducer: _person["default"]
});
var store = (0, _redux.createStore)(allReducer, (0, _redux.applyMiddleware)(_reduxThunk.thunk));
var _default = store;
exports["default"] = _default;
redux/redux-reactRedux/src/redux/reducer/count.js
+1 -1
View File
@@ -1,7 +1,7 @@
/*
* @Author: chenxuan
* @Date: 2022-06-25 16:54:25
* @LastEditTime: 2022-07-07 00:46:47
* @LastEditTime: 2022-07-31 21:25:36
* @LastEditors: chenxuan
*/
redux/redux-reactRedux/src/redux/reducer/dist/person.dev.js
Vendored
+2 -2
View File
@@ -3,7 +3,7 @@
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = addPerson;
exports["default"] = AddPerson;
var _const = require("../const");
@@ -15,7 +15,7 @@ function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
function addPerson() {
function AddPerson() {
var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [{
name: "陈轩",
age: 18,
redux/redux-reactRedux/src/redux/reducer/person.js
+6
View File
@@ -1,3 +1,9 @@
/*
* @Author: chenxuan
* @Date: 2022-07-31 23:04:08
* @LastEditTime: 2022-08-03 00:00:43
* @LastEditors: chenxuan
*/
import {ADDPERSON} from '../const'
export default function addPerson(state=[{name:"陈轩",age:18,id:1}],action){
const {type,data}=action
redux/redux-reactRedux/src/redux/store.js
+7 -3
View File
@@ -1,11 +1,15 @@
/*
* @Author: chenxuan
* @Date: 2022-06-25 16:54:00
* @LastEditTime: 2022-07-06 23:49:24
* @LastEditTime: 2022-08-01 23:19:58
* @LastEditors: chenxuan
*/
import {createStore,applyMiddleware} from 'redux'
import {createStore,applyMiddleware,combineReducers} from 'redux'
import countReducer from './reducer/count'
import personReducer from './reducer/person'
import {thunk} from 'redux-thunk'
const store=createStore(countReducer,applyMiddleware(thunk))
const allReducer=combineReducers({
countReducer,personReducer
})
const store=createStore(allReducer,applyMiddleware(thunk))
export default store