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（其他状态管理方案）

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