Redux

Jotai的状态存在于React中，但有时候我们希望能与React之外的世界进行交互。

Redux提供了一个存储接口，可以用来存储一些值，并与Jotai中的原子进行同步。

安装

要使用此功能，你必须安装redux和jotai-redux。

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

示例