Redux

Jotai 的状态驻留在 React 中，但有时与 React 之外的世界交互会很好。

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

安装

您必须安装 redux 和 jotai-redux 才能使用此功能。

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

atomWithStore

atomWithStore 使用 redux store 创建一个新的 atom。 它是双向绑定，您可以双向更改值。

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

示例