Back to Details

reatom-async

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Reatom Async

Reatom Async

Use this skill when the task is mainly about Reatom async behavior. Treat REFERENCE.md as the bundled async source of truth.

当任务主要涉及Reatom异步行为时使用此技能。将REFERENCE.md视为权威的异步参考文档。

How to Use

使用方法

Read only the REFERENCE.md sections that match the task.
Prefer Reatom async patterns over debounce libraries, mount-time fetches, refs, local component promise state, or manual AbortController bookkeeping.
For general Reatom modeling, use the
```
reatom
```
skill. For
```
@reatom/jsx
```
DOM JSX specifics, use
```
reatom-jsx
```
. For reviews, combine this skill with
```
reatom-review
```
.
If docs, source, and tests disagree, prefer source and tests, then fix the doc/example that is stale.

仅阅读REFERENCE.md中与任务匹配的章节。
优先使用Reatom异步模式，而非防抖库、挂载时请求、refs、本地组件Promise状态或手动管理AbortController。
通用Reatom建模请使用
```
reatom
```
技能。针对
```
@reatom/jsx
```
DOM JSX的特定场景，请使用
```
reatom-jsx
```
。评审时，请将此技能与
```
reatom-review
```
结合使用。
若文档、源码和测试内容不一致，优先以源码和测试为准，然后修复过时的文档/示例。

Section Map

章节映射

Queries and mutations:

Choosing the Primitive

,

withAsyncData

,

withAsync

Context after
```
await
```
:
```
wrap Rules
```
Cancellation:
```
withAbort
```
,
```
abortVar and Fetch Signals
```
Debounce, throttle, waits, races:
```
Sampling and Procedural Async
```
Redux-saga migration:
```
Redux-Saga Mapping
```
Loading UI and retry:
```
Status, Retry, Reset
```
Suspense:
```
Suspense Boundaries
```
Code review:
```
Common Mistakes
```
,
```
Tested Edge Cases
```

查询与变更：

Choosing the Primitive

、

withAsyncData

、

withAsync

```
await
```
后的上下文：
```
wrap Rules
```
取消操作：
```
withAbort
```
、
```
abortVar and Fetch Signals
```
防抖、节流、等待、竞态：
```
Sampling and Procedural Async
```
Redux-saga迁移：
```
Redux-Saga Mapping
```
加载UI与重试：
```
Status, Retry, Reset
```
Suspense：
```
Suspense Boundaries
```
代码评审：
```
Common Mistakes
```
、
```
Tested Edge Cases
```

Implementation Defaults

实现默认规范

Query/read data:

computed(async () => ...).extend(withAsyncData({ initState }))

.

Command/mutation:

action(async () => ...).extend(withAsync(...))

; add

withAbort(...)

when stale calls must stop.

Every async boundary that leaves a Reatom frame uses
```
await wrap(promise)
```
.
External callbacks that call Reatom state/actions are passed as
```
wrap(fn)
```
or wired with
```
onEvent
```
.

Abortable fetches use

signal: abortVar.require().signal

or a scoped

abortVar.subscribe()

.

Debounce and throttle follow the sampling docs:
```
await wrap(sleep(ms))
```
inside the flow plus
```
withAbort()
```
strategies, not split debounce helpers.
Route/page data belongs in route loaders or async computeds, not component effects.
Form submit is an async mutation: put it in
```
reatomForm({ onSubmit })
```
and use field
```
validate
```
for async/dependent checks (debounce with
```
await wrap(sleep(ms))
```
), instead of hand-rolled submit actions or debounced validators.
Suspense is for global one-shot initialization, not dynamic page data.

查询/读取数据：

computed(async () => ...).extend(withAsyncData({ initState }))

。

命令/变更：
```
action(async () => ...).extend(withAsync(...))
```
；当需要终止过时调用时，添加
```
withAbort(...)
```
。
所有离开Reatom执行帧的异步边界均使用
```
await wrap(promise)
```
。
调用Reatom状态/动作的外部回调需以
```
wrap(fn)
```
形式传入，或通过
```
onEvent
```
连接。

可取消的请求使用

signal: abortVar.require().signal

或作用域化的

abortVar.subscribe()

。

防抖和节流遵循采样文档：在流内部使用
```
await wrap(sleep(ms))
```
，结合
```
withAbort()
```
策略，而非单独的防抖工具。
路由/页面数据应放在路由加载器或异步computed中，而非组件effect。
表单提交是异步变更：将其放入
```
reatomForm({ onSubmit })
```
，使用字段
```
validate
```
进行异步/依赖校验（通过
```
await wrap(sleep(ms))
```
实现防抖），而非手动编写提交动作或防抖校验器。
Suspense适用于全局一次性初始化，而非动态页面数据。

Review Defaults

评审默认规范

Flag unwrapped awaits before atom/action calls.
Flag
```
withAsync
```
used for query data where
```
withAsyncData
```
should own
```
.data
```
.
Flag
```
withAsync
```
without
```
withAbort
```
when stale command calls can update state.
Flag
```
.status()
```
without
```
{ status: true }
```
.
Flag action
```
.retry()
```
without
```
{ cacheParams: true }
```
.
Flag
```
withCache()
```
before
```
withAsync()
```
/
```
withAsyncData()
```
.
Flag aborts displayed as business errors.
Flag raw
```
Promise.race
```
when loser cleanup is needed.

标记在atom/动作调用前未被wrap的await。
标记在查询数据场景中使用
```
withAsync
```
而非
```
withAsyncData
```
管理
```
.data
```
的情况。
标记当过时命令调用可能更新状态时，未搭配
```
withAbort
```
的
```
withAsync
```
。
标记未传入
```
{ status: true }
```
的
```
.status()
```
调用。
标记未传入
```
{ cacheParams: true }
```
的action
```
.retry()
```
调用。
标记在
```
withAsync()
```
/
```
withAsyncData()
```
之前使用
```
withCache()
```
的情况。
标记将取消操作显示为业务错误的情况。
标记当需要清理失败方时使用原生
```
Promise.race
```
的情况。