Redux: Redux核心概念

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

@@ -1,7 +1,25 @@
+import { useDispatch } from 'react-redux';
+import { setName } from '../store/slices/user-silce';
+
 export default function Home() {
+  const dispatch = useDispatch();
   return (
     <div>
       <h3>主页</h3>
+      <div>
+        {/* 当点击按钮的时候，需要执行dispatch函数，并传入一个action对象。
+          此时 ，redux开始工作，根据action.type属性找到正确的reducer函数 去
+          修改状态
+         */}
+        <button
+          onClick={() => {
+            // dispatch({ type: 'user/setName' });
+            dispatch(setName());
+          }}
+        >
+          修改姓名
+        </button>
+      </div>
     </div>
   );
 }

15_React/day-6/code/learn-redux/src/store/index.js

@@ -1,16 +1,19 @@
 import { configureStore } from '@reduxjs/toolkit';
+import userReducer from './slices/user-silce';
 
-const reducer = (state, action) => {
-  return {
-    user: {
-      name: '郭郭',
-    },
-  };
-};
+// const reducer = (state, action) => {
+//   return {
+//     user: {
+//       name: '郭郭',
+//     },
+//   };
+// };
 
 const store = configureStore({
-  // reducer: {},
-  reducer,
+  reducer: {
+    user: userReducer,
+  },
+  // reducer,
 });
 
 export default store;

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

@@ -0,0 +1,26 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const userSlice = createSlice({
+  name: 'user', // 指定状态片段的名称，类似与id的功能
+  initialState: {
+    name: '郭郭',
+    age: 18,
+  }, // 指定初始状态，就是默认状态
+  reducers: {
+    /**
+     * 每一个reducer函数 都会接收 两个 参数
+     * a: state 表示 当前状态
+     * b: action  一个对象，表示一个修改状态的动作 {type: '', payload }
+     */
+    setName(state, action) {
+      //! 在slice下所有的reducer函数中 可以直接修改状态，并且会保持响应式
+      state.name = '小爱';
+    },
+  }, // 用来定义修改状态的各种reducer函数
+});
+
+export default userSlice.reducer;
+// 在 slice对象中 会有一个属性 actions ，类型为对象。存储所有reducer函数对应构建action对象的函数
+
+// Action Creator
+export const { setName } = userSlice.actions;