store基类通过class继承固化状态生命周期、更新契约与模块边界,封装初始化、响应式更新、副作用隔离等通用能力,子类专注业务逻辑。

直接用 class 继承语法设计 store 基类,核心不是“写个父类”,而是把状态生命周期、更新契约和模块边界一起固化下来。它让每个业务 store 自带初始化逻辑、响应式更新能力、副作用隔离机制,而不是靠外部约定或手动 patch。
定义可复用的 Store 基类骨架
基类应封装通用行为:状态初始化、派发更新、订阅变更、清理副作用。不暴露原始 state 对象,只提供受控的 get/set 接口。
- 构造函数接收初始状态,并用 Object.freeze 或 Proxy 封装,防止意外篡改
- 内部维护一个私有 _state,所有读取都走 getState() 方法,强制统一入口
- 提供 dispatch(action) 方法,action 是 { type, payload } 形式,符合单向数据流直觉
- 内置 listeners 数组,支持 onStateChange(cb) 订阅,每次 dispatch 后批量通知
用 extends 实现领域专属 store
每个业务模块(如 user、cart、notification)继承基类,只关注自己那块状态的语义和规则,不操心怎么通知视图或怎么防抖更新。
- 子类在 constructor 中调用 super(initialState),并可叠加自己的初始化逻辑(如从 localStorage 恢复)
- 子类定义自己的 action 类型常量和 reducer 方法,例如 handleLoginSuccess(state, payload)
- dispatch 内部自动调用子类对应的 reducer,返回新 state;基类负责 shallowEqual 判断是否真要触发通知
- 子类可覆盖 onStateChange 的默认行为,比如 cart store 在数量变化时自动触发防抖同步到后端
集成副作用与异步流程控制
纯同步更新不够用,基类需预留副作用钩子,但不强制实现具体逻辑,由子类按需注入。
- 基类提供 asyncDispatch(action) 方法,内部调用子类的 effectMap[action.type] 函数
- effectMap 是子类定义的对象,值为返回 Promise 的函数,例如 { FETCH_USER: () => api.getUser(id) }
- effect 执行成功后,自动 dispatch 一个 SUCCESS action;失败则 dispatch ERROR,并可选触发全局错误处理
- 所有 effect 自动绑定当前 store 实例上下文,无需手动 bind 或箭头函数绕弯
配合组件层做轻量绑定
store 基类本身不耦合 React/Vue,但提供标准方法供上层框架桥接。例如:
- getSnapshot() 返回当前 state 快照,用于 React.useSyncExternalStore
- subscribe(listener) 返回取消订阅函数,适配任何响应式系统
- 子类可导出 useStore hook,内部调用基类方法,对外隐藏 dispatch 细节,只暴露语义化方法如 login(), addToCart()
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











