Store 实现机制详解
Store 是 Redux 的唯一真相源:getState、dispatch、subscribe 三个核心 API 都在 createStore(及 enhancer 链)里闭合实现。
源码:packages/redux/src/createStore.ts。
1. createStore 产出什么
| API | 作用 |
|---|---|
getState() | 返回当前 state 引用(只读约定) |
dispatch(action) | 走 reducer → 新 state → 通知 listener |
subscribe(listener) | 注册监听;返回 unsubscribe |
replaceReducer | 热替换 reducer(工具/测试) |
可选:@@INIT 等内置 action 完成首次 state 计算。
2. 内部状态(概念)
currentState:当前树。currentReducer:根 reducer(常为combineReducers结果)。listeners:订阅者数组或类似结构。isDispatching:防止dispatch重入(listener 里再dispatch会报错)。
无 React 依赖;Store 可在 Node、测试、中间件里独立使用。
3. dispatch 流程
mermaid
flowchart LR
A[dispatch action] --> B{plain object?}
B -->|否| E[抛错 / 交给 middleware]
B -->|是| C[currentReducer]
C --> D[新 state]
D --> F[Object.is 比较]
F -->|变| G[依次 listener]
F -->|不变| H[通常仍通知,见版本与中间件]要点:
- 同步:一次
dispatch内 reducer 跑完才通知(异步靠 middleware)。 - 纯 reducer:副作用不在 reducer 内(设计规则见 08)。
- 中间件:
applyMiddleware在外层改写dispatch(见 04)。
4. subscribe 语义
- Listener 无参数(Redux 设计:避免暴露
getState时机争议);需要新 state 请自行getState()。 - 通知在 dispatch 完成后、同步 调用。
- 与 React 连接由 react-redux 完成,不在 core 包内。
5. Store Enhancer
createStore(reducer, preloadedState, enhancer) 中 enhancer 形如 (createStore) => (reducer, preloadedState) => store,用于:
applyMiddleware(最常见)- DevTools、持久化等扩展
组合顺序:多个 enhancer 从右到左折叠(与 middleware 洋葱不同,需单独记)。
6. 与 Zustand 对照
| Redux Store | Zustand | |
|---|---|---|
| 更新入口 | 仅 dispatch(action) | set / setState |
| 形状 | reducer 决定 | 用户对象 |
| 订阅 | subscribe 无参 | subscribe(listener) 带 state |
7. 阅读路径
createStore.ts—dispatch/subscribecombineReducers.ts— 根 reducer 形态applyMiddleware.ts— 如何包装dispatch
总结
Store = 闭包里的 state + reducer + 监听器;所有架构图里的单向箭头最终都落在 dispatch 这一条同步管道上。