react

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

@@ -6,4 +6,50 @@ a. 创建store文件夹 存放redux文件
 b. 需要在根文件中引入store实例
 c. 在react-redux库中引入私有组件（Provider）
 d. 使用组件包裹跟页面 并在组件中绑定store实例
-## 5.核心概念
+
+
+## 5.核心概念
+1.state:与vuex相似 同一存储数据状态
+2.Action:是一个对象 译为：行为；两个字段
+type:事件相关类型 必传
+payload:参数 选传
+3.Reducer函数：是一个函数也可看成一个对象 绑定了所有定义的修改函数的状态 里面包含了一个或多个定义的修改状态 所有可以看成一个大的reducer
+
+## 6.组件引入状态
+采用hook方式
+useSelector():返回state中的状态值
+const xxx = useSelector((state) => {
+    return state....
+})
+
+## 7.方法的使用
+从xxx.actions中抛出需要使用的方法（方法需解构）
+在需求页面引入方法
+通过dispatch出发action行为
+调用useDispatch()钩子进行触发
+const dispatch = useDispatch()
+触发：dispatch(方法名())  
+
+## 8.状态管理库 store
+1.从RTK中引入创建store的方法：configureStore
+2.创建store:
+```
+    const store = configureStore({
+        reducer:{
+            定义修改函数的状态...
+        }
+    })
+```
+3.定义修改函数的状态方法
+4.抛出store
+5.如果需要使用定义函数的状态方法 可以再定义时直接抛出
+
+## 9.slice切片
+1.创建切片：在RTK中引入createSlice函数来创建一个slice对象
+2.const xxx = createSlice(options)
+options对象包含以下属性：
+name:给action对象的type属性指定命名空间
+initialState：指定状态初始值
+reducers: 函数可以接受两个参数：
+state 整个切片下的状态对象
+action 代表了定义的执行类型和传参

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

@@ -1,23 +1,9 @@
-import logo from './logo.svg';
 import './App.css';
-
+import Part1 from './components/Part1.jsx';
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+     <Part1/>
     </div>
   );
 }

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

@@ -0,0 +1,23 @@
+import {useSelector,useDispatch} from 'react-redux'
+import {addNum,reduceNum} from '../store/slices/count.js';
+function Part1() {
+  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>
+        </>
+    )
+}
+export default Part1;

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

@@ -1,10 +1,16 @@
 // 1.引出创建store的方法
 import {configureStore} from '@reduxjs/toolkit';
-
+import userSlice from './slices/user.js';
+import countSlice from './slices/count.js';
 // 2.创建store
-const store = configureStore({
 
+const store = configureStore({
+    reducer:{
+        userSlice,
+        countSlice
+    }
 })
 
+
 // 3.抛出store
 export default store;

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

@@ -0,0 +1,21 @@
+import {createSlice} from '@reduxjs/toolkit';
+
+export const count = createSlice({
+    name:'Count',
+    initialState:{
+        num:0,
+        flower:"牡丹"
+    },
+    reducers:{
+        addNum(state,{payload}){
+            state.num += payload;
+            console.log(payload,'加')
+        },
+        reduceNum(state,action) {
+            state.num--;
+            console.log(action,'减')
+        }
+    }
+})
+export default count.reducer;
+export const {addNum,reduceNum} = count.actions

16.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;