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

react redux的学习，单个reducer

news 来源：原创 2025/9/5 15:02:50

redux系列文章目录

一什么redux？

redux是一个专门用于做状态管理的JS库(不是react插件库)。它可以用在react, angular, vue等项目中, 但基本与react配合使用。集中式管理react应用中多个组件共享的状

简单来说，就是存储页面的状态值的一个库，需要的时候取出来就行

二 redux的工作原理

在这里插入图片描述

Action‌

Action是一个描述发生了什么的普通JavaScript对象。当用户在界面上执行某个操作时（如点击按钮），会派发一个action。Action必须有一个type属性来标识其类型。

Reducer‌

Reducer是一个纯函数，接收先前的状态和一个action，返回新的状态。Redux要求所有的状态更新逻辑都写在reducer中，确保状态的更新是可预测和确定的。

Store‌

Store是将所有状态保存为一个对象树（state tree）的地方。它提供几个方法，如dispatch(action)来触发action，getState()来获取当前状态，subscribe(listener)来注册监听器等。

三使用redux

准备工作

1.一个react项目环境下，下载依赖

npm i redux

2.新增src/redux文件夹；
新增 src/redux/store.js文件和src/redux/reducers.js文件；
新增src/pages/counter/index.js文件

代码

src/redux/reducers.js文件

function counterReducer(state = 0, action) {switch (action.type) {case 'INCREMENT':return state + 1;case 'DECREMENT':return state - 1;default:return state;}
}   export default counterReducer;

src/redux/store.js文件

import {createStore} from 'redux';
import counterReducer from './reducer'
let store = createStore(counterReducer);export default store

src/pages/counter.js文件

import React, { useState } from 'react'
import store from '../../redux/store'
export default function Count() {const [count, setCount] = useState(0)store.subscribe(() => {console.log("监听其变化----", store.getState())setCount(store.getState())})return (<div>当前count:{count}<br /><button onClick={() => {store.dispatch({ type: 'INCREMENT' })}}>新增count</button>&nbsp;<button onClick={() => {store.dispatch({ type: 'DECREMENT' })}}>减少count</button></div>)
}

效果

redux 的使用效果

react redux的学习，单个reducer

redux系列文章目录一什么redux？ redux是一个专门用于做状态管理的JS库(不是react插件库)。它可以用在react, angular, vue等项目中, 但基本与react配合使用。集中式管理react应用中多个组件共享的状简单来说，就是存储页面的状态值的一个库&#xf…...

编程日记 2025/9/5 15:02:50

CCF GESP C++编程二级认证真题 2025年3月

C 二级 2025 年 03 月 CCF GESP C编程二级认证真题题号 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 答案 D C A A D A D A C B C D B C C 1 单选题第 1 题 2025年春节有两件轰动全球的事件，一个是DeepSeek横空出世，另一个是贺岁片《哪吒2》票房惊人&#…...

编程日记 2025/9/5 19:54:41

Lua函数与表+Lua子文件加载与元表

Lua函数相关示例代码 --脚本型语言，不能先调用，再定义，因为代码是从上往下执行的 --第一种声明函数 function func1()print("这是func1") end--先定义，再调用，没有问题 func1() -------------------------…...

编程日记 2025/9/5 19:54:35

Linux systemd 服务全面详解

一、systemd 是什么？ systemd 是 Linux 系统的现代初始化系统（init）和服务管理器，替代传统的 SysVinit 和 Upstart。它不仅是系统启动的“总指挥”，还统一管理服务、日志、设备挂载、定时任务等。核心作用服务管理…...

编程日记 2025/9/5 9:57:42

Linux系统调用编程

目录 1.Linux下进程和线程进程线程区别查看进程pid终止进程pid 2.Linux虚拟内存管理与stm32内存映射设计目标与架构差异地址空间管理机制对比内存使用与性能特性 3.Linux系统调用函数fork()wait()exec() 4.树莓派环境下练习创建账号1创建用户账号2.配置用户权限3.查看用户登录…...

编程日记 2025/9/5 19:54:22

AWS Langfuse AI用Bedrock模型使用完全教程

AWS Langfuse AI使用完全教程推荐超级课程：本地离线DeepSeek AI方案部署实战教程【完全版】Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战目录 AWS Langfuse AI使用完全教程Langfuse是什么？准备工作创建Langfuse账户1.创建LLM应用程序启用Bedrock…...

编程日记 2025/9/5 19:32:41

【Docker项目实战】使用Docker部署MediaCMS内容管理系统

【Docker项目实战】使用Docker部署MediaCMS内容管理系统前言一、MediaCMS介绍1.1 MediaCMS 简介1.2 主要特点1.3 使用场景二、本次实践规划2.1 本地环境规划2.2 本次实践介绍三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本四、下载Med…...

编程日记 2025/9/5 19:54:12

OpenHarmony子系统开发 - DFX（一）

OpenHarmony子系统开发 - DFX（一） 一、DFX概述简介在OpenHarmony中，DFX(Design for X)是为了提升质量属性的软件设计，目前包含的内容主要有：DFR（Design for Reliability，可靠性&#xff09…...

编程日记 2025/9/5 13:39:30

深入解析：使用Python爬取Bilibili视频

深入解析：使用Python爬取Bilibili视频引言 Bilibili，作为中国领先的年轻人文化社区，拥有海量的视频资源。对于想要下载Bilibili视频的用户来说，手动下载不仅费时费力，而且效率低下。本文将介绍如何使用Python编写一…...

编程日记 2025/9/5 19:54:00

详解数据结构线性表 c++实现

线性表线性表是一种非常基础且重要的数据结构，它是具有相同数据类型的 n（n≥0）个数据元素的有限序列。这里的 “有限” 意味着元素的数量是确定的，“序列” 则表示元素之间存在着顺序关系。顺序表顺序表是线性表的一种顺序存…...

编程日记 2025/9/5 19:53:55

Prolog语言的网络协议栈

Prolog语言的网络协议栈引言网络协议栈是现代计算机网络的重要组成部分，它负责在网络中的各个节点之间以标准化的方式传输数据。在这一体系中，不同层次的协议相互协作，以实现从物理传输到应用层数据处理的功能。Prolog是一种以符号逻辑为…...

编程日记 2025/9/5 19:53:50

音视频基础（音频常用概念）

文章目录 **1. 比特率（Bitrate）****概念****影响****音频比特率****视频比特率** **2. 码率（Bitrate）****3. 帧（Frame）****概念****视频帧****音频帧** **4. 帧长（Frame Length）****…...

编程日记 2025/9/5 19:53:45

洛谷题单3-P5725 【深基4.习8】求三角形-python-流程图重构

题目描述模仿例题，打印出不同方向的正方形，然后打印三角形矩阵。中间有个空行。输入格式输入矩阵的规模，不超过 9 9 9。输出格式输出矩形和正方形输入输出样例输入 4输出 01020304 05060708 09101112 13141516010203040506 …...

编程日记 2025/9/5 19:53:40

【数据结构】邻接表 vs 邻接矩阵：5大核心优势解析与稀疏图存储优化指南

邻接表法导读一、邻接矩阵的不足邻接表二、存储结构三、算法评价3.1 时间复杂度3.2 空间复杂度四、邻接表特点4.1 特点解读特点3特点4特点5 结语导读大家好，很高兴又和大家见面啦！！！ 图作为一种复杂的数据结构，其…...

编程日记 2025/9/5 19:53:35

编程能力的跃迁时刻：技术革命与认知重构的交响曲

在软件开发领域，从业者常将"一万小时定律"视为能力增长的圭臬，但真正的能力跃迁往往发生在特定技术范式转换的临界点。当开发者首次理解递归算法的本质，当面向对象编程替代过程式思维，当自动化工具链重塑开发流程，这些认知地震时刻往往成为技术生涯的分水岭。 …...

编程日记 2025/9/5 19:53:30

PostIn V1.0.8版本发布，IDEA 插件支持一键扫描上报，让接口定义不再繁琐

PostIn是一款国产开源免费的接口管理工具，包含项目管理、接口调试、接口文档设计、接口数据MOCK等模块，支持常见的HTTP协议、websocket协议等，支持免登陆本地接口调试，同时可以对项目进行灵活的成员权限、消息通知管理等。本周Pos…...

编程日记 2025/9/5 19:53:24

删除Linux服务器上多余的系统启动项，并重装Ubuntu系统

问题描述 2024年6月，Centos团队终止维护Centos7系统，Ubuntu成了我的替换方案。正好有一台闲置的服务器，于是我临危受命给这台服务器重装系统。经过我一番研究，Ubuntu系统初步安装成功了，但是存在一大堆问题&#xff…...

编程日记 2025/9/5 19:53:19

在亚马逊云科技上使用n8n快速构建个人AI NEWS助理

前言： N8n 是一个强大的工作流自动化工具，它允许您连接不同的应用程序、服务和系统，以创建自动化工作流程，并且采用了开源MIT协议，可以放心使用，他的官方网站也提供了很多的工作流，大家有兴趣的…...

编程日记 2025/9/5 19:53:13

JSON介绍及使用

1.JSON 1.JSON简介 JSON（JavaScript Object Notation）是一种轻量级的数据序列化协议，基于文本，完全独立于语言。 JSON由键值对组成，支持以下几种数据类型： 字符串：用双引号括起来的文本。数…...

编程日记 2025/9/6 7:32:55

AOP 的织入过程是怎样的？

AOP（面向切面编程）的织入（Weaving）是将切面（Aspect）应用到目标对象（Target Object）并创建代理对象（Proxy Object）的过程。这个过程可以发生在不同的阶段&…...

编程日记 2025/9/5 19:53:03

链路聚合配置命令

技术信息加入捆绑组，加大链路间带宽等配置命令华三静态聚合将接口加入聚合口后再进行配置 //创建静态链路聚合口1，不启用lacp[SWB]interface Bridge-Aggregation 1 [SWB-Bridge-Aggregation1]port link-type trunk [SWB-Bridge-Aggregation…...

编程日记 2025/9/5 19:52:57

为什么有的深度学习训练，有训练集、验证集、测试集3个划分，有的只是划分训练集和测试集？

在机器学习和深度学习中，数据集的划分方式取决于任务需求、数据量以及模型开发流程的严谨性。 1. 三者划分：训练集、验证集、测试集目的训练集（Training Set）：用于模型参数的直接训练。验证集（Validati…...

编程日记 2025/9/5 19:52:52

【读书笔记·VLSI电路设计方法解密】问题61：扫描插入的目的是什么

如问题60所述，要构建可测试电路，必须确保电路中每个节点都具有可控性和可观测性。但对于包含时序元件（如触发器、锁存器等存储元件）的电路，若不采取特殊设计则难以实现这两项特性。这是因为时序元件关联节点的逻辑状态不仅取决于当前输入，还受其先前存储状态影响——它们…...

编程日记 2025/9/5 19:52:47

通信数据记录仪-产品概念ID

总结： 1、支持高速CAN、支持容错CAN、支持单线CAN（理解是支持不同的协议，CANFD、CAN2.0和LIN？） 2、通过上位机设计时间...

编程日记 2025/9/5 19:52:42

【数据分享】2002-2023中国湖泊水位变化数据集（免费获取）

湖泊水位变化是研究水资源动态、生态系统演变和气候变化影响的重要指标。湖泊水位的升降不仅反映了降水、蒸发和入流水量的变化，还与人类活动、气候波动及地质过程密切相关。因此，高精度、长时间序列的湖泊水位数据对于水资源管理、洪水预测以及生态环境…...

编程日记 2025/9/5 17:08:53

SQL注入重新学习

前话 sql注入一般就是构造闭合，在查询语句中构造恶意语句，因为过滤并不严格导致信息泄露， 后台登陆语句：SELECT * FROM admin WHERE Username‘user’ and Password‘pass’ 万能密码：‘or ’1‘ ’1‘ # ; sql常用…...

编程日记 2025/9/5 3:32:24

修改Jupyter Notebook主目录文件夹

1、找到Jupyter Notebook配置文档在anaconda prompt终端输入以下命令，可以显示配置文档所在位置： jupyter notebook --generate-config2、修改Jupyter Notebook主目录文件夹用记事本打开文件夹中的jupyter_notebook_config.py文件。在记事本中使用…...

编程日记 2025/9/5 16:00:19

玩转JSONObject：使用方法详解与Map对比

一、初识JSONObject 什么是JSONObject？ JSONObject是Java中处理JSON数据的核心工具类，主流JSON库均提供类似实现： org.json（原生包）com.alibaba.fastjson.JSONObjectnet.sf.json.JSONObject 基础创建姿势 <JAV…...

编程日记 2025/9/5 19:52:22

LC416 vector＜bool＞和 bool[] 的异同

LeetCode 416 1. 报错代码 // 01背包，从n个数字里面选，能否凑出和为s的方案 class Solution { public:bool canPartition(vector<int>& nums) {int m accumulate(nums.begin(), nums.end(), 0);if(m & 1) return false;m >> 1;…...

编程日记 2025/9/5 19:52:17

（51单片机）矩阵按键密码锁表白（C语言代码编撰）（矩阵按键教程）（LCD1602浅教程）

目录源代码 main.c MatrixKey.c MatrixKey.h LCD1602.c LCD1602.h Delay.c Delay.h 运行效果图： 第一步： 第二步： 第三步： 第四步： 代码解析与教程： 延时函数Delay LCD1602 MatrixKey模块源代…...

编程日记 2025/9/5 19:52:12

C++20新增内容

C20 是 C 语言的一次重大更新，它引入了许多新特性，使代码更现代化、简洁且高效。以下是 C20 的主要新增内容： 1. 概念（Concepts） 概念用于约束模板参数，使模板编程更加直观和安全。 #include <concept…...

编程日记 2025/9/5 19:52:07

思维链、思维树、思维图与思维森林在医疗AI编程中的应用蓝图

在医疗AI编程中，思维链（Chain of Thought, CoT）、思维树（Tree of Thoughts, ToT）、思维图（可能指知识图谱或逻辑图）以及思维森林（Forest-of-Thought, FoT）等技术框架通过模拟人类认知和推理过程，显著提升了AI在复杂医疗场景中的决策能力和可解释性： 1. 思维链（CoT）…...

编程日记 2025/9/5 19:52:02

[GN] Python3基本数据类型 -- 与C的差异

文章目录前言Python3的基本数据类型6个标准的数据类型NumbersStringListtupleSetsDictionaries Python运算符逻辑运算符成员运算符身份运算符 Python3 数字Python3 序列序列切片序列相加序列相乘序列相关内置函数 Python3 列表访问列表的值更新列表删除列表元素拼接列表嵌套列…...

编程日记 2025/9/5 18:10:15

TCP基础篇(一）

文章目录 1.TCP 是如何保证可靠性的?2. 滑动窗口机制3 超时重传4.TCP 报文格式5. 什么是 TCP 协议5.1 如何唯一确定一个 TCP 连接 6.TCP 三次握手过程6.1 可以两次握手吗? 7.TCP 的四次挥手7.1 为什么客户端要等待2MSL？ 8.linux 中查看 TCP 的连接9.TCP 为什么要有…...

编程日记 2025/9/5 19:51:50

Spring-IOC部分

Spring-IOC部分 1.SpringBean的配置详解（Bean标签） （1）scope 默认情况下，单纯的Spring环境Bean的作用范围有两个：Singleton和Prototype singleton：单例，默认值，Spring…...

编程日记 2025/9/5 19:51:46

使用GitHub Actions构建CI/CD流程

GitHub Actions 简介 GitHub Actions 是一种自动化软件开发工作流的方式，与 GitHub.com 深度集成。开发人员可以通过配置 GitHub Actions 来实现基于事件触发的自动工作流，比如，当有任意用户向 master 分支提交代码时，自动执行一…...

编程日记 2025/9/5 19:51:41

Ubuntu服务器无法正常启动redis

当我们在阿里云服务器上启动redis服务运行下述命令时 service redis-server start 会出现如下报错 Failed to start redis-server.service: Unit redis-server.service not found. 如图： 解决方案： 通过以下命令重新安装Redis： sudo apt…...

编程日记 2025/9/5 19:51:36

MySQL 索引原理

一、索引基础概念 1. 索引是什么？ 定义：索引是帮助MySQL高效获取数据的有序数据结构，类似书籍的目录。核心作用：减少磁盘I/O次数，提升查询速度（以空间换时间）。 2. 索引的优缺点优点缺点加…...

编程日记 2025/9/5 19:51:32

前端快速入门学习3——CSS介绍与选择器

1.概述 CSS全名是cascading style sheets,中文名层叠样式表。用于定义网页样式和布局的样式表语言。通过 CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。 HTML与CSS的关系：HTML相当…...

编程日记 2025/9/6 3:55:00

示例效果和代码直接可以用 Button 按钮 | HandyOrg 1.安装 , 输入 HandyControl 2.  <ResourceDictionary Source"pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml"/> …...

编程日记 2025/9/6 7:01:21

【代码艺廊】pyside6桌面应用范例：homemade-toolset

在研发测试日常工作中，通常会遇到很多琐碎的事情，占用我们工作的时间和精力，从而导致我们不能把大部分的注意力放在主要的工作上面。为了解决这个问题，除了加人之外，我们通常会开发一些日常用的效率工具，比…...

编程日记 2025/9/5 1:27:37

Hive 常见面试 300 问

一、Hive 基础概念什么是 Hive？它的主要用途是什么？ Hive 与传统关系型数据库有什么区别？简述 Hive 的架构，各个组件的作用是什么？解释 Hive 中的元数据，它存储在哪里？ Hive 支持哪些数据格式？各自的特点是什么？什么是 Hive 表的分区？为什么要使用分区？什么是 …...

编程日记 2025/9/2 15:01:22

OpenMinus 源码深度解析：从 React 模式到多智能体架构实现

OpenMinus 源码深度解析：从 React 模式到多智能体架构实现本文基于 2024 年 3 月 9 日最新代码版本解析，完整代码已上传至 GitHub（附项目地址https://github.com/mannaandpoem/OpenManus） 一、项目背景与核心价值 1.1 项目定位 …...

编程日记 2025/9/4 19:33:04

【Linux网络与网络编程】04.TCP Socket编程

一、TCP Socket编程接口 // 创建套接字 int socket(int domain, int type, int protocol); // 参数： // domain：域（协议家族），这里使用 AF_INET 表示进行网络编程 // type：网络通信传输的类型&#xff0…...

编程日记 2025/9/3 20:09:27

初识数据结构——算法效率的“两面性”：时间与空间复杂度全解析

📊 算法效率的“两面性”：时间与空间复杂度全解析 1️⃣ 如何衡量算法好坏？ 举个栗子🌰：斐波那契数列的递归实现 public static long Fib(int N) {if(N < 3) return 1;return Fib(N-1) Fib(N-2); }问题&#xf…...

编程日记 2025/9/3 3:21:37

CCF GESP C++编程八级认证真题 2025年3月

C 八级 2025 年 03 月题号 1 2 3 4 5 6 7 8 答案 B C B A D D D 一、单选题第 1 题国家“以旧换新”政策仍在继续，小杨家决定在家里旧的冰箱、电视、洗衣机、微波炉中选两种换新。其中，冰箱有4种型号可选，电视有6种型号可选&#xff0c…...

编程日记 2025/9/1 16:48:38

React: hook相当于函数吗?

一、Hook 是一个函数，但不仅仅是函数函数的本质 Hook 确实是一个 JavaScript 函数，例如 useState、useEffect 或自定义 Hook 都是函数。它们可以接受参数（如初始状态值或依赖项数组），并返回结果（如状态值和…...

编程日记 2025/9/5 14:08:03

Git 从入门到精通（开源协作特别版）

🧠 Git 从入门到精通（开源协作特别版） ✅ 基础命令 🧰 高级用法 🛠️ 开源实战技巧 🌍 GitHub 社区协作适合：从0开始 → 熟练开发者 → 参与/维护开源项目 🔰 第1章：…...

编程日记 2025/9/3 12:42:58

《探索边缘计算：重塑未来智能物联网的关键技术》

最近研学过程中发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击链接跳转到网站人工智能及编程语言学习教程。读者们可以通过里面的文章详细了解一下人工智能及其编程等教程和学习方法。下面开始对正文内容的…...

编程日记 2025/9/4 4:36:39

什么是缓存穿透、缓存雪崩、缓存击穿？

什么是缓存？ 缓存就是数据交换的缓冲区，是存贮数据的临时地方，一般读写性能较高。怎么防止缓存穿透？ 缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在，这样缓存永远不会生效，这些请求都会打到…...

编程日记 2025/8/27 15:23:12