Jotai의 상태 관리는 기본적이고 유연하지만, 때로는 너무 자유로울 수 있습니다. XState는 상태 관리를 위해 더 나은 안전한 추상화를 제공하는 정교한 라이브러리입니다.

설치

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

npm install xstate jotai-xstate

atomWithMachine

atomWithMachine은 XState 머신을 사용해 새로운 아톰을 생성합니다. 이 함수는 새로운 머신을 생성하는 getMachine 함수를 인자로 받습니다. getMachine은 첫 사용 시 get 인자와 함께 호출되며, 이를 통해 다른 아톰의 값을 읽을 수 있습니다.

import { useAtom } from 'jotai'
import { atomWithMachine } from 'jotai-xstate'
import { assign, createMachine } from 'xstate'

const createEditableMachine = (value: string) =>
  createMachine<{ value: string }>({
    id: 'editable',
    initial: 'reading',
    context: {
      value,
    },
    states: {
      reading: {
        on: {
          dblclick: 'editing',
        },
      },
      editing: {
        on: {
          cancel: 'reading',
          commit: {
            target: 'reading',
            actions: assign({
              value: (_, { value }) => value,
            }),
          },
        },
      },
    },
  })

const defaultTextAtom = atom('edit me')
const editableMachineAtom = atomWithMachine((get) =>
  // `get`은 머신 초기화 시에만 사용 가능
  createEditableMachine(get(defaultTextAtom)),
)

const Toggle = () => {
  const [state, send] = useAtom(editableMachineAtom)

  return (
    <div>
      {state.matches('reading') && (
        <strong onDoubleClick={send}>{state.context.value}</strong>
      )}
      {state.matches('editing') && (
        <input
          autoFocus
          defaultValue={state.context.value}
          onBlur={(e) => send({ type: 'commit', value: e.target.value })}
          onKeyDown={(e) => {
            if (e.key === 'Enter') {
              send({ type: 'commit', value: e.target.value })
            }
            if (e.key === 'Escape') {
              send('cancel')
            }
          }}
        />
      )}
      <br />
      <br />
      <div>
        더블클릭으로 편집. 입력창에서 포커스를 잃거나 <code>enter</code>를 눌러 저장. <code>esc</code>를 눌러 취소.
      </div>
    </div>
  )
}

전역 Provider에 저장된 재시작 가능한 머신 (프로바이더 없음 모드)

머신이 최종 상태에 도달하면 더 이상 이벤트를 받을 수 없습니다.
atomWithMachine이 전역 스토어(프로바이더 없음 모드)에서 초기화된 경우,
머신을 재시작하려면 다음과 같이 RESTART 이벤트를 보내야 합니다:

import { RESTART } from 'jotai-xstate'

const YourComponent = () => {
  const [current, send] = useAtom(yourMachineAtom)

  const isFinalState = current.matches('myFinalState')

  useEffect(() => {
    // 컴포넌트가 언마운트될 때 전역으로 초기화된 머신 재시작
    return () => {
      if (isFinalState) send(RESTART)
    }
  }, [isFinalState])
}

예제

atomWithMachine를 사용한 예제 확인:

재시작 가능한 머신:

튜토리얼

Jotai와 XState에 관한 강좌를 확인해 보세요.

React에서 Jotai와 XState를 사용한 복잡한 상태 관리

(참고: 강좌에서는 jotai/xstate를 사용하지만, 이제는 jotai-xstate로 대체되었습니다.)