redux.mdx

title	description	nav
Redux	This doc describes Redux integration.	4.07

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