JotaiJotai

状態
原始和灵活的 React 状态管理

Redux

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

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

安装

您必须安装 reduxjotai-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>
</>
);
};

示例