Jotai 試用紀錄

可取代 React Redux, State Managment, atomic.

Jotai

此字詞 Jotai 應該是來自日文，意思是狀態。 採用方法為 Atomic。設計理念來自 Recoil。Recoil 由 facebook 提出，可是一直處在實驗階段反觀同類的 Jotai 早已後來居上。

適合中小型的 store。

開發工具：jotai-devtools 勉強可用。尚未找到更好的。

優點：簡單。就只有 store 存取功能。(我們也只要這個功能而已)

缺點：太簡單。(優點就是它的缺點)

其他：已通過評估、已試用。可應用取代 Redux。

---

應用方法

因為 Jotai 的原理是 atomic (原子) ，可是真實世界的物理特性主要由 molecule (分子)決定。意思是 atomic 太細。真實的存存單位是數群數據。

應用方法一：buttom-up

由下到上。用 atom 把最底層的 atom 各自建立。再用 derived atom 技訢可以把相關的放在一個只能讀取的群組。寫入時用各自的 atom 就行。

再進一步的操作函式就做成 action。

metaAtom.ts

export const darkThemeAtom = atom<boolean>(false)
darkThemeAtom.debugLabel = 'meta/darkThemeAtom'

export const blockingAtom = atom<boolean>(false)
blockingAtom.debugLabel = 'meta/blockingAtom'

export const topAlertAtom = atom<ITopAlert | undefined>(undefined)
topAlertAtom.debugLabel = 'meta/topAlertAtom'

//-----------------------------------------------------------------------------
// derived atom / selector 群組的部份只提供讀取能力。
export const selectMeta = atom((get) => ({
  darkTheme: get(darkThemeAtom).valueOf(),
  blocking: get(blockingAtom).valueOf(),
  topAlert: { ...get(topAlertAtom) }
}))
selectMeta.debugLabel = 'selectMeta';

應用方法二：top-down

把 atom 做大，放入同一群組全部欄位，再用 select 指令取出其中欄位。

再進一步的操作函式就做成 action。

accountAtom.ts

const initialState: AccountState = {
  loginUserId: '',
  loginUserName: '來賓',
  status: AuthStatus.Guest,
  expiredTime: undefined,
}

export const accountAtom = atom<AccountState>(initialState)
accountAtom.debugLabel = 'accountAtom'

//-----------------------------------------------------------------------------
// derivedAtom / selector 已登入
export const selectAuthed = atom(
  (get) => get(accountAtom).status === AuthStatus.Authed // && state.expiredTime < NOW,
)
selectAuthed.debugLabel = 'selectAuthed'

// derivedAtom / selector 登入中
export const selectAuthing = atom(
  (get) => get(accountAtom).status === AuthStatus.Authing
)
selectAuthing.debugLabel = 'selectAuthing'

//-----------------------------------------------------------------------------
export function useAccountAction() {
  const setAccount = useSetAtom(accountAtom)

  // 回傳 handlers
  return useMemo(() =>
  ({
    loginAsync: async (args: ILoginArgs) => {
      try {
        setAccount(prev => ({ ...prev, status: AuthStatus.Authing }))
        const { loginUserId, loginUserName, expiredTime } = await doLoginAsync(args);
        setAccount({
          loginUserId: loginUserId,
          loginUserName: loginUserName,
          status: AuthStatus.Authed,
          expiredTime: expiredTime,
        })
      }
      catch (err: unknown) {
        setAccount(initialState)
      }
    },
    logoutAsync: async () => {
      try {
        setAccount(prev => ({ ...prev, status: AuthStatus.Authing }))
        await postData('api/Account/Logout');
        setAccount(initialState)
      } catch (err: unknown) {
        setAccount(initialState)
      }
    },
  }), [setAccount]);
}

---

Jotai 重點指令介紹

Jotai 的理念來個 Recoil, 指令設計也來自 Recoil 不過只有基本指令相當。

基本指令

• atom()

  • primitive atom 相當於 Recoil 的 atom()。

  • derived atom 相當於 Recoil 的 selector() 。

• useAtom()、useAtomValue()、useSetAtom()

  • 執行存取(get/set)由 atom() 定義好的內容。

• Store & Provder

  • 明確設定 provider 與 store，其實已預設一個全域的 store 與 provider。

進階指令

• useAtomCallback

  • 相當於 Recoil 的 useRecoilCallback()，用自設計自訂的 action。自訂 get/set 以外的存取行為。

• Family --- 與 Recoil 的 atomFamily 定義有差異。且尚看不出價值不建議使用。

• Select --- 與 Recoil 的 selectFamily 定義有差異。且尚看不出價值不建議使用。

useAtomCallback 練習用範例

把進一步的操作函式做成 hooks 形式的 action。

///useAtomCallback<Result, Args extends unknown[]>(
///  callback: (get: Getter, set: Setter, ...arg: Args) => Result,
///  options ?: Options
///): (...args: Args) => Result

import { useCallback, useMemo } from "react"
import { useAtomCallback } from 'jotai/utils'

export function useMetaAction() {

  /// 將得到同步函式
  /// toggleTheme(): void
  const toggleTheme = useAtomCallback(
    useCallback((get, set) => {
      set(darkThemeAtom, !get(darkThemeAtom))
    }, []),
  )

  /// 將得到非同步函式
  /// customActionAsync(arg1: string): Promise<string>
  const customActionAsync = useAtomCallback<Promise<string>, [arg1: string]>(
    useCallback(async (get, set, arg1) => {
      const metaValue = get(selectMeta) // 取相關 atom 值。
      console.debug('customAction →', { metaValue })
      set(darkThemeAtom, !get(darkThemeAtom)) // 更新到目標 atom。
      const result = await Promise.resolve(`來自 customAction 的輸入 ${arg1}`)
      return result;
    }, []),
  )

  return useMemo(() =>
    ({ toggleTheme, customActionAsync }),
    [toggleTheme, customActionAsync])
}

兩招打天下: assignProps & assignValue

atoms/extention.ts

import { PrimitiveAtom } from "jotai";
import { useAtomCallback } from "jotai/utils";
import { useCallback } from "react";

// 參考自：useAtom.d.mts, atom.d.mts
type WithInitialValue<Value> = {
  init: Value;
};

// 宣告
export function useAtomUpdater<Value>(atom: PrimitiveAtom<Value> & WithInitialValue<Value>): {
  assignProps: (info: object) => void
  assignValue: (name: string, value: unknown) => void
} {
  const assignProps = useAtomCallback(
    useCallback((get, set, info: Partial<object>) => {
      set(atom, { ...get(atom), ...info })
    }, [atom]),
  )

  const assignValue = useAtomCallback(
    useCallback((get, set, name: string, value: unknown) => {
      set(atom, { ...get(atom), [name]: value })
    }, [atom]),
  )

  return { assignProps, assignValue };
}

(EOF)