Jotai의 상태는 React 내부에 존재하지만, 때로는 React 외부와 상호작용할 필요가 있습니다.

Redux는 일부 값을 저장하고 Jotai의 아톰과 동기화할 수 있는 스토어 인터페이스를 제공합니다.

설치

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

npm install redux jotai-redux

atomWithStore

atomWithStore는 Redux 스토어를 사용해 새로운 아톰을 생성합니다.
이 아톰은 양방향 바인딩을 지원하며, 양쪽에서 값을 변경할 수 있습니다.

import { useAtom } from 'jotai'
import { atomWithStore } from 'jotai-redux'
import { createStore } from 'redux'

const initialState = { count: 0 }
const reducer = (state = initialState, action: { type: 'INC' }) => {
  if (action.type === 'INC') {
    return { ...state, count: state.count + 1 }
  }
  return state
}
const store = createStore(reducer)
const storeAtom = atomWithStore(store)

const Counter = () => {
  const [state, dispatch] = useAtom(storeAtom)

  return (
    <>
      count: {state.count}
      <button onClick={() => dispatch({ type: 'INC' })}>button</button>
    </>
  )
}

예제