Redux 原理拆解与实践

稀土掘金技术社区 09月25日

Redux 原理拆解与实践

本文通过手写核心逻辑和 RTK 工具，拆解 Redux 原理，明晰底层原理与高效开发的协同路径。涵盖 Action、Reducer、Store 三要素，以及中间件、RTK 工具等，帮助开发者深入理解 Redux，构建清晰的状态管理脉络。

📚 Redux 遵循「单向数据流」，状态变更需经 Action → Reducer → Store 流程，确保可预测性。

🔧 Action 是触发状态变更的 “入口”，本质是平面对象，核心作用是描述 “发生了什么操作”，可通过 payload 携带数据。

🧮 Reducer 是 Redux 的 “状态计算核心”，接收当前 state 和 Action，返回 “新状态”，决定 “如何根据操作变更状态”。

🏢 Store 是 Redux 中 “唯一的状态容器”，通过 createStore(reducer) 创建，封装 “状态存储、分发 Action、监听状态变化” 的核心能力。

🛠️ 中间件增强 dispatch 能力，支持异步操作，如 redux-thunk 和 redux-saga。

🚀 Redux Toolkit (RTK) 封装 createSlice、configureStore 等工具，大幅减少重复代码，成为 Redux 开发的推荐方案。

🔄 Redux 通过分离 Action、Reducer、Store，让状态变更 “可追溯、可测试”，尤其适配大型项目的复杂状态管理。

原创再学一点就睡Orz 2025-09-13 09:03 重庆

点击关注公众号，“技术干货” 及时达！

Redux 作为前端经典状态管理库，核心解决 “组件间状态共享” 与 “状态变更可追溯” 问题，适配大型 React 项目。这篇文章我通过结合「手写核心逻辑」与「现代工具 RTK」，拆解 Redux 原理，明晰 “底层原理” 与 “高效开发” 的协同路径

一、Redux 核心三要素：Action、Reducer、StoreRedux 遵循「单向数据流」，状态变更需经 Action → Reducer → Store 流程，确保可预测性。

1. Action：操作描述的 “消息载体”Action 是触发状态变更的 “入口”，本质是「平面对象」（需 isPlainObject 验证），核心作用是描述 “发生了什么操作”，可通过 payload 携带数据。

核心特性（结合手写代码）「必须含 type 属性」：标识操作类型（如 INCREMENT），类型无强制约束（字符串、Symbol 均可），大型项目建议单独维护（如 actionTypes.js）避免硬编码。示例：

// 基础 Action 结构const incrementAction = { type: "INCREMENT", payload: 1 };

「Action 创建函数（Action Creator）」：用「纯函数」简化 Action 生成，函数无副作用（不修改参数、无异步、不影响外部环境）。示例：

// 生成“增加计数”的 Actionconst increment = (step) => ({ type: "INCREMENT", payload: step});

「bindActionCreators：自动分发 Action」手动创建 Action 需调用 store.dispatch(action) 触发变更，bindActionCreators 可增强 Action Creator，使其创建后「自动分发」，简化代码。核心实现（手写逻辑）：

function getAutodisPatchActionCreator(actionCreator, dispatch) {return(...args) => {    const action = actionCreator(...args);     dispatch(action);   };}exportdefaultfunction bindActionCreators(actionCreators, dispatch) {if (typeof actionCreators === 'function') {    return getAutodisPatchActionCreator(actionCreators, dispatch);  }const result = {};for (const key in actionCreators) {    const creator = actionCreators[key];    if (typeof creator === 'function') {      result[key] = getAutodisPatchActionCreator(creator, dispatch);    }  }return result;}

2. Reducer：状态计算的 “纯函数”Reducer 是 Redux 的 “状态计算核心”，接收当前 state 和 Action，返回「新状态」（不可修改原状态），决定 “如何根据操作变更状态”。

核心特性（结合手写代码）「必须是纯函数」：保障 Redux 可预测性，要求：

不修改入参 state 和 action；

无异步操作（如定时器、接口请求）；

不影响外部环境（如修改全局变量、操作 DOM）。优势：纯函数便于测试、可还原状态，且能优化 React 组件渲染（避免不必要重绘）。

「初始化状态的技巧」创建 Store 时，Redux 自动分发「初始化 Action」（类型为 @@redux/INIT + 随机字符串，由 ActionTypes.INIT() 生成），此时 Reducer 接收 state = undefined，可通过「参数默认值」初始化状态：

// 计数状态管理示例function countReducer(state = 0, action) {  switch (action.type) {    case "INCREMENT":      return state + action.payload;     case "DECREMENT":      return state - action.payload;    default:      return state;   }}

「combineReducers：拆分复杂 Reducer」大型项目状态结构复杂（如 “用户信息”“购物车”），需按 “状态模块” 拆分 Reducer，再用 combineReducers 合并为「根 Reducer」。核心实现（手写逻辑）：

export defaultfunction combineReducers(reducers) {  validateReducers(reducers); returnfunction (state = {}, action) {    const newState = {};    for (const key in reducers) {      if (reducers.hasOwnProperty(key)) {        const subReducer = reducers[key];        newState[key] = subReducer(state[key], action);       }    }    return newState;   };}

示例（合并 “用户” 与 “计数” 模块）：

const rootReducer = combineReducers({  user: userReducer,   count: countReducer });// Store 状态结构：{ user: {...}, count: 0 }

3. Store：状态的 “统一容器”Store 是 Redux 中 “唯一的状态容器”，通过 createStore(reducer) 创建，封装「状态存储、分发 Action、监听状态变化」的核心能力。

核心方法（手写实现）「getState()：获取当前状态」直接返回 Store 内部保存的 currentState，是组件获取状态的唯一途径：

function getState() { return currentState; }「dispatch(action)：触发状态变更」唯一能修改状态的方法，流程：① 验证 Action（必须是平面对象，且含 type）；② 调用 Reducer，传入当前状态和 Action，计算新状态；③ 执行所有监听器（listeners），通知状态变更。核心代码：

function dispatch(action) {if (!isPlainObject(action)) {    thrownewTypeError("action must be a plain object");  }if (action.type === undefined) {    thrownewTypeError("action must has a property of type");  }  currentState = currentReducer(currentState, action); for (const listener of listeners) {    listener();   }}

「subscribe(listener)：监听状态变化」注册 “状态变更监听器”（无参函数），dispatch 触发后执行所有监听器；返回 “取消监听” 函数，避免内存泄漏。核心代码：

function subscribe(listener) {  listeners.push(listener);   let isRemoved = false;  return function () {    if (isRemoved) return;    const index = listeners.indexOf(listener);    listeners.splice(index, 1);     isRemoved = true;  };}

「Store 初始化」创建 Store 时，自动分发「初始化 Action」（ActionTypes.INIT()），触发 Reducer 执行，通过参数默认值完成状态初始化（无需手动传默认状态）。

二、Redux 工具函数与中间件1. 工具函数：保障核心逻辑合法性「isPlainObject(obj)」：验证平面对象（__proto__ 指向 Object.prototype），避免非标准对象（如数组、类实例）导致逻辑异常。

export default function isPlainObject(obj) {  if (typeof obj !== "object") return false;  return Object.getPrototypeOf(obj) === Object.prototype;}

「ActionTypes」：生成随机初始化 Action 类型（如 @@redux/INIT + 随机字符串），避免与业务 Action 冲突。

function getRandom(length) {  return Math.random().toString(36).slice(2, length + 2).split("").join(".");}export default {  INIT() { return `@@redux/INIT${getRandom(6)}`; },  UNKNOWN() { return `@@redux/PROBE_UNKNOWN_ACTION${getRandom(6)}`; }};

2. 中间件：增强 dispatch 能力Redux 核心仅支持「同步 Action」，处理异步操作（如接口请求）需通过「中间件」扩展 dispatch 功能。

中间件本质是 “函数链”，在 dispatch 触发 Action 后、Reducer 执行前，插入自定义逻辑（如异步请求、日志、错误捕获）。常见中间件：

redux-thunk：支持「函数式 Action」（Action 可返回函数，内部执行异步操作）；

redux-saga：用 Generator 管理复杂异步流程（如接口重试、竞态处理）。

「核心原理」：中间件包装 store.dispatch，支持非标准 Action（如函数、Promise），待异步完成后，分发真正的 “同步 Action” 触发状态变更。

三、从手写 Redux 到 RTK：现代开发的演进现代开发中，Redux 官方推出「Redux Toolkit（RTK）」，封装 createSlice（合并 Action 与 Reducer）、configureStore（简化 Store 创建，内置中间件）等工具，大幅减少重复代码（无需手动写 combineReducers、bindActionCreators），已成为 Redux 开发的「推荐方案」。

手写核心 vs RTK：定位与价值「手写核心」：并非替代 RTK，而是为了「深入理解 Redux 底层逻辑」。掌握核心原理后，能更灵活应对 RTK 封装的 “黑盒场景”（如自定义中间件、调试复杂状态流）。

「RTK」：基于 Redux 核心逻辑的「高效工具」，让开发更简洁（如 createSlice 自动生成 Action 与 Reducer），适合快速迭代的项目。

RTK 关键工具示例「createSlice」：合并 Action 类型、Reducer、Action Creator，自动生成 Action（如 increment）。

import { createSlice } from'@reduxjs/toolkit';const counterSlice = createSlice({name: 'counter',initialState: 0,reducers: {    increment: (state, action) => state + action.payload,    decrement: (state, action) => state - action.payload,  },});// 自动生成 Action Creator：counterSlice.actions.increment

「configureStore」：简化 Store 创建，内置 redux-thunk、redux-devtools 等中间件。

import { configureStore } from '@reduxjs/toolkit';const store = configureStore({ reducer: rootReducer, });四、Redux 工作流程与核心价值1. 完整流程（手写与 RTK 通用）组件调用 Action Creator（或 RTK 的 slice.actions）触发 Action；

dispatch 传递 Action 至 Reducer；

Reducer 计算新状态，更新 Store；

监听器（如 React 组件的重新渲染逻辑）触发组件更新，读取新状态（store.getState()）。

2. 核心价值Redux 通过「分离 Action、Reducer、Store」，让状态变更「可追溯、可测试」，尤其适配大型项目的复杂状态管理。

「手写核心」：是理解 Redux 设计思想的 “最佳路径”，掌握后能精准定位状态问题；

「RTK」：是高效开发的 “助推器”，让 Redux 从 “繁琐配置” 转向 “简洁实践”。

五、总结Redux 的核心价值在于「规范状态管理流程」，手写实现揭示其 “简洁而严谨” 的逻辑（纯函数、单向数据流）；RTK 则是站在 Redux 肩膀上的 “现代工具”，让开发更高效。

对于我们开发者而言：

新手可先通过手写核心理解原理，再迁移到 RTK 简化开发；

进阶者需兼顾 “底层逻辑” 与 “工具应用”，让 Redux 真正服务于项目稳定性与可维护性。

二者相辅相成，共同构建前端状态管理的 “清晰脉络”。