大白话说说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,一经查实,立即删除!

相关文章

Redis主从复制哨兵集群搭建解析

redis集群三种模式 redis群集有三种模式,分别是主从同步/复制、哨兵模式、Cluster 主从复制:主从复制是高可用redis的基础,哨兵和集群都是在主从复制基础上实现高可用的。主从复制主要实现了数据的多机备份,以及对于读操作的负载…

BUGKU-WEB 源代码

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

幸运的数字

每日一道算法题之幸运数字 一、题目描述二、思路三、C代码 一、题目描述 题目来源&#xff1a;洛谷 如果把一个数字十进制表示的奇数位和偶数位分别相加得到的和相同&#xff0c;小小就认为它是一个幸运的数字。对于给定的 a 和 b&#xff0c;小小希望你求出 a,a1,a2,…,b 中幸…

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也很方便&#…

用jquery写插件基本步骤

编写jQuery插件的基本步骤通常包括以下几个部分&#xff1a; 1. **命名空间**&#xff1a;为了避免与其他库或插件冲突&#xff0c;通常会在插件中创建一个命名空间。 2. **闭包**&#xff1a;使用闭包来封装插件&#xff0c;这样可以避免全局变量的污染&#…

问题描述:在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…

JS实用小方法-将时间转换为 `刚刚`、`几秒前`、`几分钟前`、`几小时前`、`几天前`、几月前或按照传入格式显示

参数相关 date为传入时间 例&#xff1a;"2023/5/10 11:32:01" 2023-02-01 09:32:01type为返回类型 例&#xff1a;- / 年月日 年默认规则&#xff0c;大于等于一天(24小时)展示X天前&#xff1b;大于等于30天且小于365天展示X个月前&#xff1b;大于等于365天且展示…

后端防止重复点击

请直接看原文: 后端防止重复点击设计_后端如何防止重复点击-CSDN博客 --------------------------------------------------------------------------------------------------------------------------------- 一、背景 想了解的都懂&#xff0c;不再描述。 二、解决的主要思…

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

消息队列相关概念 什么是消息队列 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方法…