Back to Details

reatom

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Reatom

Reatom

Use this skill when implementing or explaining Reatom v1001. Treat REFERENCE.md as the canonical API reference bundled with this skill.
当你需要实现或讲解Reatom v1001时使用本技能。将REFERENCE.md视为与本技能绑定的权威API参考文档。

How to use

使用方法

  1. Read the sections of REFERENCE.md that match the task — do not load generic React/Solid/Vue state patterns when they conflict with the reference.
  2. Follow existing code in the touched package or example for naming, file layout, and extension style.
  3. For deep async flows (
    wrap
    , 
    withAsyncData
    , 
    withAbort
    , sampling, Suspense), switch to the 
    reatom-async
    skill.
  4. For 
    @reatom/jsx
    (native DOM JSX, mount, props, css prop), switch to the 
    reatom-jsx
    skill.
  5. For pull requests, reviews, or skeptic validation of agent output, switch to the 
    reatom-review
    skill.
  1. 阅读REFERENCE.md中与任务匹配的章节——当通用React/Solid/Vue状态模式与参考文档冲突时，请勿使用这些通用模式。
  2. 遵循所修改包或示例中的现有代码，保持命名、文件结构和扩展风格一致。
  3. 对于复杂异步流程（
    wrap
    、
    withAsyncData
    、
    withAbort
    、采样、Suspense），请切换至
    reatom-async
    技能。
  4. 对于
    @reatom/jsx
    （原生DOM JSX、挂载、props、css属性），请切换至
    reatom-jsx
    技能。
  5. 对于拉取请求、代码评审或验证Agent输出的合理性，请切换至
    reatom-review
    技能。

Section map

章节映射

Use this map to open only the relevant parts of REFERENCE.md:
TopicSection
Atoms, computed, action, effect, extendCore primitives and mental model
Queries and mutationswithAsync
Async context after await / callbackswrap rules
Collections, boolean, route helpersPrimitives quick usage
Nested reactive fieldsAtomization
Subscribe error callbackSubscribe error listener
Logging, log.label, log.stateFull SPA example (logging setup)
Hooks, connect/disconnect, lazy workLifecycle and extension hooks
DOM / external eventsEvent sampling and orchestration
Hot derivationsMemoization: memo and memoKey
Fields and validationForms: base usage and reactive validation
SPA routes and loadersRouting
Search params, storageURL sync and persistence helpers
React Suspense integrationSuspense notes
Batched updatesTransactions notes
Tests and SSRSSR and testing
Upgrades from older Reatomv3 migration highlights
Deeper recipes and adapter docs live on v1001.reatom.dev under 
/docs/handbook/*
and 
/docs/reference/*
.
使用此映射仅打开REFERENCE.md中的相关部分：
主题章节
Atoms、computed、action、effect、extend核心原语与心智模型
查询与变更withAsync
await/回调后的异步上下文wrap规则
集合、布尔值、路由助手原语快速使用
嵌套响应式字段原子化（Atomization）
订阅错误回调订阅错误监听器
Logging、log.label、log.state完整SPA示例（日志设置）
Hooks、connect/disconnect、延迟任务生命周期与扩展Hooks
DOM/外部事件事件采样与编排
热派生记忆化：memo和memoKey
字段与验证表单：基础用法与响应式验证
SPA路由与加载器路由
搜索参数、存储URL同步与持久化助手
React Suspense集成Suspense说明
批量更新事务说明
测试与SSRSSR与测试
从旧版Reatom升级v3迁移要点
更深入的实践指南和适配器文档可在v1001.reatom.dev的
/docs/handbook/*
和
/docs/reference/*
路径下查看。

Implementation defaults

实现默认规则

  • Named atoms, actions, computed values, and effects; factory names use the 
    reatom*
    prefix.
  • Reads: zero-arg call. Writes: 
    .set(...)
    .
  • Idempotent reads: 
    computed(async () => ...).extend(withAsyncData(...))
    .
  • Commands/mutations: 
    action(async () => ...).extend(withAsync(...))
    .
  • Async boundaries that leave the Reatom frame: 
    await wrap(promise)
    ; external callbacks: pass 
    wrap(fn)
    .
  • Derived state in 
    computed
    ; side effects in 
    effect
    with explicit lifetime (route loader, init action, or mount scope — not unscoped module effects for feature work).
  • Forms (fields, validation, submit) through 
    reatomForm
    / 
    reatomField
    instead of hand-rolled per-field atoms and submit actions.
  • Route data through 
    reatomRoute
    loaders; navigation with 
    .go(...)
    , links with 
    .path(...)
    .
When the reference and local examples disagree, prefer the reference and fix the example if it is wrong.
  • 命名Atoms、actions、computed值和effects；工厂函数名称使用
    reatom*
    前缀。
  • 读取：无参数调用。写入：
    .set(...)
    。
  • 幂等读取：
    computed(async () => ...).extend(withAsyncData(...))
    。
  • 命令/变更：
    action(async () => ...).extend(withAsync(...))
    。
  • 超出Reatom框架的异步边界：
    await wrap(promise)
    ；外部回调：传递
    wrap(fn)
    。
  • 派生状态放在
    computed
    中；副作用放在
    effect
    中并明确生命周期（路由加载器、初始化动作或挂载作用域——功能开发中不要使用无作用域的模块effects）。
  • 表单（字段、验证、提交）通过
    reatomForm
    /
    reatomField
    实现，而非手动为每个字段创建atoms和提交actions。
  • 路由数据通过
    reatomRoute
    加载器获取；使用
    .go(...)
    导航，使用
    .path(...)
    生成链接。
当参考文档与本地示例不一致时，优先遵循参考文档，若示例有误则修复示例。