React进阶(Redux,RTK,dispatch,devtools)

news/2024/5/29 9:30:18/文章来源:https://blog.csdn.net/m0_62300955/article/details/136543035

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1005809.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

国科大网络行为学导论代码作业--更新中

一、Xray安装 参考自:Xray的安装与使用(超详细)_xray使用教程-CSDN博客 下载网址:Releases chaitin/xray GitHub 解压 双击安装 生成证书 cd到xray目录,生成证书 复制链接 然后cd到xray目录 .\xray_windows_amd6…

qt 格式化打印 日志 QMessagePattern 格式词法语法及设置

一、qt源码格式化日志 关键内部类 QMessagePattern qt为 格式化打印日志 提供了一个简易的 pattern(模式/格式) 词法解析的简易的内部类QMessagePattern,作用是获取和解析自定义的日志格式信息。 该类在qt的专门精心日志操作的源码文件Src\qtbase\src\corelib\global\qloggi…

代码学习记录13

随想录日记part13 t i m e : time: time: 2024.03.06 主要内容:今天的主要内容是二叉树的第二部分哦,主要有层序遍历;翻转二叉树;对称二叉树。 102.二叉树的层序遍历226.翻转二叉树101. 对称二叉…

生存预后不显著?最佳阈值来帮你!| 附完整代码 + 注释

大家在进行生存预后分析时发现结果不显著,是不是当头一棒!两眼一黑!难不成这就代表我们的研究没意义吗?NONONO!别慌!说不定还有救!快来看看最佳阈值能不能捞你一把! 对生存分析感兴趣…

docker容器镜像管理+compose容器编排(持续更新中)

目录 一、 Docker的基本组成 二、 容器和镜像的关系 2.1 面向对象角度 2.2 从镜像容器角度 三、 容器命令 3.1 使用Ubuntu 3.1.1 下载镜像 3.1.2 新建和启动容器 run 3.1.3交互式 compose编排与部署 1. docker-compose部署 2. docker-compose.yml模板 …

数学建模理论与实践国防科大版

目录 1.数学建模概论 2.生活中的数学建模 2.1.行走步长问题 2.2.雨中行走问题 2.3.抽奖策略 2.4.《非诚勿扰》女生的“最优选择” 3.集体决策模型 3.1.简单多数规则 3.2.Borda数规则 3.3.群体决策模型公理和阿罗定理 1.数学建模概论 1.数学模型的概念 2.数学建模的概…

win11家庭版docker和milvus

docker 1、官网下载docker文件Get Started | Docker,选择download for windows下载。 2、双击打开下载好的文件Docker Desktop Installer.exe,add shortcut to desktop选择√代表同意添加快捷键到桌面,如果不勾选就说明不创建快捷键&#x…

[HackMyVM]靶场 Run

kali:192.168.56.104 主机发现 arp-scan -l # arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:d2:e0:49, IPv4: 192.168.56.104 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.56.1 0a:00:27:00:00:05 (Un…

51单片机系列-单片机定时器

🌈个人主页:会编辑的果子君 💫个人格言:“成为自己未来的主人~” 软件延时的缺点 延时过程中,CPU时间被占用,无法进行其他任务,导致系统效率降低,延时时间越长,该缺点就越明显&…

详解Linux例行性工作

例行性工作(计划任务) 场景: 生活中,我们有太多场景需要使用到闹钟,比如早上7点起床,下午4点开会,晚上8点购物,等等。再Linux系统里,我们同样也有类似的需求。比如我们…

ChatGPT 串接到 Discord - 团队协作好助理

ChatGPT 串接到 Discord - 团队协作好助理 ChatGPT 是由 OpenAI 开发的一个强大的语言模型,本篇文章教你如何串接 Discord Bot ,协助团队在工作上更加高效并促进沟通与协作。使 ChatGPT 发挥出最大的功效,进一步提升工作效率和团队协作能力。…

短视频解析接口分发系统,附带系统搭建教程

搭建教程 宝塔面板:Nginx系统 php7.2 Mysql 5.6-5.7 伪静态Thinkphp 上传文件直接访问域名安装即可 解析接口推荐:ce.qsy.mobi 源码免费下载地址抄笔记

SpringAMQP创建交换机和队列

SpringAMQP提供的Exchange接口 一基于bean注解: 一.Fanout交换机 package com.itheima.consumer.config;import org.springframework.amqp.core.Binding; import org.springframework.amqp.core.BindingBuilder; import org.springframework.amqp.core.FanoutExchang…

汇编课设——秒表2

1. 设计要求 基于 51 开发板,利用键盘作为按键输入,将数码管作为显示输出,实现电子秒表。 功能要求: (1)计时精度达到百分之一秒; (2)能按键记录下5次时间并通过按键回看 (3)设置时间,实现倒计时,时间到,数码管闪烁 10 次,并激发蜂鸣器,可通过按键解除。 2. 设计思…

基于恒功率PQ控制的三电平并网逆变器MATLAB仿真模型

微❤关注“电气仔推送”获得资料(专享优惠) 模型简介 三相 T 型三电平逆变器电路如图所示,逆变器主回路由三个单相 T 型逆变器组成。 直流侧输入电压为 UPV,直流侧中点电位 O 设为零电位,交流侧输出侧是三相三线制连…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Select)

提供下拉选择菜单&#xff0c;可以让用户在多个选项之间选择。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 Select(options: Array<SelectOption>) 参数&#xff1a;…

媒体单位专用小记者报名及各类活动报名系统介绍

媒体单位专用小记者报名及各类活动报名系统介绍 小记者活动鼓励孩子们关注生活和社会&#xff0c;丰富成长体验&#xff0c;开启心智&#xff0c;淬砺思想。这不仅有助于提高他们的理性思辨力&#xff0c;还能培养他们的社会责任感和公民意识。小记者活动为学生提供了一个全新…

docker ENTRYPOINT [“sh“,“-c“,“java“,“-jar“,“Hello.jar“] 启动失败问题分析

因为没系统的学过linux语法&#xff0c;所以才会产生如下疑问。大佬请跳过。 问题&#xff1a;当在dockerfile里面配置 ENTRYPOINT ["sh","-c","java","-jar","Hello.jar"] &#xff0c;启动对应容器时会无法正常运行&…

web项目的搭建

使用Webstorm并创建Next.js文件 1、配置nodejs环境、安装webstorm【配置node.js可以使用nvm去管理nodejs的版本】 2、需要破解webstorm&#xff0c;可能会导致原本的idea失效&#xff0c;注册码过期 3、taobao的npm过期&#xff0c;导致npm is sass执行不成功&#xff0c;需…

【leetcode热题】寻找旋转排序数组中的最小值 II

难度&#xff1a; 困难通过率&#xff1a; 38.7%题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题目描述 假设按照升序排序的数组在预先未知的某个点上进行了旋转。 ( 例如&#xff0c;数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] )。 请找出其中最小的…