redux

react/react高阶/Redux.md

@@ -35,6 +35,8 @@ const store = configureStore({
 4.抛出store 
 5.如需使用定义的函数方法 需在讲方法单独抛出
 
+## 9.slice切片
+## 10.异步
 
 创建react项目：
 1.npx create-react-app 项目名 

react/react高阶/project4/src/App.js

@@ -1,9 +1,11 @@
 import './App.css';
-import Count from './components/Count'
+// import Count from './components/Count'
+import News from './components/News'
 function App() {
   return (
     <div className="App">
-      <Count/>
+      {/* <Count/> */}
+      <News/>
     </div>
   );
 }

react/react高阶/project4/src/components/News.jsx

@@ -0,0 +1,29 @@
+import { useSelector, useDispatch } from "react-redux";
+import {addNum,reduceNum} from '../store/slices/count';
+function News() {
+    let num = useSelector((state) => {
+        return state.countSlice.value;
+    });
+    let name1 = '';
+    useSelector((state) => {
+        console.log(state,'初始化')
+        name1 = state.useSlice.name;
+    })
+    let dispatch = useDispatch();
+    return (
+        <>
+            <h1>新的开始</h1>
+            <h2>初始值：{num}</h2>
+            <h2>{name1}</h2>
+            <button onClick={()=>{
+                dispatch(addNum())
+            }}>++</button>
+            <br />
+            <button onClick={()=>{
+                dispatch(reduceNum())
+            }}>--</button>
+        </>
+    )
+}
+
+export default News;

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

@@ -1,23 +1,28 @@
 // 1.引入创建store方法
 import { configureStore } from "@reduxjs/toolkit";
+import countSlice  from "./slices/count";
+import useSlice from './slices/user';
 // 计数器状态管理
 // 方法名长一点  语义化强一点
-function countManager(state={value:10},action) {
-    switch(action.type) {
-        case 'count/add':
-            return {value: state.value + 1}
-        case 'count/reduce':
-            return {value: state.value - 1}
-        case 'count/self':
-            return {value:state.value + action.payload}
-        default:
-            return state;        
-    }
-}
+// function countManager(state={value:10},action) {
+//     switch(action.type) {
+//         case 'count/add':
+//             return {value: state.value + 1}
+//         case 'count/reduce':
+//             return {value: state.value - 1}
+//         case 'count/self':
+//             return {value:state.value + action.payload}
+//         default:
+//             return state;        
+//     }
+// }
 
 // 2.创建store
 const store = configureStore({
-    reducer: countManager
+    reducer: {
+        countSlice,
+        useSlice
+    }
 })
 
 
@@ -25,20 +30,20 @@ const store = configureStore({
 export default store;
 
 // 4.抛出需要的方法
-export function addNum() {
-    return {
-        type:'count/add'
-    }
-}
-export function reduceNum() {
-    return {
-        type:'count/reduce'
-    }
-}
+// export function addNum() {
+//     return {
+//         type:'count/add'
+//     }
+// }
+// export function reduceNum() {
+//     return {
+//         type:'count/reduce'
+//     }
+// }
 
-export function selfNum(number) {
-    return {
-        type:"count/self",
-        payload:number
-    }
-}
+// export function selfNum(number) {
+//     return {
+//         type:"count/self",
+//         payload:number
+//     }
+// }

react/react高阶/project4/src/store/slices/count.js

@@ -0,0 +1,30 @@
+import { createSlice } from "@reduxjs/toolkit";
+/**
+ * 抛出：
+ * export default
+ * export const xxxx = 值
+ * export function xxx = 方法
+ */
+
+// 1.创建切片
+// 2.定义切片
+// 3.抛出切片
+export const countSlice = createSlice({
+    name: 'Count',//唯一性
+    // 定义状态初始值
+    initialState: {
+        value: 0
+    },
+    reducers:{
+        addNum(state,action) {
+          state.value++;  
+        },
+        reduceNum(state,action) {
+            state.value--;
+        }
+    }
+})
+
+export default countSlice.reducer;
+
+export const {addNum,reduceNum} = countSlice.actions

react/react高阶/project4/src/store/slices/user.js

@@ -0,0 +1,10 @@
+import {createSlice} from '@reduxjs/toolkit';
+
+const user = createSlice({
+    name:"user",
+    initialState:{
+        name: '大头儿子和小头爸爸'
+    }
+})
+
+export default user.reducer;