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

react redux用法学习

news 来源：原创 2025/5/17 4:53:57

参考资料：
https://www.bilibili.com/video/BV1ZB4y1Z7o8
https://cn.redux.js.org/tutorials/essentials/part-5-async-logic
AI工具：deepseek，通义灵码

第一天

安装相关依赖：
使用redux的中间件：

npm i react-redux

react-redux 并不是另一个 redux，而是对 redux 做了封装

在这里插入图片描述

npm i @reduxjs/toolkit

更好的使用 react-redux 的工具

构建目录
在这里插入图片描述
示例代码

index.js


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

modules/xxx.js

import { createSlice } from "@reduxjs/toolkit";import { getStoreList } from "../../utils/http";const counterSlice = createSlice({name: "counter",initialState: {channelList: [],  },reducers: {setChannel(state, action) {// 不能计算随机值，因为reducer是纯函数，不能有副作用state.channelList = action.payload},setChannel1: {reducer(state, action) {console.log("state -- ", state)console.log("action -- ", action)// state.push(action.payload)},prepare(title, content) {console.log("title -- ", title)console.log("content -- ", content)return {payload: {id: 1,title,content}}}}}
})const { setChannel, setChannel1 } = channelSlice.actions// 方法1
const fetchChannlList = async (dispatch) => {const response = await getStoreList()dispatch(setChannel(response.data.businessList))
}// 方法2
const fetchChannlList2 = () => async (dispatch) => {dispatch(setChannel1(1, 2))// const response = await getStoreList()// dispatch(setChannel(response.data.businessList))
}export {fetchChannlList,fetchChannlList2
};const reducer = channelSlice.reducer;export default reducer;

xxx.js为 modules 内独立redux模块
reducer内不要有类似生成随机数的逻辑，保证纯函数
reducers内的reducer可以是函数写法，也可以对象写法。对象写法会有reducer 与 prepare这两个回调函数可供使用。
prepare为该 setChannel1 获取的参数的收束，可在其中加工参数，生成随机数return
reducer为该 setChannel1 原参数，state、action

xxx.jsx

import { useSelector, useDispatch } from "react-redux";
import { useEffect } from 'react';import styles from './demo.module.css'import {fetchChannlList,fetchChannlList2
} from '../../store/modules/channelStore'const Demo = () => {const {channelList} = useSelector(state => state.channelReducer);const dispatch = useDispatch();useEffect(() => {// 方法1fetchChannlList(dispatch)// 方法2dispatch(fetchChannlList2())}, [])return (<div><h1>Hello World1</h1><p>Hello World</p><ul>{channelList.map(item => {return <li key={item.businessId}>{item.storeName}</li>})}</ul></div>)
}export default Demo;

其中 useSelector 可获取 redux 的 state，useDispatch 可触发 redux 的 action 修改 state。

代码中方法2 是官网推荐方法，及将reducer的action引到jsx后，将方法放到dispatch里调用，reducer的异步方法为：

const fetchChannlList2 = () => async (dispatch) => {// dispatch(setChannel1(1, 2))const response = await getStoreList()dispatch(setChannel(response.data.businessList))
}

其中dispatch会在第二次回调中给出来

而方法1 是我尝试使用的，reducer的异步方法为：

const fetchChannlList = async (dispatch) => {const response = await getStoreList()dispatch(setChannel(response.data.businessList))
}

fetchChannlList 直接就拿到了dispatch
目前得到的结果都是一致的
后续学习中再寻找方法2 比方法1 更推荐的原因。

反思问题

为什么 reducer 不能生成随机数，在我多次实验与查询后，生成随机数可能会有一下影响：

1.无法做test，没办法做断言测试（纯函数可做断言）
2.reducer中产生随机数可能导致组件多次更新，消耗更多性能
3.使用谷歌tool的时间旅行时，如果reducer中使用类似随机数逻辑可能导致 tool无法定位问题

第二天

就上述问题：方法2 比方法1 更推荐的原因

      // 方法1fetchChannlList(dispatch)// 方法2dispatch(fetchChannlList2())

当使用方法1时，下面reducer只会触发reducer，而不会走prepare的逻辑
而当使用方法2时，入参会先进入prepare后通过return，进入reducer

    setChannel1: {reducer(state, action) {console.log("state -- ", state)console.log("action -- ", action)// state.push(action.payload)},prepare(title, content) {console.log("title -- ", title)console.log("content -- ", content)return {payload: {id: 1,title,content}}}}

未完待续

react redux用法学习

参考资料： https://www.bilibili.com/video/BV1ZB4y1Z7o8 https://cn.redux.js.org/tutorials/essentials/part-5-async-logic AI工具：deepseek，通义灵码第一天安装相关依赖： 使用redux的中间件： npm i react-redu…...

编程日记 2025/5/17 4:53:57

C++20中的std::atomic_ref

一、std::atomic_ref 我们在学习C11后的原子操作时，都需要提前定义好std::atomic变量，然后才可以在后续的应用程序中进行使用。原子操作的优势在很多场合下优势非常明显，所以这也使得很多开发者越来习惯使用原子变量。但是，在实…...

编程日记 2025/5/13 18:39:03

encodeURI()，encodeURIComponent()区别

encodeURI()，encodeURIComponent()区别 encodeURI(): 对整个url(链接/网络链接)进行编码。对中文，完全编码。对英文不带空格则不会编码，带空格则会对空格编码。解码：decodeURI() 例如： let ChineseUrl "htt…...

编程日记 2025/5/17 4:42:10

Selenium：网页frame与多窗口处理

🍅 点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快一、多窗口处理 1.1、多窗口简介点击某些链接，会重新打开⼀个窗⼜，对于这种情况，想在新页⾯上操作，就得先切换窗…...

编程日记 2025/5/16 1:26:25

自动驾驶---如何打造一款属于自己的自动驾驶系统

在笔者的专栏《自动驾驶Planning决策规划》中，主要讲解了行车的相关知识，从Routing，到Behavior Planning，再到Motion Planning，以及最后的Control，笔者都做了相关介绍，其中主要包括算法在量产上…...

编程日记 2025/5/17 4:17:14

开源机器人+具身智能解决方案+AI

开源机器人、具身智能（Embodied Intelligence）以及AI技术的结合，可以为机器人领域带来全新的解决方案。以下是这一结合的可能方向和具体方案： 1. 开源机器人平台开源机器人平台为开发者提供了灵活的基础架构，可以在此基础上结合具身智能和AI技术。以下是一些常用的开源机…...

编程日记 2025/5/17 1:29:00

【web自动化】指定chromedriver以及chrome路径

selenium自动化，指定chromedriver，以及chrome路径对应这篇文章，可以点击查看，详情 from selenium import webdriverdef get_driver():# 获取配置对象option webdriver.ChromeOptions()option.add_experimental_option("de…...

编程日记 2025/5/16 1:26:18

高等代数笔记—线性变换

latex花体字母与花体数字 https://blog.csdn.net/weixin_39589455/article/details/133846783 https://blog.csdn.net/orz_include/article/details/123645710线性变换线性空间 V V V到自身的映射称为 V V V的一个变换，最基本的是线性变换。定义：变换…...

编程日记 2025/5/16 1:26:15

Kickstart自动化安装过程中自动选择较小的磁盘安装操作系统

Kickstart自动化安装过程中自动选择较小的磁盘安装操作系统需求在实际生成操作过程中，一般会遇到物理服务器存在多块盘的情况。安装过程中，磁盘的标签是随机分配的，并不是空间较小的盘，就会使用较小的磁盘标签而需求往往需要…...

编程日记 2025/5/15 3:21:04

2024BaseCTF_week4_web上

继续！冲冲冲目录圣钥之战1.0 nodejs 原型原型链原型链污染回到题目 flag直接读取不就行了？ 圣钥之战1.0 from flask import Flask,request import jsonapp Flask(__name__)def merge(src, dst):for k, v in src.items():if hasattr(dst, __geti…...

编程日记 2025/5/16 1:26:10

大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡

大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡背景前端开发接口请求，调试，联调，接入数据，前端必不可少工具，postman是一个非常好…...

编程日记 2025/5/16 1:26:08

内网穿透的应用-Ubuntu本地Docker搭建pichome文件管理系统打造个人云相册

文章目录前言1.关于pichome2.本地部署pichome3.简单使用pichome4. 安装内网穿透5.配置pichome公网地址6. 配置固定公网地址前言你是不是也经常遇到这样的尴尬：手机、电脑里堆满了照片和视频，想找一张特定的图片时却像在大海捞针一样无从下手&#xf…...

编程日记 2025/5/16 1:26:06

深度学习之神经网络框架搭建及模型优化

神经网络框架搭建及模型优化目录神经网络框架搭建及模型优化1 数据及配置1.1 配置1.2 数据1.3 函数导入1.4 数据函数1.5 数据打包 2 神经网络框架搭建2.1 框架确认2.2 函数搭建2.3 框架上传 3 模型优化3.1 函数理解3.2 训练模型和测试模型代码 4 最终代码测试4.1 SGD优化算法…...

编程日记 2025/5/16 1:26:03

DeepSeek AI R1推理大模型API集成文档

DeepSeek AI R1推理大模型API集成文档引言随着自然语言处理技术的飞速发展，大语言模型在各行各业的应用日益广泛。DeepSeek R1作为一款高性能、开源的大语言模型，凭借其强大的文本生成能力、高效的推理性能和灵活的接口设计，吸引了大量开发…...

编程日记 2025/5/16 1:26:01

怎麼使用靜態住宅IP進行多社媒帳號管理

隨著社交媒體平臺的多樣化，很多人發現一個社媒帳號已經無法滿足需求。以下是幾個常見場景： 企業需求：企業可能需要在不同平臺上運營多個品牌帳號，為每個市場地區單獨設立帳號。個人需求：一些自由職業者或內容創作者可…...

编程日记 2025/5/16 1:25:59

【Elasticsearch】Bucket Selector Aggregation

Elasticsearch 的Bucket Selector Aggregation是一种强大的管道聚合功能，用于根据条件过滤聚合结果中的桶（buckets）。它允许用户通过编写脚本来动态决定哪些桶应该被保留，哪些应该被过滤掉。以下是对Bucket Selector Aggregation的…...

编程日记 2025/5/17 3:27:43

CEF132 编译指南 MacOS 篇 - 启程：认识 CEF (一)

1. 引言在当今的软件开发领域，将 Web 技术融入桌面应用程序已成为一种趋势。开发者们寻求一种方式，既能充分利用原生应用的性能，又能享受 Web 开发带来的高效和灵活性。Chromium Embedded Framework (CEF) 应运而生，它是一个基于…...

编程日记 2025/5/16 1:25:54

Python 操作 MongoDB 教程

一、引言在当今数字化时代，数据的存储和管理至关重要。传统的关系型数据库在处理一些复杂场景时可能会显得力不从心，而 NoSQL 数据库应运而生。MongoDB 作为一款开源的、面向文档的 NoSQL 数据库，凭借其高性能、高可扩展性和灵活的数据模型…...

编程日记 2025/5/16 1:25:52

长安汽车发布“北斗天枢2.0”计划，深蓝汽车普及全民智驾

2月9日，长安汽车智能化战略“北斗天枢2.0”计划暨深蓝汽车全场景智能驾驶解决方案发布会在重庆盛大召开。此次发布会标志着长安汽车正式迈入智能化战略的新纪元，携手众多“中国智驾合伙人”，共同开启全民智驾元年。发布会上，长安…...

编程日记 2025/5/16 1:25:50

SpringBoot速成（七）注册实战P2-P4

1.创建数据库创建依赖引入 <dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>3.0.3</version></dependency> <…...

编程日记 2025/5/16 1:25:48

大语言模型RAG，transformer

1、RAG技术流总结第一张图是比较经典的RAG知识图谱，第二张图是更加详细扎实的介绍图。 1.1 索引坦白来说这部分的技术并不是大模型领域的，更像是之前技术在大模型领域的应用；早在2019年我就做过faiss部分的尝试，彼时索引技术已…...

编程日记 2025/5/17 4:02:31

Crowdin 在线本地化平台调用硅基流动AI预翻译

平台介绍硅基流动（AI服务平台） 官网：https://siliconflow.cn/zh-cn/ 官方介绍我主要使用：云服务平台 SilliconCloud 此平台已经将热门的开源大语言模型部署，花钱买额度，就能使用 API 最近有上线 Deep…...

编程日记 2025/5/16 1:25:43

第5章数据库系统（选择｜案例｜论文）（重点★★★★★）

5.1 数据库管理系统1 数据库是长期存储在计算机内的、有组织的、可共享的数据集合，数据库系统是指在计算机信息系统中引入数据库后的系统，一般由数据库、数据库管理系统 (DataBaseManagement System，DBMS)、应用系统、数据库管理员(DataBase…...

编程日记 2025/5/16 1:25:41

linux部署node服务

1、安装nvm管理node版本 # 下载、解压到指定目录 wget https://github.com/nvm-sh/nvm/archive/refs/tags/v0.39.1.tar.gz tar -zxvf nvm-0.39.0.tar.gz -C /opt/nvm # 配置环境 vim ~/.bashrc~：这是一个路径简写符号，代表当前用户的主目录。在大多数 …...

编程日记 2025/5/15 10:45:15

【AI赋能】蓝耘智算平台实战指南：3步构建企业级DeepSeek智能助手

蓝耘智算平台实战指南：3步构建企业级DeepSeek智能助手引言：AI大模型时代的算力革命在2025年全球AI技术峰会上，DeepSeek-R1凭借其开源架构与实时推理能力，成为首个通过图灵测试的中文大模型。该模型在语言理解、跨模态交互等维…...

编程日记 2025/5/16 1:25:37

hyperf知识问题汇总

1、简单说下 hyperf（什么是 hyperf） 答：hyperf 是一个依赖swoole扩展的 php 开源开发框架，它由黄朝辉团队设计创建维护，具备简洁而强大的组件和超强的并发性能，而且还支持微服务架构，例如&…...

编程日记 2025/5/15 17:18:20

【EXCEL】【VBA】处理GI Log获得Surf格式的CONTOUR DATA

【EXCEL】【VBA】处理GI Log获得Surf格式的CONTOUR DATA data source1： BH coordination tabledata source2：BH layer tableprocess 1：Collect BH List To Layer Tableprocess 2：match Reduced Level from "Layer"+"BH"data source1： BH coordination…...

编程日记 2025/5/13 16:30:56

DeepSeek-R1技术革命：用强化学习重塑大语言模型的推理能力

引言：低成本高性能的AI新范式在2025年1月，中国AI公司DeepSeek发布了两个标志性模型——DeepSeek-R1-Zero与DeepSeek-R1，以仅600万美元的训练成本实现了与OpenAI O1系列（开发成本约5亿美元）相当的推理性能&#xff0c…...

编程日记 2025/5/15 3:20:23

SQLite 约束

SQLite 约束 SQLite 是一种轻量级的数据库管理系统，它以其简洁的设计和高效的性能在众多数据库系统中脱颖而出。在SQLite中，约束是一种用于确保数据完整性和一致性的机制。本文将详细介绍SQLite中的各种约束，包括它们的用途、语法以及在实际应用中的注意事项。 1. 约束概述…...

编程日记 2025/5/13 16:30:52

Vue.js 状态管理库Pinia

Pinia Pinia ：Vue.js 状态管理库Pinia持久化插件-persist Pinia ：Vue.js 状态管理库 Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。要使用Pinia ，先要安装npm install pinia在main.js中导入Pinia 并使用示例…...

编程日记 2025/5/13 16:30:49

qwen2.5-vl-7B视觉大模型私有化部署webUI

服务器选用：算力云部署qwen2.5-vl-7B，24g显卡跑不起图，单问问题就占20g左右。有能力可以用大点的显卡一、下载模型 Qwen2.5-VL-7B-Instruct 有conda ，可以在conda下操作，不知道conda的同学可以参考本博主之前的文章…...

编程日记 2025/5/16 1:25:33

Spring Boot 线程池自定义拒绝策略：解决任务堆积与丢失问题

如何通过自定义线程池提升系统稳定性背景在高并发系统中，线程池管理至关重要。默认线程池可能导致： 资源浪费（创建过多线程导致 OOM）任务堆积（队列满后任务被拒绝）任务丢失（默认拒绝策略丢…...

编程日记 2025/5/16 17:40:15

C++17 新特性解析

C++17 是 C++ 标准的一个重要更新，它在 C++11/14 的基础上引入了许多新特性，进一步简化了代码编写、提升了性能和类型安全性。以下是 C++17 的主要特性分类介绍：一、语言核心改进 1. 结构化绑定（Structured Bindings）允许将元组、结构体或数组的成员直接解包到变量中。…...

编程日记 2025/5/15 15:57:16

支持向量机相关文献

根据最新的研究动态和文献综述，当前支持向量机（SVM）的研究方向和内容主要集中在以下几个方面： 1. 提高训练效率并行计算与分布式计算：随着数据规模的增加，SVM的训练时间往往较长，难以满足实时…...

编程日记 2025/5/15 17:48:59

线上hbase rs 读写请求个数指标重置问题分析

问题描述：客户想通过调用hbase的jmx接口获取hbase的读写请求个数，以此来分析HBase读写请求每日增量。但是发现生产，测试多个集群，Hbase服务指标regionserver读写请求个数存在突然下降到0或者大幅度下降情况。需要排查原因：某个Region的读写请求数：会发现经常会重置为…...

编程日记 2025/5/17 3:33:35

USB子系统学习（四）用户态下使用libusb读取鼠标数据

文章目录 1、声明2、HID协议2.1、描述符2.2、鼠标数据格式 3、应用程序4、编译应用程序5、测试6、其它 1、声明本文是在学习韦东山《驱动大全》USB子系统时，为梳理知识点和自己回看而记录，全部内容高度复制粘贴。韦老师的《驱动大全》：商…...

编程日记 2025/5/15 4:11:53

WPF 设置宽度为父容器宽度的一半

方法1：使用绑定和转换器实现创建类文件 HalfWidthConverter public class HalfWidthConverter : IValueConverter{public object Convert(object value, Type targetType, object parameter, CultureInfo culture){if (value is double width){return width / 4…...

编程日记 2025/5/16 1:25:23

网络工程师（30）以太网技术

一、起源与发展以太网技术起源于20世纪70年代，最初由Xerox公司的帕洛阿尔托研究中心（PARC）开发。最初的以太网采用同轴电缆作为传输介质，数据传输速率为2.94Mbps（后发展为10Mbps），主要用于解决…...

编程日记 2025/5/16 1:25:21

2025.2.11

1> 制作一个闹钟软件 .h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QLabel> #include <QLineEdit> #include <QPushButton> #include <QTime> #include <QTimer> #include <QTimeEdit> #include <QDa…...

编程日记 2025/5/16 1:25:19

HTML应用指南：利用POST请求获取接入比亚迪业态的充电桩位置信息

在新能源汽车快速发展的今天，充电桩的分布和可用性成为了影响用户体验的关键因素之一。比亚迪作为全球领先的新能源汽车制造商，不仅在车辆制造方面取得了卓越成就，也在充电基础设施建设上投入了大量资源。为了帮助用户更方便地找到比亚迪充电桩的位置，本篇文章，我们将探究…...

编程日记 2025/5/16 1:25:18

系统URL整合系列视频四（需求介绍补充）

视频系统URL整合系列视频四（需求补充说明） 视频介绍 （全国）大型分布式系统Web资源URL整合需求（补充）讲解。当今社会各行各业对软件系统的web资源访问权限控制越来越严格，控制粒度也越来越细。…...

编程日记 2025/5/16 1:25:16

PRC框架-Dubbo

RPC框架 RPC（Remote Procedure Call，远程过程调用）框架是一种允许客户端通过网络调用服务器端程序的技术。以下是常见的RPC框架及其特点： 1. 基于HTTP/REST的RPC框架特点：简单易用，与Web开发无缝集成&am…...

编程日记 2025/5/16 1:25:14

Win10环境借助DockerDesktop部署最新MySQL9.2

Win10环境借助DockerDesktop部署最新MySQL9.2 前言作为一杆主要撸Java的大数据平台开发攻城狮，必不可少要折腾各种组件，环境和版本一直是很头疼的事情。虽然可以借助Anaconda来托管Python的环境，也可以使用多个虚拟机来部署不同的环境&…...

编程日记 2025/5/16 1:25:12

PlantUML 总结

PlantUML 总结 1. 概述 PlantUML 是一个开源工具，允许用户通过简单的文本描述来生成各种UML图表。它支持多种图表类型，包括但不限于序列图、用例图、类图、活动图等。 2. 基本概念 2.1 开始和结束标记 startuml 和 enduml：用于标记Plant…...

编程日记 2025/5/16 1:25:11

【Elasticsearch】监控与管理：集群监控指标

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编…...

编程日记 2025/5/16 1:25:09

Swift的方法派发机制

1. 静态派发（Static Dispatch） 静态派发在编译时确定方法的具体实现，调用时直接跳转到该实现。静态派发的优点是性能高，因为不需要运行时查找方法实现。适用场景： 值类型（Struct 和 Enum）&am…...

编程日记 2025/5/16 1:25:07

4.python+flask+SQLAlchemy+达梦数据库

前提 1.liunx Centos7上通过docker部署了达梦数据库。从达梦官网下载的docker镜像。（可以参考前面的博文） 2.windows上通过下载x86,win64位的达梦数据库，只安装客户端，不安装服务端。从达梦官网下载达梦数据库windows版。（可以参考前面的博文）这样就可以用windows的达…...

编程日记 2025/5/16 1:08:03

6.深度学习在推荐系统中的应用

接下来我们将学习深度学习在推荐系统中的应用。深度学习技术近年来在推荐系统中得到了广泛应用，能够有效提升推荐系统的性能和精度。在这一课中，我们将介绍以下内容： 深度学习在推荐系统中的优势常用的深度学习推荐模型深度学习推荐系统的实…...

编程日记 2025/5/16 1:07:51

Leetcode - 149双周赛

目录一、3438. 找到字符串中合法的相邻数字二、3439. 重新安排会议得到最多空余时间 I三、3440. 重新安排会议得到最多空余时间 II四、3441. 变成好标题的最少代价一、3438. 找到字符串中合法的相邻数字题目链接本题有两个条件： 相邻数字互不相同两个数字的的…...

编程日记 2025/5/12 10:20:32

ArrayList、LinkedList、HashMap、HashTable、HashSet、TreeSet

集合族谱在这些集合中，仅有vector和hashtable是线程安全的，其内部方法基本都有synchronized修饰。 ArrayList 底层采用Object数组实现，实现了RandomAccess接口因此支持随机访问。插入删除操作效率慢。 ArrayList需要一份连续的内存空间。 A…...

编程日记 2025/5/14 22:55:49

第一天

第二天

相关文章：