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

news/2025/3/4 18:55:00/

接下来 开始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(其他状态管理方案)

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


http://www.ppmy.cn/news/1576614.html

相关文章

vue3之echarts仪表盘

vue3之echarts仪表盘 效果如下&#xff1a; 版本 "echarts": "^5.5.1" 核心代码&#xff1a; <template><div ref"chartRef" class"circle"></div> </template> <script lang"ts" setup>…

蓝桥杯备赛Day10 位运算

位运算 1.要点 与:& 或:| 异或:^ 非:~ 异或运算性质: (1)x^x0 (2)x^0x (3)a^b^ba(1,2推出) (4)a^bc->ab^c(两侧同异或b) 位运算按补码计算 正数的补码就是正数本身&#xff1b;负数的补码 负数的绝对值正数补码取反 1 正数右移要用unsigned int最后才会变0(int高位…

DeepSeek模型快速部署教程-搭建自己的DeepSeek

前言&#xff1a;在人工智能技术飞速发展的今天&#xff0c;深度学习模型已成为推动各行各业智能化转型的核心驱动力。DeepSeek 作为一款领先的 AI 模型&#xff0c;凭借其高效的性能和灵活的部署方式&#xff0c;受到了广泛关注。无论是自然语言处理、图像识别&#xff0c;还是…

迷你世界脚本世界UI接口:UI

世界UI接口&#xff1a;UI 彼得兔 更新时间: 2023-10-25 10:40:44 具体函数名及描述如下: 序号 函数名 函数描述 1 setGBattleUI(...) 设置战斗总结UI 2 world2RadarPos(...) 世界坐标转换到小地图 3 world2RadarDist(...) 世界长度转换到小地图 4 …

Golang的性能分析指标解读

Golang的性能分析指标解读 一、概述 语言&#xff09;是一种由Google开发的开源编程语言&#xff0c;以其并发性能和高效的编译速度而闻名。对于程序员来说&#xff0c;了解如何对Golang应用程序进行性能分析是非常重要的&#xff0c;因为这能帮助他们发现潜在的性能瓶颈并对其…

《Python实战进阶》No 7: 一个AI大模型聊天室的构建-基于WebSocket 实时通信开发实战

第7集&#xff1a; 一个AI大模型聊天室的构建-基于WebSocket 实时通信开发实战 在现代 Web 开发中&#xff0c;实时通信已经成为许多应用的核心需求。无论是聊天应用、股票行情推送&#xff0c;还是多人协作工具&#xff0c;WebSocket 都是实现高效实时通信的最佳选择之一。本…

C 注释编写模版

编写清晰、有用的注释是提高代码可读性和可维护性的关键。良好的注释不仅能帮助他人理解您的代码&#xff0c;也能在未来您自己或其他开发者需要维护或扩展代码时节省大量时间。下面提供了一些常见的注释模板和最佳实践&#xff0c;适用于不同的编程语言和场景。 头部文件注释&…

Spring +Spirng MVC+Mybatis +SpringBoot

AI ------>>>直接使用阿里的 通义天问 Maven基础 介绍 Maven 介绍 Maven 作用 项目构建 比较简单~ 核心功能 依赖管理 <!-- gavp属性--><groupId>com.example</groupId><artifactId>tials-manage</artifactId><version>0.0.1…