JotaiJotai

状態
Primitive and flexible state management for React

Redux

Jotai's state resides in React, but sometimes it would be nice to interact with the world outside React.

Redux provides a store interface that can be used to store some values and sync with atoms in Jotai.

Install

You have to install redux and jotai-redux to use this feature.

npm install redux jotai-redux
# or
yarn add redux jotai-redux

atomWithStore

atomWithStore creates a new atom with redux store. It's two-way binding and you can change the value from both ends.

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>
</>
)
}

Examples