react

19.React/高阶/project4/src/components/Demo1.jsx

@@ -1,6 +1,8 @@
 import { useSelector,useDispatch } from "react-redux";
-import { setName } from "../store/slices/user";
+import { setName,setAge,asyncSetAge } from "../store/slices/user";
+import { useState } from "react";
 function Demo1() {
+    const [old,setOld] = useState('')
     const dispatch = useDispatch();
     const user = useSelector(({users}) => users);
     console.log(user,'user')
@@ -10,6 +12,15 @@ function Demo1() {
         <button onClick={()=>{
             dispatch(setName());
         }}>修改名字</button>
+        <br /><br />
+        <h3>今年{user.age}岁</h3>
+        <input type="text"  onChange={(e) =>setOld(e.target.value)} />
+        <button onClick={()=>{
+            dispatch(setAge(old))
+        }}>修改年龄</button>
+        <button onClick={() => {
+            dispatch(asyncSetAge(old))
+        }}>2秒后修改年龄</button>
     </div>
 }
 export default Demo1;

19.React/高阶/project4/src/store/index.js

@@ -10,5 +10,6 @@ const store = configureStore({
         users: userReducer
     }
 })
-
+// Redux 遵循 单向数据流
+// View(视图) => Diapatch(触发) => Action(动作) => Reducer(处理) => Store(状态) => View(视图)
 export default store;

19.React/高阶/project4/src/store/slices/user.js

@@ -3,7 +3,8 @@ import { createSlice } from "@reduxjs/toolkit";
 export const userSlice = createSlice({
     name:'user1', // 指定状态片段的名称 类似于id
     initialState:{ //初始化状态
-        user:"蜡笔小新"
+        user:"蜡笔小新",
+        age: 3
     },
     // 方法
     reducers:{
@@ -16,11 +17,31 @@ export const userSlice = createSlice({
          *  */ 
         setName(state,action) {
             state.user = '哆啦A梦';
+        },
+        setAge(state,{payload}) {
+            // console.log(state,action)
+            state.age = payload;
         }
     
     }
 })
 
 export default userSlice.reducer;
-// 在slice对象中 有一个属性actions 类型是对象 存储所有reducer函数对应构建的actiion对象的函数
-export const {setName} = userSlice.actions;
+// 在slice对象中 有一个属性actions 类型是对象 存储所有reducer函数对应构建的action对象的函数
+export const {setName,setAge} = userSlice.actions;
+
+// 异步
+// export function asyncSetAge(x) {
+//     return (dispatch,getState) => {
+//         setTimeout(()=>{
+//             dispatch(setAge(x));
+//         },2000)
+//     }
+// }
+
+export const asyncSetAge = (x) => (dispatch,getState) => {
+    // console.log(getState())
+        setTimeout(()=>{
+            dispatch(setAge(x));
+        },2000)
+}