Redux的基础操作和思想

在这里插入图片描述

什么是Redux?

Redux是JavaScript应用的状态容器,提供可预测的状态管理! Redux除了和React一起用外,还支持其它框架;它体小精悍(只有2kB, 包括依赖),却有很强大的插件扩展生态! Redux提供的模式和工具使您更容易理解应用程序中的状态何时、何地、为什么以及如何更新,以及当这些更改发生时,您的应用程序逻辑将如何表现!

我什么时候应该用Redux?

Redux在以下情况下更有用:
●在应用的大量地方,都存在大量的状态
●应用状态会随着时间的推移而频繁更新,更新该状态的逻辑可能很复杂
●中型和大型代码量的应用,很多人协同开发

Redux库和工具

Redux是一个小型的独立JS库,但是它通常与其他几个包一起使用:
React-Redux:官方库,让React组件与Redux有了交互,可以从store读取些state,可以通过dispatch actions来更新store!
Redux Toolkit:推荐的编写Redux逻辑的方法。包含必不可少的包和函数。简化了大多数Redux任务,防止了常见错误,并使编写Redux应用变得更加容易。
Redux DevTools Extension:可以显示Redux存储中状态随时间变化的历史记录,方便调试应用程序。


redux基础流程:

在这里插入图片描述


1.创建store

在这里插入图片描述

为了在各个组件中,都可以把创建的store获取到,我们可以基于上下文的方
案:
1.在index.jsx中,基于ThemeContext.Provider把创建的store放在上下文中
2.因为所有组件最后都是在index.jsx中渲染,所有组件都可以理解为
index.jsx的后代组件,基于上下文方案,获取在上下文中存储的store就可以
了!!!

2.创建上下文并且引入

祖先组件中

错误写法:

在这里插入图片描述

浅拷贝,每次都是第一次产生的那个闭包!!!!所以无法更新

正确写法:

在这里插入图片描述

3.后代组件:类组件

在这里插入图片描述

3.后代组件:函数组件

在这里插入图片描述


redux具体的代码编写顺序

1.创建store,规划出reducer ,当中的业务处理逻辑可以后续不断完善,但是最开始reducer的这个架子需要先搭建取来

2.在入口中,基于上下文对象,把store放入到上下文中;需要用到store的组件, 从上下文中获取! !

3.组件中基于store,完成公共状态的获取、和任务的派发

  • 使用到公共状态的组件,必须向store的事件池中加入让组件更新的办法;只有这样,才可
    以确保,公共状态改变,可以让组件更新,才可以获取最新的状态进行绑定! !

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

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

相关文章

与用户同行!2023卡萨帝开启高端生活方式新时代

6月20日,2023思享荟暨卡萨帝品牌升级发布会在重庆国际博览中心举行。在经历了高端产品引领、高端品牌引领、高端场景引领后,卡萨帝启动全新品牌升级,持续与用户同行,开启高端生活方式引领的新时代。 现场,海尔智家副总…

量化交易:止盈策略与回测

我们买基金或股票的时候通常用最简单的策略进行决策:低买高卖,跌的多了就加仓拉低持有成本,达到收益率就卖出。 那么如何用代码表示这个策略呢?首先定义交易信号则是:0.5%时买入,目标止盈线是1.5%&#xf…

ELFK日志分析系统并使用Filter对日志数据进行处理

目录 一、 FilebeatELK 部署Filebeat 节点上操作 二、Filtergrok 正则捕获插件内置正则表达式调用自定义表达式调用 mutate 数据修改插件multiline 多行合并插件date 时间处理插件 一、 FilebeatELK 部署 Node1节点(2C/4G):node1/192.168.15…

Django rest framework基本知识

使用pycharm生成Django项目后,会生成工程目录和app目录 工程目录下5个文件,settings.py是全局配置相关的 urls.py是路有相关的 app相关的目录 models.py 数据库ORM对应的模型类 serializers.py 序列化与反序列化处理 views.py 根据request进行…

手工测试没有前途,自动化测试会取代手工测试?

在测试行业,一个一直被讨论的问题就是:手工测试没有前途,自动化测试会取代手工测试? 首先说结论:自动化测试不会取代手工测试,这完全是两个维度的事情。为什么不会呢?我们需要从本源上说起。 什…

DINO-DETR匈牙利匹配与加噪过程学习记录

今天再来回顾一下DINO中匈牙利匹配与损失函数部分,该部分大致与DETR相似,却又略有不同。 为了查看数据方便,博主将num_query改为20,max_select值也为20。 匈牙利匹配过程 首先是数据送入匈牙利匹配中进行标签匹配过程了。 获取…

【Android自动化测试】Ui Automator技术(以对QQ软件自动发说说为例)

文章目录 一、引言二、了解(Android官方文档)1、UiDevice 类2、UI Automator API3、UI Automator 查看器 三、使用1、依赖2、代码 一、引言 描述:UI Automator 是一个界面测试框架,适用于整个系统上以及多个已安装应用间的跨应用…

react---react router 5 基本使用

目录 1.路由介绍 2.路由使用 3.路由组件和一般组件 4.Switch 单一匹配 5.解决二级路由样式丢失的问题 6.路由精准匹配和模糊匹配 7.Redirect路由重定向 1.路由介绍 路由是根据不同的 URL 地址展示不同的内容或页面,在 SPA 应用中,大部分页面结果…

理解Web3公链共识算法的原理与机制

Web3时代带来了去中心化、透明和安全的数字经济发展,而公链的共识算法是实现这一目标的关键。共识算法确保了公链网络中的节点对交易和状态的一致性达成共识,同时防止了恶意行为和双重支付等问题。本文将深入探讨Web3公链共识算法的核心原理与机制。 1.共…

【Uniapp】小程序携带Token请求接口+无感知登录方案2.0

本次改进原文《【Uniapp】小程序携带Token请求接口无感知登录方案》,在实际使用过程中我发现以下bug: 若token恰好在用户访问接口时到期,就会直接查询为空,不反映token过期问题(例如:弹窗显示订单查询记录…

【数据库数据恢复】SQL Server数据表结构损坏的数据恢复案例

数据库故障&分析: SQL server数据库数据无法读取。 经过初检,发现SQL server数据库文件无法被读取的原因是因为底层File Record被截断为0,无法找到文件开头,数据表结构损坏。镜像文件的前面几十M空间和中间一部分空间被覆盖掉…

饶派杯XCTF车联网安全挑战赛Reverse GotYourKey

文章目录 一.程序逻辑分析二.线程2的operate方法解析三.找出真flag 一.程序逻辑分析 onCreate方法中判断SDK版本是否>27 然后创建两个线程 第一个线程是接受输入的字符串并发送出去 第二个线程用于接受数据 线程1,就是将字符串转为字节数组发送出去 线程2,作为服务端接受…

springboot动态加载json文件

resources下面的配置文件,application文件修改启动会实时加载新的内容 其他的文件属于静态文件,打包后会把文件打入jar里面,修改静态文件启动不会加载新的内容 Resource areacode nre FileSystemResource("config" File.separa…

STM32——07-STM32定时器Timer

定时器介绍 软件定时 缺点:不精确、占用 CPU 资源 void Delay500ms () //11.0592MHz { unsigned char i , j , k ; _nop_ (); i 4 ; j 129 ; k 119 ; do { do { while ( -- k ); } while ( -- j ); } while ( -- i ); } 定时器工…

Springboot--关于自定义stater的yml无法提示

1.前言 在以前在搭建架构的时候就碰到了类似的情况,在使用EnableConfigurationProperties注解的时候,不管怎样,在项目中引入了该starter的情况下依然不发自动的提示properties里面的属性。 Data ConfigurationProperties(prefix "pro…

vite vs babel+webpack | 创建一个简单的vite项目打包运行

有babel、webpack这些优秀的框架,为什么使用vite? 因为vite编译快,启动快,使用简单,还自带一个热更新重启的服务器,vite能够自动的帮我打包所用到的依赖,有些依赖只有用到才会导入,不用到不会…

开放式耳机和封闭式耳机的区别?开放式耳机到底有哪些优缺点?

开放式耳机从字面意思可以理解为:开放耳朵,不需要入耳就可以听见声音的耳机,所以它和封闭式耳机的最大区别就是不入耳。这种耳机最大的优点就是不压迫不封闭耳道,而且在听耳机音的同时能够及时注意到周围环境的声音,从…

【图神经网络】5分钟快速了解Open Graph Benchmark

10分钟快速了解Open Graph Benchmark Open Graph Benchmark (OGB)安装OGB简单使用节点分类任务数据集链路预测任务数据集图属性预测任务数据集Large-Scale Graph ML Datasets 内容来源 Open Graph Benchmark (OGB) Open Graph Benchmark(OGB)是用于图机…

从一个线上 Android Bug 回看 Fragment 的基础知识

作者:Kotlin上海用户组 公司的项目在最近遇到了一个与 Fragment 有关的线上 crash,导致这个问题的根本原因比较复杂,导致修复方案的可选项非常有限,不过这个问题的背景、crash 点,以及修复过程都非常有趣,值…

【RabbitMQ教程】第四章 —— RabbitMQ - 交换机

💧 【 R a b b i t M Q 教 程 】 第 四 章 — — R a b b i t M Q − 交 换 机 \color{#FF1493}{【RabbitMQ教程】第四章 —— RabbitMQ - 交换机} 【RabbitMQ教程】第四章——RabbitMQ−交换机💧 🌷 仰望天空,妳我亦是…