SuperAPI AI 工具集

wode-emittery-pattern

前端与建站

查看项目

更新于 10-16 03:58

技能介绍

Wode Emittery Pattern 是一套用于 React 组件间通信与副作用处理的事件驱动架构规范,核心目标是将状态管理(Zustand)与副作用(事件处理器)解耦。该模式基于 Emittery 事件库实现,要求在实现组件间通信或副作用处理时严格遵循以下规则。

一、核心规则(必须遵循)

事件类型(Event Types):必须使用命名为 XxxEventType 的 as const 对象,禁止使用 TypeScript 枚举。

事件命名(Event Naming):必须采用 Module:Action 格式,例如 FileSystem:Open、User:Login。

类型化 Emitter(Typed Emitter):必须定义类型 XxxEmitter = Emittery<XxxEventData> 以获得完整的类型安全。

Sidecar 模式:副作用(toast、确认对话框、网络请求)必须在 Sidecar 组件中处理,绝不放在 Store action 内。

Store 解耦:Store action 只能发出事件,不得关心由谁处理这些事件。

二、事件类型定义

使用 as const 定义事件类型对象(禁止 enum),例如 FileSystemEventType 包含 Open、Goto、Refresh、Download、Delete 等键,对应值为 FileSystem:Open 等 Module:Action 格式的字符串。随后定义各事件对应的数据负载类型 FileSystemEventData,并导出 FileSystemEmitter = Emittery<FileSystemEventData>。

三、Emitter 工厂与 Store 集成

提供 createEmitter 工厂函数,内部通过 new Emittery<EventData>({ debug: { name } }) 创建带调试名称的 Emitter。在 Store 中,actions 只发出事件,例如 open 动作调用 events.emit(FileSystemEventType.Open, ...),refresh 动作调用 events.emit(FileSystemEventType.Refresh, {})。

四、useEmitteryListen Hook

该 Hook 接收一个 Emittery 实例与一个处理器映射对象,使用 useRef 保存最新的 handle,并在 useEffect 中为每个事件键注册 e.on 监听,返回清理函数逐一取消订阅。依赖项包含 emitter 与排序后的处理键名集合。

五、Sidecar 组件

Sidecar 组件通过 useFileManagerStore 获取 events 与 actions,使用 useEmitteryListen 订阅事件。例如 Refresh 事件触发重新加载;Delete 事件弹出确认对话框,确认后逐个调用 fs.rm 删除文件并触发 actions.refresh()。该组件返回 null,不渲染任何 UI,通常挂载在 Provider 内部(如 FileManagerProvider 中包裹 FileManagerSidecar 与 children)。

六、高级模式

完整 Sidecar 实现示例(上传、重命名、移动、mkdir、错误处理)与最佳实践可阅读参考文档 references/events-pattern.md。