Redux 作为 JavaScript 应用的状态管理库，其技术架构与核心原理围绕可预测的状态管理设计，通过严格的单向数据流和函数式编程理念实现复杂应用的状态控制。以下从设计理念、核心架构、工作流程、源码实现等角度进行系统性剖析：

一、设计理念与原则

单一数据源（Single Source of Truth）
- 整个应用的状态存储在一个全局 Store 对象中，形成唯一的状态树（State Tree）。
- 优势：简化状态共享和调试，避免分布式状态导致的逻辑混乱。
状态只读（State is Read-Only）
- 状态不可直接修改，唯一修改方式是 dispatch(action)。Action 是描述状态变化的普通对象，需包含 type 属性（如 { type: 'ADD_TODO', text: 'Learn Redux' }）。
- 目的：确保状态变更可追踪，避免隐蔽的副作用。
纯函数更新（Changes via Pure Functions）
- Reducer 是纯函数，接收旧状态和 Action，返回新状态（而非修改旧状态）。
- 关键约束：
  - 无副作用：不修改输入参数、不调用非纯函数（如 Date.now()）、不执行异步操作。
  - 幂等性：相同输入必得相同输出。

二、核心架构解析

1. Store：状态容器

职责：
- getState()：获取当前状态。
- dispatch(action)：触发状态更新。
- subscribe(listener)：订阅状态变更事件。
实现关键：闭包管理状态（currentState）和监听器数组（currentListeners）。

2. Action：状态变更的描述

本质：包含 type 的 JS 对象，可携带额外数据（如 payload）。
Action Creator：封装创建 Action 的逻辑，提高代码复用性。

3. Reducer：状态变更的执行者

函数签名：(state, action) => newState。

不可变更新：必须返回新对象（而非修改原状态）。

// 错误：直接修改原状态
state.todos.push(action.payload);  
// 正确：返回新对象
return { ...state, todos: [...state.todos, action.payload] };

组合性：通过 combineReducers 拆分多个子 Reducer，分别管理状态树的不同部分。

4. Middleware：扩展 Dispatch 能力

拦截 Action：在 Action 到达 Reducer 前执行额外逻辑（如异步请求、日志记录）。

中间件链：通过函数嵌套实现（如 applyMiddleware(thunk, logger)）。

const thunkMiddleware = ({ dispatch }) => next => action => {if (typeof action === 'function') { return action(dispatch); // 处理函数型 Action（如 redux-thunk）}return next(action); // 传递普通 Action
};

三、工作流程详解

Redux 的数据流是严格的单向循环：

触发 Action：用户操作（如点击）调用 dispatch(action)。
执行 Reducer：Store 调用 Reducer，传入当前状态和 Action，生成新状态。
更新 Store：新状态替换旧状态。
通知订阅者：执行所有通过 subscribe() 注册的监听器（如触发 React 组件重渲染）。
视图更新：组件通过 getState() 获取新状态并更新 UI。

四、源码核心实现

1. `createStore`：核心工厂函数

function createStore(reducer, preloadState) {let currentState = preloadState; // 闭包保存状态let listeners = [];const getState = () => currentState;const subscribe = (listener) => {listeners.push(listener);return () => listeners.splice(listeners.indexOf(listener), 1); // 取消订阅};const dispatch = (action) => {// 校验 Action 为纯对象if (Object.getPrototypeOf(action) !== Object.prototype) throw new Error('Action 必须是纯对象');currentState = reducer(currentState, action); // 调用 Reducerlisteners.forEach(listener => listener()); // 通知订阅者};dispatch({ type: '@@redux/INIT' }); // 初始化状态return { dispatch, subscribe, getState };
}

2. `combineReducers`：合并多个 Reducer

export default function combineReducers(reducers) {const reducerKeys = Object.keys(reducers);return function combination(state = {}, action) {const nextState = {};reducerKeys.forEach(key => {const reducer = reducers[key];const prevStateForKey = state[key];nextState[key] = reducer(prevStateForKey, action); // 每个子 Reducer 独立更新});return nextState;};
}

3. `bindActionCreators`：自动绑定 Dispatch

function bindActionCreator(actionCreator, dispatch) {return (...args) => dispatch(actionCreator(...args)); // 自动派发 Action
}

五、设计哲学与工程价值

可预测性：
- 状态变更由纯函数（Reducer）驱动，避免隐蔽的副作用。
- Action 日志 + 时间旅行调试（如 Redux DevTools）。
解耦与复用：
- 组件无需关心状态来源，只需订阅 Store 或通过 connect（React-Redux）注入状态。
- Reducer 可复用、可组合，适合模块化开发。
异步扩展：
- 中间件机制支持 redux-thunk（函数型 Action）、redux-saga（生成器流程控制）等方案，分离副作用与核心逻辑。