react

16.react/react高阶/2.归纳.md

@@ -52,4 +52,30 @@ name:给action对象的type属性指定命名空间
 initialState：指定状态初始值
 reducers: 函数可以接受两个参数：
 state 整个切片下的状态对象
-action 代表了定义的执行类型和传参
+action 代表了定义的执行类型和传参
+
+## 10.异步
+Redux原生机制不支持异步处理，需要通过中间件去完成
+RTK中提供了一个内置的中间件thunk(think)去处理异步任务
+setTimeout/Promise/async await
+
+## 11.thunk
+1.安装 npm install redux-thunk
+2.函数会接收两个参数
+dispatch:触发异步回调所调用的函数
+getState:读取状态库store中所有的初始值
+```
+    在store：
+        export function asyncXXX(dispatch,getState) {
+            let state = getState();
+            dispatch(同步方法())
+        }
+    在页面：
+      引入：import {asyncXXX} from 'url'
+      调用：dispatch(asyncXXX)
+```
+## 12.模块化样式
+创建：xxx.module.css
+引入：import name from 'url'
+使用：
+< className='name.xxx'></>

16.react/react高阶/project4/package-lock.json

@@ -18,6 +18,7 @@
         "react-redux": "^9.2.0",
         "react-scripts": "5.0.1",
         "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
         "web-vitals": "^2.1.4"
       }
     },

16.react/react高阶/project4/package.json

@@ -13,6 +13,7 @@
     "react-redux": "^9.2.0",
     "react-scripts": "5.0.1",
     "redux": "^5.0.1",
+    "redux-thunk": "^3.1.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

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

@@ -1,23 +1,39 @@
-import {useSelector,useDispatch} from 'react-redux'
-import {addNum,reduceNum} from '../store/slices/count.js';
+import { useSelector, useDispatch } from "react-redux";
+import { addNum, reduceNum } from "../store/slices/count.js";
+// import './index.css'
+import part from './index.module.css';
+import { asyncAdd } from "../store/slices/newCount.js";
 function Part1() {
-  const my = useSelector((state)=>{
+  const my = useSelector((state) => {
     return state;
   });
-  const dispatch = useDispatch()
-  console.log(my,'my')
-    return (
-        <>
-            <h1>第一个</h1>
-            <p>我叫{my.userSlice.name}</p>
-            <p>数值是{my.countSlice.num}</p>
-            <button onClick={()=>{
-                dispatch(addNum(3))
-            }}>增加</button>
-            <button onClick={()=>{
-                dispatch(reduceNum())
-            }}>减少</button>
-        </>
-    )
+  const dispatch = useDispatch();
+  console.log(my, "my");
+  return (
+    <>
+      <h1>第一个</h1>
+      <p className={part.aa}>我叫{my.userSlice.name}</p>
+      <p>数值是{my.countSlice.num}</p>
+      <button
+        onClick={() => {
+          dispatch(addNum(3));
+        }}
+      >
+        增加
+      </button>
+      <button
+        onClick={() => {
+          dispatch(reduceNum());
+        }}
+      >
+        减少
+      </button>
+
+      <br />
+        <h2>异步数值：{my.newSlice.number}</h2>
+      <button onClick={() => {
+          dispatch(asyncAdd)}}>异步增加</button>
+    </>
+  );
 }
-export default Part1;
+export default Part1;

16.react/react高阶/project4/src/components/index.module.css

@@ -0,0 +1,3 @@
+.aa {
+    color: red;
+}

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

@@ -1,20 +1,18 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 // 引入store实例
-import store from './store';
+import store from "./store";
 // 引入组件
-import {Provider} from 'react-redux';
-const root = ReactDOM.createRoot(document.getElementById('root'));
+import { Provider } from "react-redux";
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <Provider store={store}>
-
-    <App />
+      <App />
     </Provider>
-   
   </React.StrictMode>
 );
 

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

@@ -2,15 +2,22 @@
 import {configureStore} from '@reduxjs/toolkit';
 import userSlice from './slices/user.js';
 import countSlice from './slices/count.js';
+import newSlice from './slices/newCount.js';
 // 2.创建store
 
 const store = configureStore({
     reducer:{
         userSlice,
-        countSlice
+        countSlice,
+        newSlice
     }
 })
-
+export function addCount(val) {
+    return {
+        type:'count/add',
+        payload:val
+    }
+}
 
 // 3.抛出store
 export default store;

16.react/react高阶/project4/src/store/slices/newCount.js

@@ -0,0 +1,28 @@
+import {createSlice} from '@reduxjs/toolkit';
+
+export const news = createSlice({
+    name:"News",
+    initialState:{
+        number:0
+    },
+    reducers:{
+        addNumber(state) {
+            state.number += 2
+        } 
+    }
+})
+
+export default news.reducer;
+export const {addNumber} = news.actions;
+
+
+// 实现异步操作
+export function asyncAdd(dispatch, getState) {
+    // dispatch 调用方法
+    // getState 状态库中所有的state状态 不是一个切片
+    const state1 = getState()
+    console.log(state1,'哈哈')
+    setTimeout(()=>{
+        dispatch(addNumber())
+    },3000)
+}