React中使用Redux仓库管理工具

1.通过命令行工具创建一个react的项目

//1.执行命令
npx  create-react-app  react-redux-pro

2.redux的配置工具介绍

# redux的配置工具
    在React中使用redux，官方要求安装俩个其他插件-ReduxToolkit和react-redux

    1.Redux Toolkit(RTK)-官方推荐编写Redux逻辑的方式，是一套工具的集合集，简化书写方式

      简化store的配置方式,    内置immer支持可变式状态修改,  内置thunk更好的异步创建
    
    2.react-redux-用来 链接 Redux 和 React组件 的中间件

    

3.安装命令

# 安装命令
  npm install @reduxjs/toolkit  react-redux

安装依赖完成以后的具体步骤,

1.1首先在项目的根目录src 下创建store文件夹,里面包含index.js 和modules模块文件夹

1.2 在模块js里面先引入  import { createSlice } from "@reduxjs/toolkit";

1.3 在store目录下中的index.js文件中,导入子模块,随便注册子模块

2.1去注册内部使用store仓库的数据和方法

2.2 React组件中使用store中的数据

    在React组件中使用store中的数据,需要用到一个钩子函数- useSelector

    它的作用是store中的数据映射到组件中,

        

//从react-redux中引入useSelector
import {  useSelector } from "react-redux";

使用
const { count } = useSelector((state) => state.counter);

2.3  React组件修改store中的数据,使用store中的方法

 React组件中修改store中的数据需要借助另外一个hook函数-useDispatch，它的作用是生成提交action对象的dispatch函数，使用样例如下:

//引入useDispatch模块
import { useDispatch} from "react-redux";

// 导入store中的方法 
import { inscrement,decrement,addToNum} from './store/modules/counterStore'

//在组件中用变量接收
const dispatch = useDispatch();

//在结构中去使用
 <button onClick={()=>dispatch(decrement())}>减法</button>

 3.在组件中详细使用方法,总结

总结:

    1.组件中使用哪个hook函数获取store中的数据?

            useSelector

    2.组件中使用哪个hook函数获取dispatch方法?

            useDispatch

    3.如何得到要提交action对象?

            执行store模块中导出的actionCreater方法

# 传递参数

    提交action传参实现需求 在reducers的同步修改方法中添加action对象参数，在调用actionCreater的时候传递参数，参数会被传递到action对象payload属性上