Recoil 試用紀錄

Recoil, Redux 取代方案,

引言

由於 Redux 太厚重其實一直不是很喜歡，終於出現了新的取代方案 Recoil 。

Recoil 簡介

Recoil 是由 Facebook 開發與維護的一個 React 狀態管理套件，於 2020 年發布。Recoil 的主要目標是解決以下兩個問題：

• 使用 context 或 props 傳遞狀態容易造成重新渲染 (re-render) 的問題。

• 使用 context 會讓程式碼分割 (code-splitting) 無法切分得更細，因為整個元件樹都使用了 context 或 props 的狀態。

Recoil 的設計理念是將狀態分割成一個個的原子 (atom)，再由選擇器 (selector) 派生出更多狀態。最後，React 元件樹會訂閱自己需要的狀態，當有原子狀態更新時，只有變更的原子及其下游節點有訂閱他們的元件才會更新。

Recoil 的主要特性包括：

• 原子 (atom)：狀態的基本單位，不可變且可更新。同步存取狀態。

• 選擇器 (selector)：用於從現有原子派生出新狀態的函式。支援非同步存取，也就是 await/async 。

Motivation | Recoilrecoiljs.org

Core Concepts | Recoilrecoiljs.org

atoms & selectors

Asynchronous Data Queries | Recoilrecoiljs.org

async selector

Recoil Toolkit DevTools - Chrome Web Storechromewebstore.google.com

GitHub - salvoravida/recoil-toolkit: Helpers for Recoil, the next generation state management library.GitHub

---

關於巢狀 <RecoilRoot>

依照官網說明，<RecoilRoot> 支援巢狀結構。好處是可以在極其複雜的 Recoil State Tree 進行隔離， 但是經測試並不好用。以現在這一版(Recoil v0.7.7)來說功能成熟度還不夠，dev tool 也不成熟，然已足以處理非巢狀結構的<RecoilRoot>，也足以取代 Redux 了。一般也不建議使用巢狀 <RecoilRoot>，因為這會讓整體狀態管理變得複雜，畢竟導入 Recoil 這類 state managerment 套件就是要集中統一管理系統的全部狀態。

<RecoilRoot> | Recoilrecoiljs.org

---

測試環境

IDE: Visual Studio Code 平台: React v18.2 框架: Next.js v14 Recoil: Recoil v0.7.7

安裝

如同 Redux，Recoil 也有開發工具: Recoil Toolkit DevTools，此開發工具是第三方開發的功能陽春然可用。到今日(2024-4-10)為止未有官方認可的 dev tool。

> npm install recoil          # Recoil 核心模組
> npm install recoil-toolkit  # Recoil DevTools 開發工具(第三方)

關鍵程式碼

進入頁面。設定 RecoilRoot 範圍。

page.tsx

"use client"
import AppForm from "./AppForm";
import { RecoilRoot } from "recoil";
import { RecoilDevTools } from "recoil-toolkit";

/* Recoil 只能在前端作用 */
export default function MyApp04Page() {
  return (
    <RecoilRoot>
      {process.env.NODE_ENV === 'development' && <RecoilDevTools />}
      <AppForm />
    </RecoilRoot>
  )
}

先定義好 atoms

atoms.ts

import { atom, selector } from "recoil";

//§ 放置此 page 範圍內全部的表單狀態。
interface FormState {
  fieldA: string
  fieldB: string
  age: number
}

const initFormState: FormState = {
  fieldA: '',
  fieldB: '',
  age: 23,
}

export const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

export const formState = atom({
  key: 'formState',
  default: initFormState
})

// 選擇器 (selector) 也支援非同步存取，也就是 await/async 。
export const selectAge = selector({
  key: 'selectAge',
  get: ({get}) => {
    const text = get(textState)
    const formData = get(formState)
    return `${formData.age} with text: ${text}` 
  },
});

使用範例一: 用 useRecoilState 取存 atoms。就像使用 useState。

AppForm.tsx

"use client"
import { useRecoilState } from "recoil";
import { textState, formState } from "./atoms";
import SubView from "./SubView";

export default function AppForm() {
  const [text, setText] = useRecoilState(textState);
  const [formData, setFormData] = useRecoilState(formState);

  return (
    <article role="container">
      <h1>MyApp04: Recoil Lab</h1>
      <button style={{ margin: 4 }} onClick={handleClick}>加１</button>
      <input type="text" value={text} onChange={handleChange} />

      <SubView />

      <pre>
        Echo: {text}<br />
        FormData: {JSON.stringify(formData, null, ' ')}
      </pre>
    </article>
  )

  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    setText(event.target.value);
  }

  function handleClick() {
    setFormData(prev => ({ ...prev, age: prev.age + 1 }))
  }
}

使用範例二：用選擇器 (selector) 查看數值。

SubView.tsx

import { selectAge } from "./atoms";
import { useRecoilValue } from 'recoil'
import Card from "@/components/Card";

export default function SubView() {
  const age = useRecoilValue(selectAge);

  return (
    <Card>
      <p>watch RecoilValue </p>
      <p>SubView → age: {age}</p>
    </Card>
  )
}

沒圖沒真象

---

兩招打天下: assignProps & assignValue

補充 on 2024-4-10

atoms/extention.ts

import { useCallback } from "react";
import { RecoilState, useSetRecoilState } from "recoil"

export function useRecoilUpdater<T>(recoilState: RecoilState<T>) {
  const setter = useSetRecoilState<T>(recoilState)

  const assignProps = useCallback((newValue: Partial<T>) => {
    setter(currVal => ({ ...currVal, ...newValue }))
  }, [setter])

  const assignValue = useCallback((name: keyof T, value: unknown) => {
    setter(currVal => ({ ...currVal, [name]: value }))
  }, [setter])

  return { assignProps, assignValue };
}

---

Recoil 重點指令介紹

Recoil 功能成熟度仍不足然足以取代 Redux。部份進階指令屬 beta 狀態暫不理會，現階段重點放在基本指令就好。

基本指令

• atom<T>(options)

  • 定義 atom。有儲存體。就像 property 一樣 get 與 set。

• selector<T>(options)

  • 定義 selector。沒有自己的儲存體，轉介存取 atom。就像 property 一樣 get 與 set。

  • 有支援 async/await 非同步語法。

  • 可以聚合多個 atom。

  • 可針對某 atom 中特別有價值的一、兩項屬性拉出來成另一個 property。

• useRecoilState()、useRecoilValue()、useSetRecoilState()、useResetRecoilState()

  • 執行存取(get/set)由 atom() 或 selector() 定義好的 property。

進階指令

• atomFamily<T,P>()

  • 可與 selectorFamily 搭配使用。尚看不出價值暫不採用。

• selectorFamily<T,P>()

  • 可以簡單理解成有參數的 selector()。

• useRecoilCallback<Args, ReturnValue>(callback, deps)

  • 自訂 Recoil action。自訂 get/set 以外的存取行為。

  • 可以取用 snapshot。但無法取用其它 hooks 資源故只能是個 "action"。

useRecoilCallback() 練習用範例

import { useMemo } from "react"
import { atom, useRecoilCallback } from "recoil"

const initialState: MetaState = {
  blocking: false,
  topAlertSeverity: undefined,
  topAlertText: undefined,
  darkTheme: false,
}

export const metaAtom = atom<MetaState>({
  key: 'meta',
  default: initialState
})

/// 自訂 Recoil actions
export function useMetaAction() {
  /// 將得到同步函式
  /// toggleTheme(): void
  const toggleTheme = useRecoilCallback(({ set }) => () => {
    set(selectDarkTheme, prev => !prev);
  }, []);

  /// 將得到非同步函式
  /// customActionAsync(args: string): Promise<string>
  const customActionAsync = useRecoilCallback(({ snapshot, set }) => async (args: string) => {
    const metaValue = await snapshot.getPromise(metaAtom) // 效果同 get(metaAtom) 取 atom 值。
    console.debug('customAction →', { metaValue })
    set(selectDarkTheme, prev => !prev); // 更新到目標 atom。
    return `來自 customAction 的輸入 ${args}`
  }, []);

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

(EOF)