no message

redux/redux-reactRedux/src/components/count/index.jsx

@@ -4,7 +4,7 @@
  * @LastEditTime: 2022-08-02 00:14:06
  * @LastEditors: chenxuan
  */
-import React,{Component} from 'react'
+import {useRef} from 'react'
 import {connect} from 'react-redux' 
 import count from './style.module.css'
 import {
@@ -12,47 +12,53 @@ import {
     createDecreementAction,
     createIncreementAsyncAction
 } from '../../redux/action/count'
-class Count extends Component{
-    increement=()=>{
-        const {value}=this.selectNumber
-        this.props.jia(value*1)
+function Count(props){
+    const selectNumber=useRef()
+    const increement=()=>{
+        const value=selectNumber.current.value
+        props.jia(value*1)
     }
-    decreement=()=>{
-        const {value}=this.selectNumber
-        this.props.jian(value*1)
+    const decreement=()=>{
+        const value=selectNumber.current.value
+        props.jian(value*1)
     }
-    increementOdd=()=>{
-        const {value}=this.selectNumber
-        if(this.props.count%2!==0){
-            this.props.jia(value*1)
+    const increementOdd=()=>{
+        const value=selectNumber.current.value
+        if(props.count1%2!==0){
+            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 increementSync=()=>{
+        const value=selectNumber.current.value
+        props.asyncJia(value*1,500)
     }
+    return(
+        <div className={count.hehe}>
+            <h1>组件1</h1>
+            <h2>当前求和为：{props.count1}</h2>
+            <select name="" id="" ref={selectNumber}>
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+            </select>
+            <button onClick={increement}>+</button>
+            <button onClick={decreement}>-</button>
+            <button onClick={increementOdd}>计数再加</button>
+            <button onClick={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)
+export default connect(
+    state=>({count1:state.countReducer}),
+    {
+        jia:createIncreementAction,
+        jian:createDecreementAction,
+        asyncJia:createIncreementAsyncAction
+    }
+)(Count)
+   

redux/redux-reactRedux/src/components/person/index.jsx

@@ -4,40 +4,39 @@
  * @LastEditTime: 2022-08-04 01:03:46
  * @LastEditors: chenxuan
  */
-import {Component} from 'react'
+import {useRef} from 'react'
+import {connect} from 'react-redux'
 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>
-        )
-        
+function Person(props) {
+    let nodeName=useRef()
+    let nodeAge=useRef()
+    const addPerson=()=>{
+        const nameValue=nodeName.current.value
+        const ageValue=nodeAge.current.value
+        const personObj={id:nanoid(),name:nameValue,age:ageValue}
+        props.createPerson(personObj)
+        nodeName.current.value=''
+        nodeAge.current.value=''
     }
+    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}),

redux/redux-reactRedux/src/containers/count/index.jsx

@@ -0,0 +1,70 @@
+import React,{useRef } from 'react'
+import {connect} from 'react-redux'
+import {createIncreementAction,createDecreementAction,createIncreementAsyncAction} from '../../redux/action/count'
+function Count(props){
+    const selectNumber = useRef(null);
+    const increement=()=>{
+        const value=selectNumber.current.value
+        props.jia(value*1)
+    }
+    const decreement=()=>{
+        const value=selectNumber.current.value
+        props.jian(value*1)
+    }
+    const increementOdd=()=>{
+        const value=selectNumber.current.value
+        if(props.count%2!==0){
+            props.jia(value*1)
+        }
+    }
+    const increementSync=()=>{
+        const value=selectNumber.current.value
+        props.jiaAsync(value*1,1000)
+    }
+    return(
+        <div>
+            <h1>当前求和为：{props.count}</h1>
+            <select name="" id="" ref={selectNumber}>
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+            </select>
+            <button onClick={increement}>+</button>
+            <button onClick={decreement}>-</button>
+            <button onClick={increementOdd}>计数再加</button>
+            <button onClick={increementSync}>异步再加</button>
+        </div>
+    )
+}
+
+// 写法1
+// const mapStateToProps=state=>({count:state})
+// const  mapDispatchToProps=dispatch=>({
+//     jia:data=>dispatch(createIncreementAction(data)),
+//     jian:data=>dispatch(createDecreementAction(data)),
+//     jiaAsync:(data,time)=>dispatch(createIncreementAsyncAction(data,time)),
+// })
+// const CountContainer=connect(mapStateToProps,mapDispatchToProps)(Count)
+
+// 写法2
+// const CountContainer=connect(
+//         state=>({count:state}),
+//         dispatch=>({
+//             jia:data=>dispatch(createIncreementAction(data)),
+//             jian:data=>dispatch(createDecreementAction(data)),
+//             jiaAsync:(data,time)=>dispatch(createIncreementAsyncAction(data,time)),
+//         })
+//     )
+//     (Count)
+
+// 写法3
+const CountContainer=connect(
+    state=>({count:state}),
+    {
+        jia:createIncreementAction,
+        jian:createDecreementAction,
+        jiaAsync:createIncreementAsyncAction,
+    }
+)
+(Count)
+export default CountContainer

redux/redux-reactRedux/src/containers/persion/index.jsx

@@ -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

@@ -0,0 +1,12 @@
+.hehe{
+    margin-top: 20px;
+    margin-left: 20px;
+    padding: 12px;
+    border: 1px solid red;
+
+}
+*{
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}