es6 class 可构建自定义状态管理器，通过封装状态、dispatch、订阅机制及中间件链式调用实现类似 redux 功能；需保护私有状态、绑定 this、保证不可变性，并支持日志、异步等中间件扩展。
ES6 Class 本身不直接提供状态管理中间件能力，但可以作为构建自定义状态管理器（如轻量级 Redux 或 Vuex 类似物）的核心结构。关键在于用 Class 封装状态、变更逻辑与订阅机制，并通过“中间件”模式在状态变更前后插入可插拔的副作用处理函数。
定义可扩展的 Store Class
Store 类需维护内部状态、提供 dispatch 方法触发变更，并支持注册中间件。中间件本质是接收 store 实例和 next 函数的高阶函数，最终返回包装后的 dispatch。
- state 使用私有字段（#state）或 WeakMap 保护，避免外部直接修改
- dispatch 接收 action 对象，调用 reducer 更新状态，并通知监听者
- middleware 数组按顺序链式调用，每个中间件可决定是否调用 next() 继续流程
实现中间件注册与链式 dispatch
中间件函数签名通常为 (store) => (next) => (action) => {...}。Class 初始化时收集中间件，再用 compose 工具函数合成一个增强版 dispatch。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 在 constructor 中初始化 middleware 数组，提供 use(middleware) 方法添加中间件
- 重写 dispatch：先用中间件工厂生成增强函数，再用 reduce 反向组合（类似 Redux 的 applyMiddleware）
- 示例中间件：日志中间件打印 action 和新旧 state；异步中间件识别含 payload: Promise 的 action 并自动 resolve 后 dispatch
支持状态订阅与响应式更新
中间件常用于触发副作用（如 API 请求、日志、持久化），而 UI 更新依赖状态订阅。Store 应暴露 subscribe(listener) 方法。
- 内部用 Set 存储 listener，每次 setState 后遍历调用
- 返回 unsubscribe 函数，方便组件卸载时清理
- 若搭配 React，可在自定义 Hook 中调用 subscribe 并触发 rerender；Vue 中可配合 reactive 包装 state
避免常见陷阱
Class 写法易误用 this 指向或忽略不可变性，导致中间件行为异常。
- dispatch 必须绑定到实例（如在 constructor 中写 this.dispatch = this.dispatch.bind(this)），或用箭头方法
- reducer 必须返回新对象，禁止直接修改 #state —— 可用 structuredClone 或 immer 简化深拷贝
- 中间件内不要阻塞同步 dispatch 流程；异步逻辑应封装在 action creator 或单独的 effect handler 中
