用途:本技能用于在 PostHog 前端编写或评审 kea logic 文件(*Logic.ts / *Logic.tsx)。适用于新建 logic、向现有 logic 添加 actions、reducers、selectors、listeners、loaders、forms 等 builder、为状态选择合适容器、把 React 组件接入 logic,以及评审引入或修改 kea logic 的 PR。
主要原则:业务逻辑放在 logic 而非组件中,hooks 只处理视图关注点;一个概念只保留一个真实来源,在 action 驱动的 reducer、派生 selector、异步 loader 中只选一个;优先使用 listeners 而非 kea-subscriptions,因为后者在每次 dispatch 时重跑且有明显性能开销;生成的 *LogicType.ts 是类型契约,用 import type 导入并作为 kea 的类型参数传入,不得手动编辑生成文件;需要清理的资源通过 cache.disposables 处理(另见 using-kea-disposables 技能)。
状态容器选择:来自 HTTP 调用的数据用 loader;可由其他状态计算得到的用 selector;由 action 改变且 UI 需随之重渲染的用 reducer;计时器、监听器或其他可释放资源用 cache.disposables;cache.foo 是给 UI 不读取的临时标志使用的逃生舱,应最后考虑。
block 常规顺序为 props → key → path → connect → actions → forms → loaders → reducers → selectors → sharedListeners → listeners → subscriptions → windowValues → urlToAction / actionToUrl → afterMount / propsChanged / beforeUnmount,实际只需用到的那几块。
类型生成使用 kea-typegen(3.6.2-leakfix.x 私有分支),命令包括 pnpm --filter=@posthog/frontend typegen:watch、typegen:write、typegen:check。迭代单个 logic 时可只针对该文件重新生成与类型检查:pnpm --filter=@posthog/frontend exec kea-typegen write -f frontend/src/scenes/foo/fooLogic.ts -r ./frontend/src,以及 pnpm --filter=@posthog/frontend exec tsc --noEmit frontend/src/scenes/foo/fooLogic.ts,最后再跑完整的 typegen:check 与 typescript:check。对 keyed logic 需显式标注导出类型。
参考文档覆盖 state-decision、loading-data、polling、forms、routing、persisting-state、reacting-to-changes、keyed-logics、connecting-logics、testing、anti-patterns。builder 签名以 keajs.org 上游文档为准,仓库中 *Logic.ts 内含大量实例。