React 之 Redux 第二十八节 学习目标与规划大纲及概要讲述

接下来 开始Redux 全面详细的文档输出,主要基于一下几个方面,欢迎大家补充指正

一、Redux 基础概念

为什么需要 Redux
前端状态管理的挑战(组件间通信、状态共享
Redux 解决的问题:集中式、可预测的状态管理
适用场景(复杂应用、多组件交互)
Redux 三大核心原则
单一数据源(Single Source of Truth)
状态只读(State is Read-Only,通过 Action 修改)
纯函数修改(Reducers 必须是纯函数)
核心概念
Store:全局状态容器,方法:getState(), dispatch(action), subscribe(listener)
Action:描述状态变化的普通对象(必须包含 type),Action Creator(生成 Action 的函数)
Reducer:纯函数,接收旧状态和 Action,返回新状态,禁止直接修改原状态,返回新对象
Dispatch:触发 Action 的唯一方法

二、Redux 基础使用

创建 Redux Store

import { createStore } from 'redux';
const store = createStore(rootReducer);
定义 Action 和 Reducer

Action 示例:

const increment = () => ({ type: 'INCREMENT' });

Reducer 示例:

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT': return state + 1;
    default: return state;
  }
};

连接 React 应用

使用 react-redux 库的 Provider 包裹根组件:

import { Provider } from 'react-redux';
<Provider store={store}>
  <App />
</Provider>

组件中获取状态:useSelector Hook

组件中触发 Action:useDispatch Hook

三、Redux 进阶

异步操作处理

中间件(Middleware)的作用

Redux-Thunk:处理异步 Action

const fetchData = () => async (dispatch) => {
  dispatch({ type: 'FETCH_START' });
  const data = await api.getData();
  dispatch({ type: 'FETCH_SUCCESS', payload: data });
};

Redux-Saga(可选):基于 Generator 的复杂异步流管理

组合 Reducer

使用 combineReducers 拆分多个 Reducer:

const rootReducer = combineReducers({
  counter: counterReducer,
  user: userReducer
});

中间件扩展

日志中间件(redux-logger)

开发工具中间件(redux-devtools-extension)

四、Redux 最佳实践与工具

会重点介绍 Redux Toolkit(官方推荐)

createSlice:自动生成 Action & Reducer

configureStore:集成中间件和 DevTools

createAsyncThunk:简化异步逻辑

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
  },
});

状态持久化

使用 redux-persist 持久化 Store 到本地存储

性能优化

避免不必要的渲染:React.memo + 选择性 useSelector

使用 reselect 缓存复杂计算(Memoized Selectors

五、Redux 生态与替代方案

Redux 生态库

redux-observable(基于 RxJS)

redux-form(表单管理)

现代替代方案

Context API + useReducer(小型应用)

MobX、Recoil、Zustand(其他状态管理方案)

错误之处,麻烦大家评论指正

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/982019.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【大模型基础_毛玉仁】1.3 基于Transformer 的语言模型

【大模型基础_毛玉仁】1.3 基于Transformer 的语言模型 1.3 基于Transformer 的语言模型1.3.1 Transformer1&#xff09;注意力层&#xff08;AttentionLayer&#xff09;2&#xff09;全连接前馈层&#xff08;Fully-connected Feedforwad Layer&#xff09;3&#xff09;层正…

Beeline的使用和Hive JDBC

目录 1. 引言1.1 Hadoop1.2 HBase1.3 Hive 2. Beeline2.1 使用Beeline访问Hive2.1.1 通过beeline直接连接Hive2.1.2 先进入beeline客户端再连接Hive2.1.3 先进入beeline客户端再连接MySQL 2.2 Beeline命令 3. Hive JDBC3.1 pom.xml中依赖配置3.2 Util工具类3.3 代码3.4 结果 参…

分布式多卡训练(DDP)踩坑

多卡训练最近在跑yolov10版本的RT-DETR&#xff0c;用来进行目标检测。 单卡训练语句&#xff08;正常运行&#xff09;&#xff1a; python main.py多卡训练语句&#xff1a; 需要通过torch.distributed.launch来启动&#xff0c;一般是单节点&#xff0c;其中CUDA_VISIBLE…

30秒从零搭建机器人管理系统(Trae)

1. 安装 [Trae官网】(https://www.trae.com.cn/) 2. 提示词 创建一个BS架构的机器人远程操控系统&#xff0c;具备机器人状态及位置实时更新&#xff0c;可以实现机器人远程遥控&#xff0c;可以对机器人工作日志进行统计分析&#xff0c;以及其它管理系统的常用功能3. 模型…

软考-数据库开发工程师-3.1-数据结构-线性结构

第3章内容比较多&#xff0c;内容考试分数占比较大&#xff0c;6分左右 线性表 1、线性表的定义 一个线性表是n个元素的有限序列(n≥0)&#xff0c;通常表示为(a1&#xff0c;a2, a3,…an). 2、线性表的顺序存储(顺序表) 是指用一组地址连续的存储单元依次存储线性表中的数据元…

解锁数据潜能,永洪科技以数据之力简化中粮可口可乐决策之路

企业数字化转型是指企业利用数字技术和信息通信技术来改变自身的商业模式、流程和增值服务&#xff0c;以提高企业的竞争力和创新能力。数字化转型已经成为企业发展的重要战略&#xff0c;尤其在当前信息技术高速发展的时代。数字化转型还涉及到企业与消费者之间的互动和沟通。…

Vue 3 整合 WangEditor 富文本编辑器:从基础到高级实践

本文将详细介绍如何在 Vue 3 项目中集成 WangEditor 富文本编辑器&#xff0c;实现图文混排、自定义扩展等高阶功能。 一、为什么选择 WangEditor&#xff1f; 作为国内流行的开源富文本编辑器&#xff0c;WangEditor 具有以下优势&#xff1a; 轻量高效&#xff1a;压缩后仅…

游戏引擎学习第137天

演示资产系统中的一个 bug 我们留下了个问题&#xff0c;你现在可以看到&#xff0c;移动时它没有选择正确的资产。我们知道问题的原因&#xff0c;就在之前我就预见到这个问题会出现。问题是我们的标签系统没有处理周期性边界的匹配问题。当处理像角度这种周期性的标签时&…

监听 RabbitMQ 延时交换机的消息数、OpenFeign 路径参数传入斜杠无法正确转义

背景 【MQ】一套为海量消息和高并发热点消息&#xff0c;提供高可用精准延时服务的解决方案 我现在有一个需求&#xff0c;就是监听 RabbitMQ 一个延时交换机的消息数&#xff0c;而 RabbitTemplate 是不存在对应的方法来获取的。 而我们在 RabbitMQ 的控制台却可以发现延时交…

大数据学习(56)-Impala

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博主哦&#x1f91…

开发环境搭建-01.前端环境搭建

一.整体结构 Nginx目录必须放在没有中文的目录中才能正常运行&#xff01;&#xff01;&#xff01;

Redis 常见数据类型

官方文档 RedisCommands 1&#xff09;Redis 的命令有上百个&#xff0c;如果纯靠死记硬背比较困难&#xff0c;但是如果理解 Redis 的一些机制&#xff0c;会发现这些命令有很强的通用性。 2&#xff09;Redis 不是万金油&#xff0c;有些数据结构和命令必须在特定场景下使用…

Redis7——进阶篇(三)

前言&#xff1a;此篇文章系本人学习过程中记录下来的笔记&#xff0c;里面难免会有不少欠缺的地方&#xff0c;诚心期待大家多多给予指教。 基础篇&#xff1a; Redis&#xff08;一&#xff09;Redis&#xff08;二&#xff09;Redis&#xff08;三&#xff09;Redis&#x…

云原生时代的技术桥梁

在数字化转型的大潮中&#xff0c;企业面临着数据孤岛、应用间集成复杂、高成本与低效率等问题。这些问题不仅阻碍了企业内部信息的流通和资源的共享&#xff0c;也影响了企业对外部市场变化的响应速度。当前&#xff0c;这一转型过程从IT角度来看&#xff0c;已然迈入云原生时…

ICLR 2025|香港浸会大学可信机器学习和推理课题组专场

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; AITIME 01 ICLR 2025预讲会团队专场 AITIME 02 专场信息 01 Noisy Test-Time Adaptation in Vision-Language Models 讲者&#xff1a;曹晨涛&#xff0c;HKBU TMLR Group一年级博士生&#xff0c;目前关注基础…

ProfibusDP主站转ModbusTCP网关如何进行数据互换

ProfibusDP主站转ModbusTCP网关如何进行数据互换 在现代工业自动化领域&#xff0c;通信协议的多样性和复杂性不断增加。Profibus DP作为一种经典的现场总线标准&#xff0c;广泛应用于工业控制网络中&#xff1b;而Modbus TCP作为基于以太网的通信协议&#xff0c;因其简单易…

016.3月夏令营:数理类

016.3月夏令营&#xff1a;数理类&#xff1a; 中国人民大学统计学院&#xff1a; http://www.eeban.com/forum.php?modviewthread&tid386109 北京大学化学学院第一轮&#xff1a; http://www.eeban.com/forum.php?m ... 6026&extrapage%3D1 香港大学化学系夏令营&a…

使用IDEA如何隐藏文件或文件夹

选择file -> settings 选择Editor -> File Types ->Ignored Files and Folders (忽略文件和目录) 点击号就可以指定想要隐藏的文件或文件夹

通过微步API接口对单个IP进行查询

import requests import json# 微步API的URL和你的API密钥 API_URL "https://api.threatbook.cn/v3/ip/query" API_KEY "***" # 替换为你的微步API密钥 def query_threatbook(ip):"""查询微步API接口&#xff0c;判断IP是否为可疑"…

第七节:基于Winform框架的串口助手小项目---协议解析《C#编程》

介绍 目标 代码实现 private void serialPort1_DataReceived(object sender, SerialDataReceivedEventArgs e){if (isRxShow false) return;// 1,需要读取有效的数据 BytesToReadbyte[] dataTemp new byte[serialPort1.BytesToRead];serialPort1.Read(dataTemp,0,dataTemp.Le…