1、初识Redux

是React最常用的集中状态管理工具，类似于Vue中的Pinia(Vuex)，可以独立于框架运行

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

案例-实现一个计数器

实现步骤：

Redux管理数据的流程：

state:一个对象，存放管理的数据状态

action:一个对象，描述怎么操作数据

reducer:一个函数，根据action的描述生成一个新的state

2、配套工具：

（1）安装两个插件，Redux Toolkit和react-redux

Redux Toolkit:编写Reducx的逻辑的方式，是一套工具的合集，简化书写方式

react-redux：用=用来链接Reducx和React的中间件

配置基础环境：

3、使用Redux Toolkit创建counterStore

4、React组件中使用store中的数据

使用钩子函数-useSelector

修改数据，通过useDispatch

得到要提交的action对象：执行store模块中导出的actionCreater方法

5、提提交action参数

在reducer的同步修改方法中添加action对象参数，在调用actionCreater方法的时候传递参数，参数会被传递到action对象的playload属性上。

6、异步状态操作

1）创建store的同时配置修改状态的方法

2）单独封装一个函数，在函数内部return一个新韩淑，在新函数中

（1）封装异步请求获取数据

（2）调用同步actionCreater传入异步数据会生成一个action对象，并使用dispatch提交

3）组件中dispatch的写法保持一致

7、Redux调试：插件devtools

（更多工具-扩展程序（自行安装）），安装好之后，当程序检测到react相关代码时，顶部会有redux的工具栏

8、案例-美团外卖（由于该项目就是基本的一些数据渲染和逻辑实现，没有出现一些很棘手的问题，因此在这里只提供大概思路，代码不再演示）

环境准备：首先，去github克隆项目

其次，安装所有依赖：npm i

紧接着，启动mock服务（提供接口）：npm run serve

最后，启动前端服务：npm run start

第一部分：分类和商品列表渲染

实现步骤：

1）启动项目（mock服务和前端服务）

2）使用PTK编写store(异步action)

3)组件触发action并且渲染数据

第二部分:点击分类激活交互实现

Tab切换类交互：

需求分析：

1）记录当前点击项（activeIndex)

2）动态控制激活类名(activeIndex===index)

实现步骤：

1)使用RTK编写管理activeIndex

2)组件中点击时触发action更改activeIndex

3)动态控制激活类名显示

第三部分：商品列表切换展示

和左边tab切换部分共享activeIndex

第四部分：添加购物车

实现步骤：

1）使用RTK管理新状态cartList

2)判断购物车中是否已经添加过商品？是：更新count,否：直接push进去

3）组件中点击时接收数据提交action添加购物车

怎么判断是否添加过？以action.payload.id去cartList中去找，如果匹配到，返回找到的对象，在item.count上+1

第五部分：统计区

需求分析：

1）购物车数量和总计统计

2）高亮功能实现

实现步骤：

1）基于store中的cartList的length渲染数据

2）基于store中的cartList计算价格price*count（使用reduce求和）

3）购物车cartList的length不为0则高亮

第五部分：购物车列表

需求分析：

1）控制列表渲染

2）购物车增减逻辑实现

3）清空购物车实现

实现步骤：

1）使用cartList遍历渲染列表

2）RTK中编写增减reducer,组件中提交action

3)RTK中增加清除购物车reducer,组件中提交action

注意：购物车商品数量不能为0，加一个判断，如果为0，直接终止程序不再往下走，

第六部分：控制购物车显示和隐藏

需求分析：

1）点击统计区域时，购物车列表显示

2）点击蒙层区域时，购物车隐藏

实现步骤：

1）使用useState声明控制显示隐藏的状态

2)点击统计区域时设置状态为true

3)点击蒙层区域设置状态为false

本文主要详细介绍了react中常用的状态管理工具，并且通过一个外卖平台的小案例来将理论知识应用到实际项目中，代码逻辑都很简单，在这里不予赘述，只总结分享理论层面的知识，有需要代码者可以私信我获取，今天的文章就到这儿啦，我们下期间~