Redux: Redux获取状态&带参数的状态修改

15_React/day-6/code/learn-redux/src/pages/Home.jsx

@@ -1,8 +1,23 @@
-import { useDispatch } from 'react-redux';
-import { setName } from '../store/slices/user-silce';
+import { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { setName, setAge } from '../store/slices/user-silce';
 
 export default function Home() {
   const dispatch = useDispatch();
+  let [age, changeAge] = useState('');
+
+  // const user = useSelector((state) => {
+  //   console.log(`output->state`, state);
+  //   return state.user;
+  // });
+
+  // const user = useSelector(({ user }) => {
+  //   console.log(`output->state`, state);
+  //   return user;
+  // });
+
+  const user = useSelector(({ user }) => user);
+
   return (
     <div>
       <h3>主页</h3>
@@ -11,6 +26,10 @@ export default function Home() {
           此时 ，redux开始工作，根据action.type属性找到正确的reducer函数 去
           修改状态
          */}
+        <div>
+          <p>姓名：{user.name}</p>
+          <p>年龄：{user.age}</p>
+        </div>
         <button
           onClick={() => {
             // dispatch({ type: 'user/setName' });
@@ -19,6 +38,22 @@ export default function Home() {
         >
           修改姓名
         </button>
+        <p>
+          <input
+            type="text"
+            value={age}
+            onChange={(e) => {
+              changeAge(e.target.value);
+            }}
+          />{' '}
+          <button
+            onClick={() => {
+              dispatch(setAge(Number(age) || 0));
+            }}
+          >
+            修改age
+          </button>
+        </p>
       </div>
     </div>
   );

15_React/day-6/code/learn-redux/src/store/slices/user-silce.js

@@ -16,6 +16,10 @@ const userSlice = createSlice({
       //! 在slice下所有的reducer函数中 可以直接修改状态，并且会保持响应式
       state.name = '小爱';
     },
+    setAge(state, { payload }) {
+      // console.log(`output->action`, action);
+      state.age = payload;
+    },
   }, // 用来定义修改状态的各种reducer函数
 });
 
@@ -23,4 +27,4 @@ export default userSlice.reducer;
 // 在 slice对象中 会有一个属性 actions ，类型为对象。存储所有reducer函数对应构建action对象的函数
 
 // Action Creator
-export const { setName } = userSlice.actions;
+export const { setName, setAge } = userSlice.actions;