React学习day05-Redux-概念、作用、安装、使用、action传参

13、Redux

（1）概念：React中最常用的集中状态管理工具，类似于Vue中的Pinia（Vuex），可以独立于框架运行

（2）作用：通过集中管理的方式管理应用的状态

（3）工具简介

        1）Redux Toolkit（RTK）（官方推荐编写Redux逻辑的编写方式）：一套工具的集合集，简化书写方式

        2）react-redux：用来链接Redux和React组件的中间件（redux可以通过它获取状态，react组件可以使用它进行更新状态）

（4）安装配置基础环境

        1）使用CRA创建React项目（npx create-react-app 项目名）

        2）安装配套工具（npm i @reduxjs/toolkit react-redux）

        3）启动项目（npm start）

（5）准备工作

        1）对集中管理的部分单独创建一个store目录

        2）再创建一个modules目录，在内部存储多个store模块

        3）在store目录下准备一个入口文件，组合modules中所有的子模块，并导出store

        

（6）示例

        1）在modules下的子模块store

                ①创建子store仓库

                ②解构出仓库的方法（actionCreater函数）

        

                ③获取reducer

        

                ④按需导出仓库的方法（actionCreater函数）

        

                ⑤导出reducer

        

2）在入口文件

        ①导入子模块reducer

        ②使用configureStore和reducer创建Redux store，该store管理管理应用中名为num的这部分state，并通过分发actions来更新它

        ③导出仓库

3）在src下的index.js中

        ①导入Provider，并使用Provider标签将根组件包裹起来

        ②将react注入store（导入store，并在标签中通过store参数注入）

        4）在src下的App.js中使用store中的数据（通过钩子函数useSelector把store中的数据映射到组件中）

        5）在src下的App.js中修改store中的数据

                ①导入useDispatch函数，生成dispatch函数（作用：提交action对象）

        

               ②导入store仓库的方法

        

                ③通过dispatch使用库方法，提交action对象，修改store中的数据

        

                ④效果：

        初始数据：

        减：

        加：

（7）提交action传参

        1）在子仓库中新增一个方法（或者修改原来的方法）（参数将会附在新增方法action的payload上），解构，导出

        2）使用（在src下的App.js）

        3）效果：

——>