大白话说说redux

redux的3个重要概念

  1. store 就是用来存放应用的各种状态的
  2. action 就是用来描述应用发生了什么动作的,注意理解他是对动作的描述
  3. reducer 就是用来处理应用的动作,并且决定怎么去更新应用存放在store里面的状态。

redux的3个原则

  1. 应用的所有状态存储为redux store的单一对象
  2. 应用不能直接更改store存储的状态,你需要让redux通过action来知道需要更改状态
  3. 你需要通过写一个reducer函数来更新状态,reducer解释两个参数,(之前的状态,action),函数返回最新的state.
    在这里插入图片描述

action 和 action creator

在这里插入图片描述

reducer

reducer根据action的type做相应的动作。
在这里插入图片描述

store是怎么实现保存应用的状态的?

创建store的时候,需要传的reducer参数给到store. 而reducer里面,保存了应用的状态。

const store = createStore(reducer)

整个处理流程,如下图

在这里插入图片描述
所以redux的整个流程,用大白话总结起来:顾客[app] 朝店里[store],用喇叭[actiong creator]喊了声[dispatch]买蛋糕[action],店员[reducer]听到后,启动买蛋糕的流程[去架子上拿蛋糕,库存减1…]. 顾客不能直接自己到架子上拿蛋糕[app 不能直接操作状态],否则就容易乱套。

++ 对reducer函数里面的 …state 的理解
…state 是对原来的 state 对象进行了浅拷贝,但这个拷贝过程并不涉及对 state 变量本身的重新赋值。它实际上是在创建一个新对象,并且这个新对象包含了原 state 对象中的所有属性和对应的值。这个新对象随后会用新的值更新特定的属性,而不影响原始的 state 对象。

在 Redux 中,reducer 函数必须是纯函数,意味着它们不能修改其接收到的输入参数,包括 state。因此,我们使用对象扩展运算符 … 来创建 state 的一个新的副本,然后在这个新副本上做出修改并返回,而原来的 state 对象保持不变。这样做是为了保持状态的不可变性,它是 Redux 架构中非常重要的一个概念。

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

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

相关文章

BUGKU-WEB 源代码

题目描述 题目截图如下&#xff1a; 进入场景看看&#xff1a; 解题思路 你说啥就是啥&#xff1a;去源代码吧 相关工具 URL解码平台&#xff1a;https://www.iamwawa.cn/urldecode.html 解题步骤 随便输入试试 2. 看看源码 存在script&#xff1a; <script> …

Java学习--黑马SpringBoot3课程个人总结-2024-02-14

1.子路由 //定义路由关系 const routes[{ path: /login, component: LoginVue},{ path: /, component: LayoutVue,redirect:/article/manage,children:[{path:/article/category,component:ArticleCategoryVue},{path:/article/manage,component:ArticleManageVue},{path:/…

IO-day3

思维导图 1.使用fread和fwrite完成图片的拷贝。 2.使用read和write完成两个文件的拷贝。 3.将时间在文件中跑起来。

Mock.js

在开发后端的应用中&#xff0c;我们使用postman来测试接口&#xff0c;观察和验证前后端之间的数据传递是否正常。 在开发前端的应用中&#xff0c;我们使用Mock.js来模拟后端服务&#xff0c;以便进行前端业务逻辑的开发和测试&#xff08;以前使用json-server也很方便&#…

问题描述:在Windows下没有预装ninja工具

问题描述:在Windows下没有预装ninja工具 # WInR输入cmd回车进入命令行,执行以下命令查看版本信息 ninja --version没有预装ninja工具 解决方案&#xff1a;下载安装ninja 在windows下安装gitbash和python。 打开cmd在合适位置下载ninja源码&#xff1a; git clone https://g…

JavaWeb-JDBC-练习

一、环境准备 1、数据库表 tb_brand 2、实体类 Brand 最后注意使用get、set方法和toString 二、实现功能 1、查询所有数据 2、添加数据 3、根据id修改 4、根据id删除

AI新工具(20240219) Ollama Windows预览版;谷歌开源的人工智能文件类型识别系统; PopAi是您的个人人工智能工作空间

Ollama Windows preview - Ollama Windows预览版用户可以在本地创建和运行大语言模型&#xff0c;并且支持NVIDIA GPU和现代CPU指令集的硬件加速 Ollama发布了Windows预览版&#xff0c;使用户能够在原生的Windows环境中拉取、运行和创建大语言模型。该版本支持英伟达的GPU&am…

【初始消息队列】消息队列的各种类型

消息队列相关概念 什么是消息队列 MQ(message queue)&#xff0c;从字面意思上看&#xff0c;本质是个队列&#xff0c;FIFO 先入先出&#xff0c;只不过队列中存放的内容是 message 而已&#xff0c;还是一种跨进程的通信机制&#xff0c;用于上下游传递消息。在互联网架构中…

【软考高级信息系统项目管理师--第二十章:高级项目管理】

&#x1f680; 作者 &#xff1a;“码上有前” &#x1f680; 文章简介 &#xff1a;软考高级–信息系统项目管理师 &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac; 第二十章&#xff1a;高级项目管理 项目集管理项目组合管理组织级项目管理OPM&…

深入探讨Lambda表达式转换为委托类型的编译过程

了解了&#xff0c;如果要深入探讨Lambda表达式转换为委托类型的编译过程&#xff0c;我们需要关注C#编译器如何处理这个转换。这个过程涉及到编译时的类型推断、匿名方法的创建&#xff0c;以及生成对应的委托实例。我们来更详细地分析这个过程&#xff1a; 编译阶段 1. 解…

JVM原理

一、java虚拟机的生命周期&#xff1a; Java虚拟机的生命周期 一个运行中的Java虚拟机有着一个清晰的任务&#xff1a;执行Java程序。程序开始执行时他才运行&#xff0c;程序结束时他就停止。你在同一台机器上运行三个程序&#xff0c;就会有三个运行中的Java虚拟机。 Java虚拟…

Model / View结构

红色部分是可以直接使用的。 QFileSystemModel; QFileSystemModel的使用&#xff1a; 头文件&#xff1a; QFileSystemModel* model nullptr; cpp文件&#xff1a; model new QFileSystemModel; model->setRootPath(QDir::currentPath()); ui->listView->setModel…

纯前端低代码平台demo,vue框架,nodejs,简单的pm2纯前端部署实践

文章目录 目录结构说明本地运行项目启动后的页面demo前端部署打包pm2nginx 后话 前段时间开发了一个纯前端的低代码平台demo&#xff0c;vue框架&#xff0c;nodejs&#xff0c;pm2纯前端部署实践。为此记录一下开发过程以及各方面遇到的问题&#xff0c;并作说明。 表单用了若…

L2-032 彩虹瓶

一、题目 二、解题思路 判断输入的数字&#xff08;搬来的这箱小球&#xff09;是否符合&#xff1a;若符合&#xff0c;则 cot &#xff08;下一个颜色序号&#xff09;&#xff1b;若不符合&#xff0c;则入栈&#xff08;放到临时货架&#xff09;&#xff0c;如果栈溢出&a…

Java中的线程(创建多线程的三种方法)

Java中的线程——创建 创建多线程方式一&#xff1a;继承Thread类方式二&#xff1a;实现Runnable接口方式三&#xff1a;实现Callable接口 线程的常用API 创建多线程 方式一&#xff1a;继承Thread类 定义一个子类MyThread继承线程类java.lang.Thread&#xff0c;重写run方法…

板块一 Servlet编程:第三节 HttpServletRequest对象全解与请求转发 来自【汤米尼克的JAVAEE全套教程专栏】

板块一 Servlet编程&#xff1a;第三节 HttpServletRequest对象全解与请求转发 一、什么是HttpServletRequest二、接收请求的常用方法三、请求乱码问题四、请求转发&#xff1a;forward五、Request作用域getParameter和getAttribute的区别 在上一节中我们已经学习了完整的Servl…

政安晨:【完全零基础】认知人工智能(一)【超级简单】的【机器学习神经网络】 —— 预测机

开个头 很多小伙伴们很想亲近人工智能与机器学习领域&#xff0c;然而这个领域里的核心理论、算法、工具给人感觉都太过“高冷”&#xff0c;让很多小伙伴们望而却步&#xff0c;导致一直无法入门。 如何捅破这层窗户纸&#xff1f; 让高冷的不再高冷&#xff0c;让神秘的不…

当excel中表格打印预览右边超出限定页面时,调整列宽

解决办法&#xff1a;调整整体列或者部分列的列宽 操作流程如下&#xff1a; 第一步&#xff1a;选中需要调整的列 ①将鼠标放在表格的列上&#xff0c;等出现向下粗箭头后——>②单击&#xff08;变成粗十字&#xff09;该列——>③拖动选中列 第二步&#xff1a;调…

30分钟快速上手LaTex

文章目录 30 分钟快速上手 LATEX1.什么是LATEX?2.为什么学习LATEX?3.编写第一个LATEX程序4.LATEX文档的序言5.LATEX文档的标题、作者和日期信息6.LATEX文档的注释7.LATEX文档的粗体、斜体和下划线8.LATEX文档中添加图片9.LATEX中对图像进行标注、标签化和引用10.在LATEX中创建…

Django后端开发——ORM

文章目录 参考资料ORM-基础字段及选项字段类型练习——添加模型类应用bookstore下的models.py数据库迁移——同步至mysqlmysql中查看效果 字段选项Meta类定义示例&#xff1a;改表名应用bookstore下的models.py终端效果 练习——改表名字段选项修改应用bookstore下的models.py终…