설치

이 기능을 사용하려면 immer와 jotai-immer를 설치해야 합니다.

npm install immer jotai-immer

atomWithImmer

atomWithImmer는 일반적인 atom과 비슷하지만, 다른 writeFunction을 사용하여 새로운 아톰을 생성합니다. 이 번들에서는 읽기 전용 아톰이 없습니다. 왜냐하면 이 함수들의 핵심은 immer의 produce(변경 가능성) 함수이기 때문입니다. writeFunction의 시그니처는 (get, set, update: (draft: Draft<Value>) => void) => void입니다.

import { useAtom } from 'jotai'
import { atomWithImmer } from 'jotai-immer'

const countAtom = atomWithImmer({ value: 0 })

const Counter = () => {
  const [count] = useAtom(countAtom)
  return <div>count: {count.value}</div>
}

const Controls = () => {
  const [, setCount] = useAtom(countAtom)
  // setCount === update : (draft: Draft<Value>) => void
  const inc = () =>
    setCount((draft) => {
      ++draft.value
    })
  return <button onClick={inc}>+1</button>
}

예제

atomWithImmer를 사용한 예제를 확인해 보세요:

withImmer

withImmer는 원자(atom)를 받아 파생된 원자를 반환합니다. atomWithImmer와 비슷하지만, 다른 writeFunction을 사용합니다.

import { useAtom, atom } from 'jotai'
import { withImmer } from 'jotai-immer'

const primitiveAtom = atom({ value: 0 })
const countAtom = withImmer(primitiveAtom)

const Counter = () => {
  const [count] = useAtom(countAtom)
  return <div>count: {count.value}</div>
}

const Controls = () => {
  const [, setCount] = useAtom(countAtom)
  // setCount === update : (draft: Draft<Value>) => void
  const inc = () =>
    setCount((draft) => {
      ++draft.value
    })
  return <button onClick={inc}>+1</button>
}

Examples_YYoCgk8bhSWn2nXVMNNbVU

withImmer를 사용한 예제를 확인해 보세요:

useImmerAtom

이 훅은 atom을 받아서 이전 헬퍼들처럼 atom의 writeFunction을 새로운 immer 스타일의 writeFunction으로 대체합니다.

import { atom } from 'jotai'
import { useImmerAtom } from 'jotai-immer'

const primitiveAtom = atom({ value: 0 })

const Counter = () => {
  const [count] = useImmerAtom(primitiveAtom)
  return <div>count: {count.value}</div>
}

const Controls = () => {
  const [, setCount] = useImmerAtom(primitiveAtom)
  // setCount === update : (draft: Draft<Value>) => void
  const inc = () =>
    setCount((draft) => {
      ++draft.value
    })
  return <button onClick={inc}>+1</button>
}

useImmerAtom과 함께 withImmer와 atomWithImmer를 사용하지 않는 것이 좋습니다. 이들은 이미 immer 스타일의 writeFunction을 제공하므로 새로운 것을 만들 필요가 없기 때문입니다.

useImmerAtom의 setter 부분만 필요하다면 useSetImmerAtom을 사용할 수 있습니다.

Examples_Coy7UEL4xcYJkUmPZezusJ

useImmerAtom을 사용한 예제를 확인해 보세요:

데모