RTK的使用

下面谈谈通过RTK实现购物车功能的案例

一、项目的搭建

1、使用CRA创建 react项目

// 创建脚手架
npm i -g create-react-app

// 创建一个app框架
create-react-app 项目名称

2、思路和步骤

基本开发思路：使用RTK来管理应用状态，组件负责数据渲染和dispath触发action提交数据
实现步骤：搭建前端项目和mock服务，使用RTK编写 store（异步action），组件触发action并渲染数据

二、实现过程

1、在 store 下建立一个文件，存储列表数据，使用createSlice方法管理 state数据和 reducers 方法

2、封装一个异步请求来获取数据，通过dispatch方法提交

3、使用React-ToolKit中的configureStore方法简化store的设置和配置

4、通过react中的Provider组件，把创建好的store实例注入到应用中

5、store数据的使用，通过 react-redux 中的useSelector钩子函数获取store中的数据映射到组件中，再使用useDispatch钩子函数提交action对象中的dispatch函数，利用useEffect钩子监听数据的变化

6、数据渲染

结果显示

7、添加到购物车 使用 RTK 对数据进行管理，如果添加过了，就数量增加，如果没有就添加到购物车中的列表触发 addCart 方法，把数据添加到数据列表中

在组件中引入，然后在页面中点击触发，就会把该食品添加到购物车列表中去

结果显示

8、购物车的数量和金额的统计

通过reduce方法计算购物车内食品的金额

9、购物车列表功能

在store仓库中添加increaseCount增加，decreaseCount减少以及清空购物车clearMenu