react

16.react/react高阶/project4/src/components/Part1.jsx

@@ -3,6 +3,7 @@ import { addNum, reduceNum } from "../store/slices/count.js";
 // import './index.css'
 import part from './index.module.css';
 import { asyncAdd } from "../store/slices/newCount.js";
+import {addMain,reduceMain,newMain} from '../store';
 function Part1() {
   const my = useSelector((state) => {
     return state;
@@ -14,6 +15,7 @@ function Part1() {
       <h1>第一个</h1>
       <p className={part.aa}>我叫{my.userSlice.name}</p>
       <p>数值是{my.countSlice.num}</p>
+      <p>新数值是{my.counterReducer.value}</p>
       <button
         onClick={() => {
           dispatch(addNum(3));
@@ -29,6 +31,28 @@ function Part1() {
         减少
       </button>
 
+      <button
+        onClick={() => {
+          dispatch(addMain());
+        }}
+      >
+        增加1
+      </button>
+      <button
+        onClick={() => {
+          dispatch(reduceMain());
+        }}
+      >
+        减少1
+      </button>
+      <button
+        onClick={() => {
+          dispatch(newMain(5));
+        }}
+      >
+        加5
+      </button>
+
       <br />
         <h2>异步数值：{my.newSlice.number}</h2>
       <button onClick={() => {

16.react/react高阶/project4/src/store/index.js

@@ -5,19 +5,46 @@ import countSlice from './slices/count.js';
 import newSlice from './slices/newCount.js';
 // 2.创建store
 
+function counterReducer(state={value:0},action) {
+    switch (action.type) {
+        case 'counter/addValue':
+        return {value:state.value + 1};
+        case 'counter/reduceValue':
+        return {value:state.value - 1};
+        case 'counter/newValue':
+            return {value:state.value + action.payload};
+        default:
+            return state;
+    }
+}
+
+export function addMain() {
+    return {
+        type:'counter/addValue'
+    }
+}
+export function reduceMain() {
+    return {
+        type:'counter/reduceValue'
+    }
+}
+
+export function newMain(val) {
+    return {
+        type:'counter/newValue',
+        payload: val
+    }
+}
+
+
 const store = configureStore({
     reducer:{
         userSlice,
         countSlice,
-        newSlice
+        newSlice,
+        counterReducer
     }
 })
-export function addCount(val) {
-    return {
-        type:'count/add',
-        payload:val
-    }
-}
 
 // 3.抛出store
 export default store;