SuperAPI AI 工具集

state-effector

前端与建站

查看项目

更新于 10-15 17:21

技能介绍

用途:为 React/Next.js 项目提供 Effector 响应式状态管理的实现模式,适用于新项目搭建、创建 stores/events/effects、与 React 组件集成、组织模型与域,以及与 Tanstack Query 配合。

主要能力:Effector 采用事件驱动响应式状态管理,特点包括细粒度响应式(仅相关数据变化时组件重渲染)、TypeScript 优先且可自动推断类型、压缩后约 10KB、框架无关、纯函数易测试、无 reducers/action creators/switch 等样板代码。与 Zustand 相比,模型为事件驱动响应式图,学习曲线更陡,自带自动派生状态与一等异步 effects,更适合复杂响应式流程。

必要用法:安装命令为 npm install effector effector-react;Next.js SSR 场景为 npm install effector effector-react @effector/next。核心三原语为 createStore、createEvent、createEffect。命名约定:store 用 $ 前缀(如 $user)、event 用 camelCase 动词、effect 用 Fx 后缀(如 fetchUserFx)。React 侧使用 useUnit 绑定 stores 与 events,支持数组和解构对象两种形式。派生状态用 combine 与 .map()。异步用 createEffect,自带 pending、done、doneData、fail、failData、finally 等状态。事件连接用 sample(clock/source/filter/fn/target)和 forward(from/to)。Next.js 使用 @effector/next 的 EffectorNext 与 SSR 数据水合。测试使用 fork 与 allSettled,可 mock effect handlers。

适用场景:中大型 React/Next.js 应用的复杂响应式状态流、需要强类型与可测试性的状态逻辑、服务端渲染数据水合,以及用 Tanstack Query 管理服务端状态、Effector 管理客户端状态的组合方案。

限制:资料未提供具体版本号、价格、性能基准与完整 API 文档;Effector 学习曲线相对较陡,适合复杂流程而非简单共享状态。需遵守最佳实践:不在 effect 内调用事件(应使用 sample)、不直接修改 store 值、不在组件内创建 store、不忽略 TypeScript 错误。