redux

21.react/高阶/project5/src/components/CountPage.jsx

@@ -1,6 +1,6 @@
 import { useDispatch, useSelector } from "react-redux";
 // useSelector 读数据  你选择的state片段 useSelector()
-import { addOne } from "../store/slices/counterSlice";
+import { addOne, asyncAddThing } from "../store/slices/counterSlice";
 function CountPage() {
     const { value } = useSelector(x => x.counterSlice);
     const dispatch = useDispatch();
@@ -10,7 +10,8 @@ function CountPage() {
         <div>
             <h1>计数器</h1>
             <h2>初始值:{value}</h2>
-            <button onClick={() => dispatch(addOne())}>加一</button>
+            <button onClick={() => dispatch(addOne(10))}>加一</button>
+            <button onClick={() => dispatch(asyncAddThing)}>延迟2s加一</button>
         </div>
     )
 }

21.react/高阶/project5/src/store/slices/counterSlice.js

@@ -8,12 +8,23 @@ const counterSlice = createSlice({
         value: 0
     },
     reducers: {
-        addOne(state) {
-            state.value += 1;
+        addOne(state, { payload }) {
+            //action: type: 'counter1/addOne', payload: 10
+            // console.log(action, 'action')
+            state.value += payload;
         }
     }
 })
 
+// redux-thunk redux-saga 
+// 把异步操作从reducer里拿出来 放在一个特殊的函数内 
+// 异步完成后 在用dispatch执行同步函数
+export function asyncAddThing(dispatch) {
+    // console.log(getState, '打印')
+    setTimeout(() => {
+        dispatch(addOne());
+    }, 2000)
+}
 // 抛出方法
 export const { addOne } = counterSlice.actions;
 // 抛出切片