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

第四章 react-redux，@reduxjs/toolkit依赖，学习

news 来源：原创 2025/8/28 11:27:11

redux系列文章目录

第一章简单学习redux,单个reducer

第二章简单学习redux,多个reducer

第三章 redux和react-redux，@reduxjs/toolkit依赖结合使用

第五章两张图告诉你redux常使用的api有哪些

前言

本章将使用react-redux，@reduxjs/toolkit依赖创建一个简单cout计数页面

准备工作

准备一个react框架的环境

npx create-react-app  react-redux-template

下载依赖

npm i react-redux @reduxjs/toolkit

启动命令

npm start

准备目录文件，
页面：src/pages/count/index.js
redux的存放：src/redux/store.js和src/redux/counterReducer.js

详情代码

store.js

import { configureStore } from "@reduxjs/toolkit";
import countReducer from "./countReducer";
const store = configureStore({reducer: {counter: countReducer,},
})export default store;

counterReducer.js

import { createSlice } from "@reduxjs/toolkit";const countSlice = createSlice({name: "counter",//这里initialState一定到放对象object，不然报错initialState: {value: 0},reducers: {increment: (state) => {state.value +=1},decrement: (state) => {state.value-=1}},
}
)
export const {increment, decrement} = countSlice.actions
export default countSlice.reducer

count/index.js

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from '../../redux/countReducer'
export default function CountPage() {const count = useSelector(state => state.counter.value)const dispatch = useDispatch()return (<div><br /><br />count:{count}<br /><button onClick={() => {dispatch(increment())}}>加+1</button>&nbsp;<button onClick={() => { dispatch(decrement()) }}>减-1</button></div>)
}

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// import App from './App';
import CountPage from './pages/count';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './redux/store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><Provider store={store}><CountPage /></Provider></React.StrictMode>
);reportWebVitals();

提示：<Provider>很重要，引入store,这样整个应用都可以使用store相关hooks拿取数据

效果

react-redux存储状态

第四章 react-redux，@reduxjs/toolkit依赖，学习

redux系列文章目录第一章简单学习redux,单个reducer 第二章简单学习redux,多个reducer 第三章 redux和react-redux，reduxjs/toolkit依赖结合使用第五章两张图告诉你redux常使用的api有哪些前言本章将使用react-redux，reduxjs/toolkit依赖创…...

编程日记 2025/8/28 11:27:11

雅思7分听说读写专项书籍推荐

对于目标 7分以上的雅思考生（中高级水平），选对资料真的事半功倍。下面按照听力、阅读、写作、口语、综合书籍五大类来分别列举高分推荐书籍，每本书包括：适合人群、核心内容、推荐理由，并贴合7分目标。 …...

编程日记 2025/8/27 6:14:15

C++容器使用说明

C标准库提供了多种容器，分为序列容器、关联容器、无序关联容器、容器适配器及其他相关类型。以下是所有标准容器的分类及简要说明： 1. 序列容器（Sequence Containers） 按线性顺序存储元素，支持随机或顺序访问。 vecto…...

编程日记 2025/8/28 14:55:26

Python-函数

1. 函数基础 1.1 定义函数在Python中，使用def关键字来定义函数： def greet():"""简单的问候函数"""print("Hello, World!")1.2 调用函数定义函数后，可以通过函数名加括号来调用： …...

编程日记 2025/8/28 14:55:25

【Redis】数据的淘汰策略

目录淘汰策略方案（8种） LRU和LFU策略的区别使用建议手搓LRU算法方式一方式二大家好，我是jstart千语。今天和大家回来聊一下redis，这次要讲的是它的淘汰策略。为什么需要淘汰策略呢，就是当redis里面的内存占…...

编程日记 2025/8/28 14:55:26

第七章：从类库到服务的分布式基石_《凤凰架构：构建可靠的大型分布式系统》

第七章：从类库到服务的分布式基石一、服务发现（Service Discovery） 核心目标：解决分布式系统中服务实例动态变化时如何定位可用服务的问题。 1. 服务发现的意义动态环境挑战： 微服务架构中，服务实例的…...

编程日记 2025/8/25 12:02:38

spring-ai-alibaba第九章使用Milvus构建大模型RAG应用

1、pom文件 <dependencies><dependency><groupId>com.alibaba.cloud.ai</groupId><artifactId>spring-ai-alibaba-starter</artifactId><version>${spring-ai-alibaba.version}</version></dependency><dependency&g…...

编程日记 2025/8/24 19:50:30

手撕LLM（一）：从源码出发，探索LLM推理全流程

2025年，大模型爆发元年，各种各样的大模型、框架、工具层出不穷，不断刷新人们应用大模型的门槛，短短10行代码，就能完成“加载模型加载数据集推理强化学习”的全流程训练，但其底层的运行机制也被高度抽象的接…...

编程日记 2025/8/28 14:59:08

讯飞语音听写（流式版）开发指南

语音交互大模型的功能越来越受到重视。讯飞语音听写（流式版）为开发者提供了一种高效、准确的语音识别解决方案。本文将基于 Home.vue、iat_xfyun.js 和 sparkChat.js 这三个文档，详细阐述讯飞语音听写（流式版）的开发逻…...

编程日记 2025/8/28 12:45:47

P3654 First Step (ファーストステップ)

题目描述可是……这个篮球场，好像很久没有使用过的样子啊…… 里面堆满了学校的各种杂物呢…… 我们 Aqours 的成员要怎么在里面列队站下呢？ 我们浦之星女子学院的篮球场是一个 R 行 C 列的矩阵，其中堆满了各种学校的杂物 (用 # 表示)&a…...

编程日记 2025/8/28 14:55:40

MySQL篇（六）MySQL 分库分表：应对数据增长挑战的有效策略

MySQL篇（六）MySQL 分库分表：应对数据增长挑战的有效策略 MySQL篇（六）MySQL 分库分表：应对数据增长挑战的有效策略一、引言二、为什么需要分库分表2.1 性能瓶颈2.2 存储瓶颈2.3 高并发压力三、分库分表的方…...

编程日记 2025/8/28 9:37:54

SonarQube 配置SQL Server 数据库遇到的问题

之前本机跑了一套SonarQube的社区版，默认使用的是H2数据库，那么我把它练到我机器上的SQL Server数据库了，期间遇到以下两个问题，并在配置过程中解决掉，特将这个过程记录下来。一、JDBC连接SQL Server问题 1. 问题出…...

编程日记 2025/8/28 14:55:25

23种设计模式-行为型模式-备忘录

文章目录简介问题解决代码关键实现要点功能扩展方向总结简介备忘录是一种行为设计模式， 允许在不暴露对象实现细节的情况下保存和恢复对象之前的状态。问题假如你正在开发一款文字编辑器应用。你想加入撤销功能。你可以采用直接的方式来实现: 程序在执行任…...

编程日记 2025/8/28 14:55:43

IDEA/WebStrom操作之commit前批量清除console.log()与debugger

前言： 在前端开发过程中，往往需要频繁用到console.log()与debugger，来观察数据具体情况以及断点调试。在经历了水生火热的开发动作后，往往会残留一地console.log()和debugger，若开发者还得手动在多个文件中一个个去除…...

编程日记 2025/8/28 14:55:41

每日算法-250405

34. 在排序数组中查找元素的第一个和最后一个位置题目思路本题的核心思路是二分查找。解题过程问题分析：在一个升序排列的数组中查找一个目标值 target 的起始和结束位置。这是一个典型的二分查找应用场景。核心转换：题目要求找到 target 的第一个…...

编程日记 2025/8/28 14:55:23

设计模式简述（四）模板方法模式

模板方法模式描述基本定义使用描述当一系列业务的基本流程是相同的，对于不同的业务可以在各自子类实现所谓模板方法指的就是父类中固定的那部分代码其实这里的思想和前面设计原则中开闭原则的描述是一致的，父类中的模板代码就是稳定的部分&#x…...

编程日记 2025/8/28 14:57:23

论文修改时有哪些需要注意的问题？

论文修改是学术写作中不可或缺的环节，直接影响成果的专业性和说服力。许多作者因忽略细节或急于定稿，导致论文质量大打折扣。那么，如何修改才能提升论文的严谨性与可读性呢？ 一、逻辑结构论文修改时，先从头到尾通读…...

编程日记 2025/8/27 21:36:12

JAVA阻塞队列

目录一、什么是阻塞队列？特点是什么？ 二、阻塞队列的两种创建方式： 1、使用 ArrayBlockingQueue<>( ) : 2、使用 LinkedBlockingQueue<>( ) ： 三、阻塞队列方法的使用： 阻塞队列关键的两个方法&…...

编程日记 2025/8/28 14:55:25

tomcat与spring-web

文章目录 SpringServletContainerInitializerWebApplicationInitializerWebApplicationInitializer接口AbstractContextLoaderInitializer抽象类AbstractDispatcherServletInitializer抽象类AbstractAnnotationConfigDispatcherServletInitializer抽象类 WebApplicationContext…...

编程日记 2025/8/28 14:55:42

将电脑控制手机编写为MCP server

文章目录电脑控制手机后，截屏代码复习MCP server构建修改MCP的config文件测试效果困惑电脑控制手机后，截屏代码复习 def capture_window(hwnd: int, filename: str = None) -> dict:""&...

编程日记 2025/8/18 0:59:35

[ctfshow web入门]burpsuite的下载与使用

下载吾爱破解网站工具区下载burpsuite https://www.52pojie.cn/thread-1544866-1-1.html 本博客仅转载下载链接，下载后请按照说明进行学习使用打开配置 burpsuite配置 burpsuite代理设置添加127.0.0.1:8080 浏览器配置如果是谷歌浏览器，打开win…...

编程日记 2025/8/17 22:31:49

文章记单词 | 第25篇（六级）

一，单词释义 mathematical：形容词，意为 “数学的；数学上的；运算能力强的；关于数学的”trigger：名词，意为 “（枪的）扳机；（炸弹的&…...

编程日记 2025/8/22 1:28:51

讯飞语音合成(流式版)语音专业版高质量的分析

一、引言在现代的 Web 应用开发中，语音合成技术为用户提供了更加便捷和人性化的交互体验。讯飞语音合成（流式版）以其高效、稳定的性能，成为了众多开发者的首选。本文将详细介绍在 Home.vue 文件中实现讯飞语音合成（流…...

编程日记 2025/8/28 1:12:43

【MediaPlayer】基于libvlc+awtk的媒体播放器

基于libvlcawtk的媒体播放器 libvlc下载地址 awtk下载地址代码实现libvlc相关逻辑接口UI媒体接口实例化媒体播放器注意事项 libvlc 下载地址可以到https://download.videolan.org/pub/videolan/vlc/去下载一个vlc版本，下载后其实是vlc的windows客户端&#xff0…...

编程日记 2025/8/26 11:28:52

复古未来主义屏幕辉光像素化显示器反乌托邦效果PS(PSD)设计模板样机 Analog Retro-Futuristic Monitor Effect

这款模拟复古未来主义显示器效果直接取材于 90 年代赛博朋克电影中的黑客巢穴，将粗糙的屏幕辉光和像素化的魅力强势回归。它精准地模仿了老式阴极射线管显示器，能将任何图像变成故障频出的监控画面或高风险的指挥中心用户界面。和……在一起 2 个完全可编…...

编程日记 2025/8/22 9:36:06

Kafka 如何保证消息有序性？

Kafka 保证消息顺序性，是基于 Partition（分区）级别的顺序来实现的。下面我们详细拆解一下： ✅ 同一个 Partition 内，消息是严格有序的 Kafka 在同一个分区（Partition）内，消息是按…...

编程日记 2025/8/22 7:44:46

【积木画】——第十三届蓝桥杯（2022）T7思路解析

题目描述关键词递推、dp 思路显然这是一道递推题。但是为什么我还要写在这呢？因为我虽然看了题解但是还是没想明白，综合了下面两篇参考文献我才初步理解这题的精髓。所以还是自己写一遍为好。我们把最终结果记为F(n)。情况1 直接以一个竖着…...

编程日记 2025/8/20 22:45:28

Android studio xml布局预览中 Automotive和Autotive Distant Display的区别

在 Android Studio 中，Configure Hardware Profile 设置中的 Device Type 选项有两个不同的设置：Android Automotive 和 Android Automotive Distant Display，它们的含义和用途如下： 1. Android Automotive 含义：这个…...

编程日记 2025/8/28 3:33:25

第十三章:持久化存储_《凤凰架构：构建可靠的大型分布式系统》

第十三章持久化存储一、Kubernetes存储设计核心概念 （1）存储抽象模型 PersistentVolume (PV)：集群级别的存储资源抽象（如NFS卷/云存储盘）PersistentVolumeClaim (PVC)：用户对存储资源的声明请求&#…...

编程日记 2025/8/28 10:24:33

Nginx 基础使用（2025）

一、Nginx目录结构 [rootlocalhost ~]# tree /usr/local/nginx /usr/local/nginx ├── client_body_temp # POST 大文件暂存目录 ├── conf # Nginx所有配置文件的目录 │ ├── fastcgi.conf # fastcgi相…...

编程日记 2025/8/20 22:23:18

Docker基础1

本篇文章我将从系统的知识体系讲解docker的由来和在linux中的安装下载随后的文章会介绍下载镜像、启动新容器、登录新容器如需转载，标记出处 docker的出现就是为了节省资本和服务器资源当企业需要一个新的应用程序时，需要为它买台全新的服务器。这样…...

编程日记 2025/8/28 4:24:30

【奇点时刻】GPT4o新图像生成模型底层原理深度洞察报告

个人最近一直在关注openai的新图像生成特性，以下内容基于现阶段社区及研究者们对 GPT-4O 图像生成功能的公开测试、逆向分析与技术推测综合而成，OpenAI 并未正式发布完整的技术报告，因此本文为非官方推断总结。但从多方信息与技术背景出发&am…...

编程日记 2025/8/23 6:56:00

Java的Selenium的特殊元素操作与定位之模态框

Modal Dialogue Box，又叫做模式对话框，是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭。 alert（警告） //访问本地的HTML文件 chromeDr…...

编程日记 2025/8/23 20:36:42

回归预测 | Matlab实现NRBO-Transformer-LSTM多输入单输出回归预测

回归预测 | Matlab实现NRBO-Transformer-LSTM多输入单输出回归预测目录回归预测 | Matlab实现NRBO-Transformer-LSTM多输入单输出回归预测预测效果基本介绍程序设计参考资料预测效果基本介绍 1.【JCR一区级】Matlab实现NRBO-Transformer-LSTM多输入单输出回归预测&#xf…...

编程日记 2025/8/25 18:31:40

Python菜鸟教程(小程序)

目录一.简易计算器二.学生成绩分级三.密码设置四.作业选择点赞收藏,评论支持一.简易计算器 print(-------使用的运算符-------\n) print(1.加号) print(2.减号) print(3.乘号) print(4.除号) Aint(input(请输入第一个数: )) Bint(input(请输入第二个数: )) Fi…...

编程日记 2025/8/27 12:14:39

类的（多态性、虚函数）基础练习

练习1：（简单） #include <iostream> using namespace std; class Vehicle { public: virtual void run() const0; }; class Car: public Vehicle { public: void run() const { cout << "run a car. "<<…...

编程日记 2025/8/24 1:32:24

特殊的质数肋骨--dfs+isp

1.dfs全排列组数，an记得还原 2.如果范围确定且只比较质数，isp比线性筛快，主要这个范围太大了 https://www.luogu.com.cn/problem/P1218 #include<bits/stdc.h> using namespace std; #define N 100011 typedef long long ll; typed…...

编程日记 2025/8/21 14:18:00

智能体开发实战指南：提示词设计、开发框架与工作流详解

在大语言模型（LLM）驱动的智能体（Agent）快速发展的今天，构建一个实用、智能的Agent已不再遥不可及。无论你是开发法律助手、租房合同分析器，还是通用办公自动化助手，理解提示词工程（P…...

编程日记 2025/8/28 13:48:33

jetson orin nano学习(torch+OpenCV+yolov5+)

一：入门第一件事：跟着商家教程配置哈哈指令：nvidia-smi -h 帮助命令 sudo jtop --查看nvidia的gpu状态 Tip:教程下载的pytorth,cuda,cudnn版本不一定是你项目符合的，要提前想好 1.2 安装虚拟环境包（要安…...

编程日记 2025/8/25 20:45:23

client-go如何监听自定义资源

如何使用 client-go 监听自定义资源在 Kubernetes 中使用 client-go 监听自定义资源（Custom Resource，简称 CR）需要借助 Dynamic Client 或 Custom Informer，因为 client-go 的标准 Clientset 只支持内置资源（如 Pod…...

编程日记 2025/8/21 16:23:13

【51单片机】3-3【定时器/计数器/中断】超声波测距模块测距

1.硬件 51最小系统超声波测距模块 2.软件 #include "reg52.h"//距离小于10cm,D5亮，D6灭，反之相反现象sbit D5 P3^7;//根据原理图（电路图），设备变量led1指向P3组IO口的第7口 sbit D6 P3^6;//根据原理图&…...

编程日记 2025/8/23 7:33:51

C语言求3到100之间的素数

一、代码展示二、运行结果三、感悟思考注意: 这个题思路他是一个试除法的一个思路先进入一个for循环遍历3到100之间的数字第二个for循环则是判断他不是素数那么就直接退出这里用break 是素数就打印出来在第一个for循环内第二个for循环外...

编程日记 2025/8/17 22:36:38

金仓数据库KCM认证考试介绍【2025年4月更新】

KCM（金仓认证大师）认证是金仓KES数据库的顶级认证，学员需通过前置KCA、KCP认证才能考KCM认证。 KCM培训考试一般1-2个月一次，KCM报名费原价为1.8万，当前优惠价格是1万（趋势是：费用越来越高&…...

编程日记 2025/8/22 2:29:06

leetcode每日一题：替换子串得到平衡字符串

引言今天的每日一题原题是1863. 找出所有子集的异或总和再求和，比较水，直接对于集合中的每一个元素，都有取或者不取2种情况，直接递归进去求和即可。更换成前几天遇到的更有意思的一题来写这个每日一题。题目有一个只含有 Q,…...

编程日记 2025/8/21 14:49:03

2025年数字化社会与智能计算国际学术会议 (ICDSIC 2025)

基本信息官网：www.icdsic.net 时间：2025年4月18-20日地点：中国-深圳主题数字化社会智能计算数字化制造、经济数字化政务、转型数字化农业、水利、管理数字化医疗、学习、社区数字基建、通信、交通数字…...

编程日记 2025/8/27 19:32:19

BN测试和训练时有什么不同, 在测试时怎么使用?

我们来彻底搞懂 Batch Normalization（BN） 在训练和测试阶段的区别，以及测试时怎么用。 🧠 一句话总结： 训练时：使用当前 mini-batch 的均值和方差测试时：使用整个训练集估计的“滑动平均均值…...

编程日记 2025/8/26 16:58:47

为什么卷积神经网络适用于图像和视频？

我们常听说“卷积神经网络（CNN）擅长图像和视频”，但其实 CNN 的核心本质远不止图像领域。我们先搞懂它为啥适合图像/视频。 🧠CNN 为什么适用于图像和视频？ 主要因为图像/视频具有空间局部性和结构平移性&#xff0c…...

编程日记 2025/8/17 22:31:53

python爬虫：DrissionPage实战教程

如果本文章看不懂可以看看上一篇文章，加强自己的基础：爬虫自动化工具：DrissionPage-CSDN博客案例解析： 前提：我们以ChromiumPage为主，写代码工具使用Pycharm（python环境3.9-3.10） …...

编程日记 2025/8/22 4:44:52

【Python爬虫高级技巧】BeautifulSoup高级教程：数据抓取、性能调优、反爬策略，全方位提升爬虫技能！

大家好，我是唐叔！上期我们聊了 BeautifulSoup的基础用法 ，今天带来进阶篇。我将分享爬虫老司机总结的BeautifulSoup高阶技巧，以及那些官方文档里不会告诉你的实战经验！ 文章目录一、BeautifulSoup性能优化技巧1. 解析…...

编程日记 2025/8/25 0:33:38

【动手学深度学习】卷积神经网络（CNN）入门

【动手学深度学习】卷积神经网络（CNN）入门 1，卷积神经网络简介2，卷积层2.1，互相关运算原理2.2，互相关运算实现2.3，实现卷积层 3，卷积层的简单应用：边缘检测3.1&#xff0…...

编程日记 2025/8/23 4:49:58

redux系列文章目录

前言

准备工作

详情代码

store.js

counterReducer.js

count/index.js

src/index.js

效果

相关文章：