Jotai

React 原始而灵活的状态管理

Resettable

atomWithReset

参考： https://github.com/pmndrs/jotai/issues/41

function atomWithReset<Value>(
  initialValue: Value,
): WritableAtom<Value, SetStateAction<Value> | typeof RESET>

创建一个可以通过 useResetAtom 钩子重置为其 initialValue 的原子。它的工作方式与原始原子完全相同，但你也可以将其设置为特殊值 RESET。请参见可重置原子中的示例。

示例

import { atomWithReset } from 'jotai/utils'

const dollarsAtom = atomWithReset(0)
const todoListAtom = atomWithReset([
  { description: '添加一个待办事项', checked: false },
])

RESET

参考：https://github.com/pmndrs/jotai/issues/217

const RESET: unique symbol

这是一个特殊的值，被 atomWithReset、atomWithDefault 创建的可重置原子或者如果它接受 RESET 符号的可写原子 atom 所接受。

示例

import { atom, useSetAtom } from 'jotai'
import { atomWithReset, useResetAtom, RESET } from 'jotai/utils'

const dollarsAtom = atomWithReset(0)
const centsAtom = atom(
  (get) => get(dollarsAtom) * 100,
  (get, set, newValue: number | typeof RESET) =>
    set(dollarsAtom, newValue === RESET ? newValue : newValue / 100)
)

const ResetExample = () => {
  const setDollars = useSetAtom(dollarsAtom)
  const resetCents = useResetAtom(centsAtom)

  return (
    <>
      <button onClick={() => setDollars(RESET)}>Reset dollars</button>
      <button onClick={resetCents}>Reset cents</button>
    </>
  )
}

useResetAtom

function useResetAtom<Value>(
  anAtom: WritableAtom<Value, typeof RESET>,
): () => void | Promise<void>

将可重置原子重置为其初始值。

示例

import { useResetAtom } from 'jotai/utils'
import { todoListAtom } from './store'

const TodoResetButton = () => {
  const resetTodoList = useResetAtom(todoListAtom)
  return <button onClick={resetTodoList}>Reset</button>
}

atomWithDefault

参考： https://github.com/pmndrs/jotai/issues/352

使用方法

这是一个创建可重置原始原子的函数。其默认值可以用读取函数指定，而不是静态初始值。

import { atomWithDefault } from 'jotai/utils'

const count1Atom = atom(1)
const count2Atom = atomWithDefault((get) => get(count1Atom) * 2)

Codesandbox

重置默认值

你可以将 atomWithDefault 原子的值重置为其原始默认值。

import { useAtom } from 'jotai'
import { atomWithDefault, useResetAtom, RESET } from 'jotai/utils'

const count1Atom = atom(1)
const count2Atom = atomWithDefault((get) => get(count1Atom) * 2)

const Counter = () => {
  const [count1, setCount1] = useAtom(count1Atom)
  const [count2, setCount2] = useAtom(count2Atom)
  const resetCount2 = useResetAtom(count2Atom)

  return (
    <>
      <div>
        count1: {count1}, count2: {count2}
      </div>
      <button onClick={() => setCount1((c) => c + 1)}>increment count1</button>
      <button onClick={() => setCount2((c) => c + 1)}>increment count2</button>
      <button onClick={() => resetCount2()}>Reset with useResetAtom</button>
      <button onClick={() => setCount2(RESET)}>Reset with RESET const</button>
    </>
  )
}

当使用 set 函数覆盖 atomWithDefault 原子的值时，这可能会很有用，在这种情况下，提供的 getter 函数将不再被使用，依赖项原子的任何变化都不会触发更新。

重置值允许我们恢复其原始默认值，丢弃之前通过 set 函数做出的更改。

atomWithRefresh

function atomWithRefresh<Value>(
  read: Read<Value, [], void>,
): WritableAtom<Value, [], void>

创建一个我们可以刷新的原子，即强制重新评估读取函数。

当你需要刷新异步数据时，这会很有帮助。它也可以用来实现 "下拉刷新" 功能。

function atomWithRefresh<Value, Args extends unknown[], Result>(
  read: Read<Value, Args, Result>,
  write: Write<Value, Args, Result>,
): WritableAtom<Value, Args | [], Result | void>

向 set 传递零个参数将刷新。向 set 传递一个或多个参数将调用 "write" 函数。

示例

以下是你如何使用它来实现可刷新的数据源：

import { atomWithRefresh } from 'XXX'

const postsAtom = atomWithRefresh((get) =>
  fetch('https://jsonplaceholder.typicode.com/posts').then((r) => r.json()),
)

在一个组件中：

const PostsList = () => {
  const [posts, refreshPosts] = useAtom(postsAtom)

  return (
    <div>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>

      {/* 点击这个按钮将重新获取帖子 */}
      <button type="button" onClick={refreshPosts}>
        Refresh posts
      </button>
    </div>
  )
}

JotaiJotai

Resettable

Jotai