JotaiJotai

状態
原始和灵活的 React 状态管理

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(或类似的)subjectobservable 创建一个原子。 它的值将是从流中发出的最后一个值。

要使用此原子,您需要使用 <Suspense> 包装您的组件。 查看 guides/async

初始值

atomWithObservable 采用第二个可选参数 {initialValue} 允许指定原子的初始值。 如果提供了 initialValue,那么 atomWithObservable 将不会暂停,并且会在从 observable 接收到第一个值之前显示初始值。 initialValue 可以是一个值,也可以是一个返回值的函数

const counterAtom = atomWithObservable(() => counterSubject, {
initialValue: 10,
});
const counterAtom2 = atomWithObservable(() => counterSubject, {
initialValue: () => Math.random(),
});

Codesandbox