✍️ 架构级工程实战
🎯 目标：在最简 Redux 基础上，扩展出一个可复用、可插拔、可调试、可部署的完整状态框架
🧠 关键词：combineReducers、replaceReducer、持久化、DevTools、模块热更新
🧱 回顾：你现在拥有一个最小可用 Redux
我们已有功能：
createStore：状态存储、订阅、dispatchapplyMiddleware：插件系统支持compose：洋葱模型组合函数
接下来，逐步进化。
✅ 1. 支持模块化 reducer：实现 combineReducers
使用方式：
const rootReducer = combineReducers({
user: userReducer,
posts: postReducer
})
const store = createStore(rootReducer)
实现代码：
export function combineReducers(reducers: Record<string, Function>) {
return function combination(state = {}, action) {
const nextState: Record<string, any> = {}
for (const key in reducers) {
nextState[key] = reducers[key](state[key], action)
}
return nextState
}
}
📌 意义：
- 支持领域分片（slice）结构
- 维护 reducer 独立性与可组合性
🔁 2. 动态热替换 reducer：实现 replaceReducer
使用方式：
store.replaceReducer(newReducer)
实现方式：
在 createStore 中添加：
let currentReducer = reducer
function replaceReducer(nextReducer) {
currentReducer = nextReducer
dispatch({ type: '@@redux/REPLACE' }) // 重新初始化 state
}
📌 实用场景：
- 支持微前端 / 插件系统的动态注册模块
- HMR（模块热更新）在 dev 环境的实现基础
🧩 3. DevTools 支持：让你可以时间旅行调试
我们手动桥接 Redux DevTools：
declare global {
interface Window {
__REDUX_DEVTOOLS_EXTENSION__?: any;
}
}
const devTools = window.__REDUX_DEVTOOLS_EXTENSION__?.()
if (devTools) {
devTools.init(store.getState())
store.subscribe(() => {
devTools.send(store.lastAction, store.getState())
})
}
补充在 dispatch 内部：
store.lastAction = action
📌 结果：
- 可在浏览器 DevTools 中查看 action 流、state 快照、回溯操作
💾 4. 状态持久化：实现 localStorage 自动同步
使用方式：
const persistedState = loadFromStorage()
const store = createStore(reducer, persistedState)
store.subscribe(() => {
saveToStorage(store.getState())
})
实现代码：
function loadFromStorage() {
try {
const raw = localStorage.getItem('redux_state')
return raw ? JSON.parse(raw) : undefined
} catch {
return undefined
}
}
function saveToStorage(state) {
try {
localStorage.setItem('redux_state', JSON.stringify(state))
} catch {}
}
📌 应用场景：
- 用户登录状态持久化
- 跨标签同步、断点恢复
🔁 5. 热更新支持（用于 Webpack + HMR）
在你的模块文件中：
if (import.meta.hot || module.hot) {
import.meta.hot?.accept?.(() => {
const newRootReducer = require('./reducers').default
store.replaceReducer(newRootReducer)
})
}
📌 优点：
- 开发中无需刷新页面，状态保留
- 实现业务模块热重载，提升效率
🧠 总结：从最简 Redux 到可部署级状态架构
你已经构建了一个具备以下特性的 Redux 系统：
| 功能模块 | 实现能力说明 |
|---|---|
| 状态管理核心 | createStore / dispatch / subscribe |
| 插件系统支持 | applyMiddleware / 自定义中间件 |
| 多模块结构管理 | combineReducers |
| 热插拔能力 | replaceReducer / 动态注入 |
| DevTools 支持 | 浏览器调试增强 |
| 状态持久化 | localStorage / sessionStorage 自动同步 |
| 热更新兼容 | Webpack/Vite 热替换 |
你已不只是“用 Redux 的人”，而是可以“实现 Redux 的人”。
🔚 结语：Redux 系列收官
Redux 从来不是为了简单使用而生，而是为了解决复杂状态协作、调试可控性、架构可演进性的问题。
你学会的：
- 不只是 Redux 的用法；
- 更是状态系统的设计哲学；
- 更是一个架构师该具备的能力：从零构建、抽象抽取、模块组织、工程演进。
