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(),
});

Codesandbox