redux

react/react高阶/Redux.md

@@ -4,4 +4,41 @@
 ## 4.Redux在框架中使用
 a.需要在根文件中引入store实例
 b.在react-redux库中引入私有组件
-c.使用组件包裹根页面 并在组件中绑定store实例
+c.使用组件包裹根页面 并在组件中绑定store实例
+## 5.核心概念
+1.State: 与Vuex相似，统一存储状态值
+2.Action:是一个对象，译为：行为；包含两个字段
+    a.type 类型，事件相关类型，必传
+    b.payload 可传参数值 选传
+3.Reducer:是一个函数，绑定了所定义的修改函数的状态，也可以是一个对象，里面包含多个
+         定义的修改状态，进而合成一个大的reducer
+## 6.组件引入状态
+为了便携开发，采用hook方式
+useSelector():返回state中的状态值
+let xxx = useSelector((state) => {return state...})
+
+## 7.修改方法
+采用dispath触发action行为
+使用useDispath():触发action所定义的类型方法
+let dispath = useDispath() 
+dispatch(方法名())
+
+## 8.状态管理库Store
+1.从RTK中引入创建store的方法configureStore
+2.创建store 
+const store = configureStore({
+    reducer: {
+        定义的修改函数状态，...
+    }
+})
+3.修改函数状态方法定义
+4.抛出store 
+5.如需使用定义的函数方法 需在讲方法单独抛出
+
+
+创建react项目：
+1.npx create-react-app 项目名 
+2.npm install create-react-app 
+  create-react-app 项目名
+
+3.起项目：在当前文件的根目录起项目 命令在package.json文件夹中 scripts下

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

@@ -1,16 +1,33 @@
 // 引入store方法
-// import {add,reduce} from './store';
+import {addNum,selfNum,reduceNum} from '../store';
+// 引入ref钩子 获取标签的值
+import { useRef } from 'react';
 // 使用钩子获取 store中的值
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 function Count() {
+    let inpRef = useRef(null);
+    let dispatch = useDispatch();
     let num = useSelector((state)=>{
         console.log(state,'你好')
         return state.value;
     })
+    function handleClick() {
+        dispatch(addNum())
+    }
+    function handleUp(e) {
+        if(e.keyCode === 13) {
+            dispatch(selfNum(inpRef.current.value-0))
+        }
+    }
     return (
         <>
             <h1>计数器</h1>
             <h2>初始值:{num}</h2>
+            <button onClick={handleClick}>增加</button>
+            <button onClick={()=>{
+                dispatch(reduceNum())
+            }}>减少</button>
+            <input type="text" ref={inpRef} onKeyUp={handleUp} />
         </>
     )
 }

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

@@ -1,6 +1,5 @@
 // 1.引入创建store方法
 import { configureStore } from "@reduxjs/toolkit";
-
 // 计数器状态管理
 // 方法名长一点  语义化强一点
 function countManager(state={value:10},action) {
@@ -9,6 +8,8 @@ function countManager(state={value:10},action) {
             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;        
     }
@@ -21,4 +22,23 @@ const store = configureStore({
 
 
 // 3.抛出store
-export default store;
+export default store;
+
+// 4.抛出需要的方法
+export function addNum() {
+    return {
+        type:'count/add'
+    }
+}
+export function reduceNum() {
+    return {
+        type:'count/reduce'
+    }
+}
+
+export function selfNum(number) {
+    return {
+        type:"count/self",
+        payload:number
+    }
+}