atomWithReset

Ref: https://github.com/pmndrs/jotai/issues/41

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

initialValue로 초기화할 수 있는 아톰을 생성합니다. 이 아톰은 useResetAtom 훅을 사용해 초기값으로 리셋할 수 있습니다. 기본 아톰과 동일하게 동작하지만, 특수한 값인 RESET으로 설정할 수도 있습니다. 예제는 Resettable atoms에서 확인할 수 있습니다.

예제

다음은 데이터를 새로고침할 수 있는 소스를 구현하는 방법입니다:

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}>
        게시물 새로고침
      </button>
    </div>
  )
}

RESET

참조: https://github.com/pmndrs/jotai/issues/217

const RESET: unique symbol

RESET은 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)}>달러 초기화</button>
      <button onClick={resetCents}>센트 초기화</button>
    </>
  )
}

useResetAtom

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

재설정 가능한 아톰을 초기값으로 재설정합니다.

Example_DNR34PM2peu2wpxzXxjSR4

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)

Stackblitz

기본값 재설정하기

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)}>count1 증가</button>
      <button onClick={() => setCount2((c) => c + 1)}>count2 증가</button>
      <button onClick={() => resetCount2()}>useResetAtom으로 재설정</button>
      <button onClick={() => setCount2(RESET)}>RESET 상수로 재설정</button>
    </>
  )
}

이 기능은 atomWithDefault 아톰의 값이 set 함수를 통해 덮어쓰여진 경우에 유용합니다. 이 경우 제공된 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에 인자를 전달하지 않으면 리프레시가 발생합니다. 하나 이상의 인자를 전달하면 "write" 함수가 호출됩니다.