当前位置： 首页 > news >正文

redux的介绍、安装、三大核心与执行流程

news 2025/9/11 21:54:56

redux的介绍、安装、三大核心与执行流程

  • 一、redux的基本介绍
  • 二、redux的安装
  • 三、redux核心概念
    • 3.1 action
    • 3.2 reducer
    • 3.3 store
  • 四、Redux代码执行流程
  • 五、加减案例练习

一、redux的基本介绍

  • redux中文官网
  • Redux 是 React 中最常用的状态管理工具（状态容器）
  • React 只是 DOM 的一个抽象层（UI 库），并不是 Web 应用的完整解决方案。因此 React 在涉及到数据的处理以及组件之间的通信时会比较复杂

不使用redux 与 使用redux的区别 (组件之间的通讯问题)

在这里插入图片描述

  • 不使用redux
    • 1.只能使用父子组件通讯、状态提升等 React 自带机制
    • 2.处理远房亲戚(非父子)关系的组件通讯时乏力
    • 3.组件之间的数据流混乱，出现 Bug 时难定位
  • 使用redux
    • 1.集中式存储和管理应用的状态
    • 2.处理组件通讯问题时，无视组件之间的层级关系
    • 3.简化大型复杂应用中组件之间的通讯问题
    • 4.数据流清晰，易于定位 Bug

二、redux的安装

npm i redux

三、redux核心概念

  • 为了让代码各部分职责清晰、明确，Redux 代码被分为三个核心概念：action/reducer/store
    • action -> reducer -> store
    • action（动作）：描述要做的事情
    • reducer（函数）：更新状态
    • store（仓库）：整合 action 和 reducer

类比生活中的例子来理解三个核心概念：

  • 1.action：相当于公司中要做的事情，比如软件开发、测试，打扫卫生等
  • 2.reducer：相当于公司的员工，负责干活的
  • 3.store：相当于公司的老板
  • 4.流程：老板(store)分配公司中要做的事情(action)给员工(reducer)，员工干完活把结果交给老板

3.1 action

  • action：描述要做的事情，项目中的每一个功能都是一个 action
    • 计数器案例：计数器加1、减1
    • 购物车案例：获取购物车数据、切换商品选中状态
    • 项目：登录，退出等
  • 特点
    • 只描述做什么
    • JS 对象，必须带有 type 属性，用于区分动作的类型
    • 根据功能的不同，可以携带额外的数据（比如，payload 有效载荷，也就是附带的额外的数据），配合该数据来完成相应功能

核心代码 (原生html中使用)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入redux --><script src="./node_modules/redux/dist/redux.js"></script></head><body><div>1</div><button>+1</button><button>-1</button></body><script>//1.action 是一个函数  必须有type属性//1.1原始创建// const action={//     type:'ADD'// }//1.2 动态action 函数创建// const Add = () => {//   return {//     type: 'ADD',//   }// }//简写 并传参  使用()包裹对象const Add = (id) => ({ type: 'ADD', id })console.log('action', Add(3))</script>
</html>

3.2 reducer

  • reducer：函数，用来处理 action 并更新状态，是 Redux 状态更新的地方
  • 特点
    • 函数签名为：(prevState, action) => newState
    • 接收上一次的状态和 action 作为参数，根据 action 的类型，执行不同操作，最终返回新的状态
    • 注意：该函数一定要有返回值，即使状态没有改变也要返回上一次的状态
    • 约定：reducer 是一个纯函数，并且不能包含 side effect 副作用(比如，不能修改函数参数、不能修改函数外部数据、不能进行异步操作等)
    • 纯函数：相同的输入总是得到相同的输出
    • 1.不要直接修改参数 state 的值（也就是：不要直接修改当前状态，而是根据当前状态值创建新的状态值）
    • 2.不要使用 Math.random() / new Date() / Date.now() / ajax 请求等不纯的操作
    • 3.不要让 reducer 执行副作用（side effect）

核心代码 (原生html中使用)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入redux --><script src="./node_modules/redux/dist/redux.js"></script></head><body><div>1</div><button>+1</button><button>-1</button></body><script>//reducer 接收两个参数   必须有返回值   必须是纯函数//参数1 上一次的状态//参数2 action//累加const Add = (num) => ({ type: 'ADD', num })//类减const Sub = (num) => ({ type: 'SUB', num })//reducer// const reducer = (state, action) => {//   return 'reducer返回'// }const reducer = (state = 0, action) => {//使用switch caseswitch (action.type) {case 'ADD':return state + 1case 'SUB':return state - 1default:return state}}console.log('减法', reducer(1, Sub()))console.log('加法', reducer(1, { type: 'ADD' }))</script>
</html>

3.3 store

  • store：仓库，Redux 的核心，整合 action 和 reducer
  • 特点
    • 一个应用只有一个 store
    • 维护应用的状态，获取状态：store.getState()
    • 发起状态更新时，需要分发 action：store.dispatch(action)
    • 创建 store 时接收 reducer 作为参数：const store = createStore(reducer)
    • 订阅(监听)状态变化：const unSubscribe = store.subscribe(() => {})
    • 取消订阅状态变化： unSubscribe()

核心代码 (原生html中使用)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入redux --><script src="./node_modules/redux/dist/redux.js"></script></head><body><div>1</div><button>+1</button><button>-1</button></body><script>//累加const Add = (num) => ({ type: 'ADD', num })//类减const Sub = (num) => ({ type: 'SUB', num })function reducer(state = 100, action) {//使用switch caseswitch (action.type) {case 'ADD':return state + 1case 'SUB':return state - 1default:return state}}//因为不是es6 引入  全局有一个window.Reduxconsole.log('window.Redux', window.Redux)//解构 createStoreconst { createStore } = window.Reduxconsole.log('createStore', createStore)//创建store 参数一必传 (reducer)const store = createStore(reducer)console.log('store', store)//dispatch getState subscribe//1.获取redux中的数据store.getState()console.log('store.getState', store.getState())//2.订阅:只要state发生变化 这个订阅的回调函数 就会执行store.subscribe(() => {console.log('订阅', store.getState())})//3.发起状态更新时，需要分发 actionstore.dispatch(Add())console.log('store.getState', store.getState())store.dispatch(Sub())console.log('store.getState', store.getState())</script>
</html>

四、Redux代码执行流程

  • 1.创建 store 时，Redux 就会先调用一次 reducer，来获取到默认状态
  • 2.分发动作 store.dispatch(action)更新状态
  • 3.Redux store 调用 reducer 传入：上一次的状态（当前示例中就是：10）和 action（{ type: 'increment' }），计算出新的状态并返回
  • 4.reducer 执行完毕后，将最新的状态交给 store，store 用最新的状态替换旧状态，状态更新完毕
import { createStore } from 'redux'
const store = createStore(reducer)// reducer(10, { type: 'increment' })
function reducer(state = 10, action) {console.log('reducer:', state, action)switch (action.type) {case 'increment':return state + 1default:return state}
}console.log('状态值为：', store.getState()) // 10// 发起更新状态：
// 参数： action 对象
store.dispatch({ type: 'increment' })
// 相当于： reducer(10, { type: 'increment' })console.log('更新后：', store.getState()) // 11

五、加减案例练习

  • 准备两个按钮 点击加号按钮 数值＋1 点击减号按钮 数值-1
    在这里插入图片描述

实现代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入redux --><script src="./node_modules/redux/dist/redux.js"></script></head><body><div>1</div><button class="add">+1</button><button class="sub">-1</button></body><script>//第一步 创建action//加法const Add = (num) => ({ type: 'ADD', num })//减法const Sub = (num) => ({ type: 'SUB', num })//第二步 创建 reducerconst reducer = (state = 100, action) => {switch (action.type) {case 'ADD':return state + 1case 'SUB':return state - 1default:return state}}//第三步 引入store//3.1 解构出store 并传递reducerconst { createStore } = window.Reduxconst store = createStore(reducer)//3.2 store.getState获取redux中的数据 初始原始值document.querySelector('div').innerHTML = store.getState()//3.3 store.subscribe 订阅获取state变化store.subscribe(() => {console.log('值发生变化', store.getState())document.querySelector('div').innerHTML = store.getState()})//3.4 绑定点击事件 并调用store.dispatch 分发actiondocument.querySelector('.add').onclick = function () {store.dispatch(Add())}document.querySelector('.sub').onclick = function () {store.dispatch(Sub())}</script>
</html>

相关文章：

redux的介绍、安装、三大核心与执行流程

redux的介绍、安装、三大核心与执行流程 一、redux的基本介绍二、redux的安装三、redux核心概念3.1 action3.2 reducer3.3 store 四、Redux代码执行流程五、加减案例练习 一、redux的基本介绍 redux中文官网Redux 是 React 中最常用的状态管理工具&#xff08;状态容器&#x…...

编程日记 2023/8/22 20:39:13

Redis 5环境搭建

一、环境搭建 如果是Centos8&#xff0c;yum 仓库中默认的 Redis版本就是5&#xff0c;直接yum install即可。如果是Centos7&#xff0c;yum 仓库中默认的 Redis版本是3系列&#xff0c;比较老~ 为了我们能在 Centos7中下载到 Redis5 首先要安装额外的软件源 sudo yum insta…...

编程日记 2023/8/22 20:38:12

stm32红绿灯源代码示例（附带Proteus电路图）

本代码不能直接用于红路灯&#xff0c;只是提供一个思路 #include "main.h" #include "gpio.h" void SystemClock_Config(void); void MX_GPIO_Init(void) {GPIO_InitTypeDef GPIO_InitStruct {0};/* GPIO Ports Clock Enable */__HAL_RCC_GPIOB_CLK_ENAB…...

编程日记 2023/8/22 20:37:11

Qt与电脑管家4

折线图&#xff1a; #ifndef LINE_CHART_H #define LINE_CHART_H#include <QWidget> #include <QPainter> #include "circle.h" class line_chart : public QWidget {Q_OBJECT public:explicit line_chart(QWidget *parent nullptr); protected:void pa…...

编程日记 2023/8/22 20:36:07

使用css美化gradio界面

基本方法 在默认的前端页面中使用检查工具确定要修改的部分的选择器名称&#xff0c;然后在block_css中对其修改&#xff0c;并在启动网页时传入参数&#xff1a;with gr.Blocks(cssblock_css, thememy_theme) as demo: 禁止修改下拉框文字 input.border-none.svelte-c0u3f0…...

编程日记 2023/8/22 20:35:06

Flink流批一体计算（13）：PyFlink Tabel API之SQL DDL

1. TableEnvironment 创建 TableEnvironment from pyflink.table import Environmentsettings, TableEnvironment# create a streaming TableEnvironmentenv_settings Environmentsettings.in_streaming_mode()table_env TableEnvironment.create(env_settings)# or create…...

编程日记 2023/8/22 20:34:05

java笔试手写算法面试题大全含答案

1.统计一篇英文文章单词个数。 public class WordCounting { public static void main(String[] args) { try(FileReader fr new FileReader("a.txt")) { int counter 0; boolean state false; int currentChar; while((currentChar fr.read()) ! -1) { i…...

编程日记 2023/8/22 20:33:04

点云平面拟合和球面拟合

一、介绍 In this tutorial we learn how to use a RandomSampleConsensus with a plane model to obtain the cloud fitting to this model. 二、代码 #include <iostream> #include <thread> #include <pcl/point_types.h> #include <pcl/common/io.…...

编程日记 2023/8/22 20:32:03

部署问题集合（十九）linux设置Tomcat、Docker，以及使用脚本开机自启（亲测）

前言 因为不想每次启动虚拟机都要手动启动一遍这些东西&#xff0c;所以想要设置成开机自启的状态 设置Tomcat开机自启 创建service文件 vi /etc/systemd/system/tomcat.service添加如下内容&#xff0c;注意修改启动脚本和关闭脚本的地址 [Unit] DescriptionTomcat9068 A…...

编程日记 2023/8/22 20:31:02

视觉SLAM：一直在入门，如何能精通，CV领域的绝境长城，

目录 前言 福利&#xff1a;文末有chat-gpt纯分享&#xff0c;无魔法&#xff0c;无限制 1 什么是SLAM&#xff1f; 2 为什么用SLAM&#xff1f; 3 视觉SLAM怎么实现&#xff1f; 4 前端视觉里程计 5 后端优化 6 回环检测 7 地图构建 8 结语 前言 上周的组会上&…...

编程日记 2023/8/22 20:30:00

【报错】yarn --version Unrecognized option: --version Error...

文章目录 问题分析解决问题 在使用 npm install -g yarn 全局安装 yarn 后，查看yarn 的版本号，报错如下 PS D:\global-data-display> yarn --version Unrecognized option: --version Error: Could...

编程日记 2023/8/22 20:28:59

二叉搜索树的(查找、插入、删除)

一、二叉搜索树的概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者是具有以下性质的二叉树: 1、若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值&#xff1b; 2、若它的右子树不为空&#xff0c;则右子树上所有节点的值都…...

编程日记 2023/8/22 20:27:57

电力虚拟仿真 | 高压电气试验VR教学系统

在科技进步的推动下&#xff0c;我们的教育方式也在发生着翻天覆地的变化。其中&#xff0c;虚拟现实&#xff08;VR&#xff09;技术的出现&#xff0c;为我们提供了一种全新的、富有沉浸感的学习和培训方式。特别是在电力行业领域&#xff0c;例如&#xff0c;电力系统的维护…...

编程日记 2023/8/22 20:26:56

innovus如何设置size only

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口 给instance设置size only属性命令如下: dbset [dbGet top.inst.name aa/bb -p] .dontTouch sizeOk 给一个module设置size only需要foreach循环一下: foreach inst [dbGet top.…...

编程日记 2023/8/22 20:25:54

Java之继承详解二

3.7 方法重写 3.7.1 概念 方法重写 &#xff1a;子类中出现与父类一模一样的方法时&#xff08;返回值类型&#xff0c;方法名和参数列表都相同&#xff09;&#xff0c;会出现覆盖效果&#xff0c;也称为重写或者复写。声明不变&#xff0c;重新实现。 3.7.2 使用场景与案例…...

编程日记 2023/8/22 20:24:53

国内常见的几款可视化Web组态软件

组态软件是一种用于控制和监控各种设备的软件&#xff0c;也是指在自动控制系统监控层一级的软件平台和开发环境。这类软件实际上也是一种通过灵活的组态方式&#xff0c;为用户提供快速构建工业自动控制系统监控功能的、通用层次的软件工具。通常用于工业控制&#xff0c;自动…...

编程日记 2023/8/22 20:23:53

通过 git上传到 gitee 仓库

介绍 Git是目前世界上最先进的分布式版本控制系统&#xff0c;有这么几个特点&#xff1a; 分布式 &#xff1a;是用来保存工程源代码历史状态的命令行工具。保存点 &#xff1a;保存点可以追溯源码中的文件&#xff0c;并能得到某个时间点上的整个工程项目额状态&#xff1b;…...

编程日记 2023/8/22 20:22:52

设置Windows主机的浏览器为wls2的默认浏览器

1. 准备工作 wsl是可以使用Windows主机上安装的exe程序&#xff0c;出于安全考虑&#xff0c;默认情况下改功能是无法使用。要使用的话&#xff0c;终端需要以管理员权限启动。 我这里以Windows Terminal为例&#xff0c;介绍如何默认使用管理员权限打开终端&#xff0c;具体…...

编程日记 2023/8/22 20:21:50

森林生物量（蓄积量）估算全流程

python森林生物量&#xff08;蓄积量&#xff09;估算全流程 一.哨兵2号获取/去云处理/提取参数1.1 影像处理与下载1.2 导入2A级产品1.3导入我们在第1步生成的云掩膜文件1.4.SNAP掩膜操作1.5采用gdal计算各类植被指数1.6 纹理特征参数提取 二.哨兵1号获取/处理/提取数据2.1 纹理…...

编程日记 2023/8/22 20:20:49

MySQL数据库概述

MySQL数据库概述 1 SQL SQL语句大小写不敏感。 SQL语句末尾应该使用分号结束。 1.1 SQL语句及相关操作示例 DDL&#xff1a;数据定义语言&#xff0c;负责数据库定义、数据库对象定义&#xff0c;由CREATE、ALTER与DROP三个语法所组成DML&#xff1a;数据操作语言&#xff…...

编程日记 2023/8/22 20:19:48

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2025/9/6 0:09:27

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/8/22 4:33:54

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2025/9/3 5:42:53

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/9/1 17:56:35

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的&#xff0c;需要先安…...

编程新知 2025/9/11 15:59:36

高分辨率图像合成归一化流扩展

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 1 摘要 我们提出了STARFlow&#xff0c;一种基于归一化流的可扩展生成模型&#xff0c;它在高分辨率图像合成方面取得了强大的性能。STARFlow的主要构建块是Transformer自回归流&#xff08;TARFlow&am…...

编程新知 2025/9/2 19:15:40

MySQL体系架构解析（三）：MySQL目录与启动配置全解析

MySQL中的目录和文件 bin目录 在 MySQL 的安装目录下有一个特别重要的 bin 目录&#xff0c;这个目录下存放着许多可执行文件。与其他系统的可执行文件类似&#xff0c;这些可执行文件都是与服务器和客户端程序相关的。 启动MySQL服务器程序 在 UNIX 系统中&#xff0c;用…...

编程新知 2025/9/2 17:22:34

边缘计算网关提升水产养殖尾水处理的远程运维效率

一、项目背景 随着水产养殖行业的快速发展&#xff0c;养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下&#xff0c;而且难以实现精准监控和管理。为了提升尾水处理的效果和效率&#xff0c;同时降低人力成本&#xff0c;某大型水产养殖企业决定…...

编程新知 2025/9/4 16:30:43

深入解析 ReentrantLock：原理、公平锁与非公平锁的较量

ReentrantLock 是 Java 中 java.util.concurrent.locks 包下的一个重要类，用于实现线程同步，支持可重入性，并且可以选择公平锁或非公平锁的实现方式。下面将详细介绍 ReentrantLock 的实现原理以及公平锁和非公平锁的区别。 ReentrantLock 实现原理 基本架构 ReentrantLo…...

编程新知 2025/8/12 0:11:56

Centos 7 服务器部署多网站

一、准备工作 安装 Apache bash sudo yum install httpd -y sudo systemctl start httpd sudo systemctl enable httpd创建网站目录 假设部署 2 个网站&#xff0c;目录结构如下&#xff1a; bash sudo mkdir -p /var/www/site1/html sudo mkdir -p /var/www/site2/html添加测试…...

编程新知 2025/9/6 9:35:38