learn daily note

狀態管理工具，與Redex、ZuStand雷同，使用方式較接近原生React Hook的操作方式。

套件安裝

npm i jotai 或 yarn add jotai

以管控登入狀態為例，創建一個集中管理組件，引入atom並export狀態

import { atom } from "jotai";

export const isLoginAtom = atom(false);

使用Provider包覆所有需要用到狀態的組件，以NextJS來說直接包在Layout最外層

layout.tsx

import { Provider } from 'jotai';

<Provider>
    <Layout>
        {children}
    </Layout>
</Provider>

引入最初創建的集中管理組件，使用useAtom指定並取出，其使用方式與React Hook的useState一致

component.tsx

import { isLoginAtom } from './@jotai/login';
import { useAtom } from 'jotai';

const [isLogin, setIsLogin] = useAtom(isLoginAtom); //是否已登入