atomWithObservable
引用: https://github.com/pmndrs/jotai/pull/341
使用
import { useAtom } from "jotai";import { atomWithObservable } from "jotai/utils";import { interval } from "rxjs";import { map } from "rxjs/operators";const counterSubject = interval(1000).pipe(map((i) => `#${i}`));const counterAtom = atomWithObservable(() => counterSubject);const Counter = () => {const [counter] = useAtom(counterAtom);return <div>count: {counter}</div>;};
atomWithObservable
函数从 rxjs(或类似的)subject
或 observable
创建一个原子。
它的值将是从流中发出的最后一个值。
要使用此原子,您需要使用 <Suspense>
包装您的组件。 查看 guides/async。
初始值
atomWithObservable
采用第二个可选参数 {initialValue}
允许指定原子的初始值。 如果提供了 initialValue
,那么 atomWithObservable
将不会暂停,并且会在从 observable 接收到第一个值之前显示初始值。 initialValue
可以是一个值,也可以是一个返回值的函数
const counterAtom = atomWithObservable(() => counterSubject, {initialValue: 10,});const counterAtom2 = atomWithObservable(() => counterSubject, {initialValue: () => Math.random(),});