restatev1.0.0

React 與 React Native 的狀態管理 · 1.0

共享狀態。一個 Hook。搞定。

一行宣告一個 store，在任何元件中使用——不需要 Provider、action 或 reducer。元件只在選取的值改變時渲染，何時儲存由你決定。

1 分鐘上手 開啟線上練習場
Terminal
npm install @kkwaenggwari/restate

即時展示 — 真正的 restate store

useCart.set(cart => ({ ...cart, items: cart.items + 1, total: cart.total + 12 }))

items 和 total 改變——三張卡片渲染，留言保持不動。

  1. 簡單0需要設定的 Provider、action 與 reducer宣告一個值就能用，不必先接線。
  2. 快速11 → 1編輯 11 次，寫入 1 次autoSave 會等輸入停頓，所以 11 次快速編輯只會寫入一次。
  3. 穩定26具型別的錯誤代碼每個錯誤都會說明出了什麼問題、發生在哪一筆紀錄。

01 — 簡單

同樣的功能，更少的概念。

同一個任務的四種實作並排呈現。數字來自這裡顯示的程式碼，在建置本站時測量。

任務 共享計數器 · 選取一個欄位 · 儲存草稿 · 依文件區分的狀態

共享計數器

兩個元件讀取並更新同一個數字。

Redux Toolkit 把更新整理成 slice 與 action，並 dispatch 到透過 React context 提供的 store。 出色的 DevTools，以及適合大型團隊、嚴謹且可預測的更新流程。

Zustand 用 create() 建立 store Hook，用 setState 修改它。 極小又有彈性，提供持久化與 DevTools 的中介軟體。

Jotai 組合 atom 與衍生 atom，可選擇放在 Provider 中。 大量小型狀態之間的細緻相依關係。

Redux Toolkit29 行 · 5 個 API
JavaScript / JSX
import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useDispatch, useSelector } from 'react-redux';

const slice = createSlice({
  name: 'count',
  initialState: 0,
  reducers: { increment: (count) => count + 1 },
});
const store = configureStore({
  reducer: { count: slice.reducer },
});

function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();
  return <button onClick={() => dispatch(slice.actions.increment())}>{count}</button>;
}

export default function App() {
  return (
    <Provider store={store}>
      <Counter />
      <Counter />
    </Provider>
  );
}
Zustand16 行 · 1 個 API
JavaScript / JSX
import { create } from 'zustand';

const useCount = create(() => ({ count: 0 }));
const increment = () =>
  useCount.setState((s) => ({
    count: s.count + 1,
  }));

function Counter() {
  const count = useCount((s) => s.count);
  return <button onClick={increment}>{count}</button>;
}

export default function App() {
  return (
    <>
      <Counter />
      <Counter />
    </>
  );
}
Jotai13 行 · 2 個 API
JavaScript / JSX
import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return <button onClick={() => setCount((n) => n + 1)}>{count}</button>;
}

export default function App() {
  return (
    <>
      <Counter />
      <Counter />
    </>
  );
}

restate 一個宣告既是 store，也是 Hook。

restate13 行 · 1 個 API
JavaScript / JSX
import { restate } from '@kkwaenggwari/restate';

const useCount = restate(0);

function Counter() {
  const count = useCount();
  return <button onClick={() => useCount.set((n) => n + 1)}>{count}</button>;
}

export default function App() {
  return (
    <>
      <Counter />
      <Counter />
    </>
  );
}

在這個任務上，Zustand 和 Jotai 同樣輕巧、不需要 Provider。一旦牽涉到儲存與依文件區分的狀態，差距才會拉開。

選取一個欄位

只有內文改變時，標題元件不能渲染。

Redux Toolkit 把更新整理成 slice 與 action，並 dispatch 到透過 React context 提供的 store。 出色的 DevTools，以及適合大型團隊、嚴謹且可預測的更新流程。

Zustand 用 create() 建立 store Hook，用 setState 修改它。 極小又有彈性，提供持久化與 DevTools 的中介軟體。

Jotai 組合 atom 與衍生 atom，可選擇放在 Provider 中。 大量小型狀態之間的細緻相依關係。

Redux Toolkit26 行 · 4 個 API
JavaScript / JSX
import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useSelector } from 'react-redux';

const article = createSlice({
  name: 'article',
  initialState: { title: 'Hello', body: '' },
  reducers: {
    editBody: (i) => {
      i.body += '!';
    },
    editTitle: (i) => {
      i.title += '!';
    },
  },
});
const store = configureStore({ reducer: article.reducer });

function Title() {
  const title = useSelector((i) => i.title);
  return <h3>{title}</h3>;
}

export default function App() {
  return (
    <Provider store={store}>
      <Title />
      <button onClick={() => store.dispatch(article.actions.editBody())}>body + !</button>
      <button onClick={() => store.dispatch(article.actions.editTitle())}>title + !</button>
    </Provider>
  );
}
Zustand17 行 · 1 個 API
JavaScript / JSX
import { create } from 'zustand';

const useArticle = create(() => ({ title: 'Hello', body: '' }));

function Title() {
  const title = useArticle((i) => i.title);
  return <h3>{title}</h3>;
}

export default function App() {
  return (
    <>
      <Title />
      <button
        onClick={() =>
          useArticle.setState((i) => ({
            body: i.body + '!',
          }))
        }
      >
        body + !
      </button>
      <button
        onClick={() =>
          useArticle.setState((i) => ({
            title: i.title + '!',
          }))
        }
      >
        title + !
      </button>
    </>
  );
}
Jotai19 行 · 3 個 API
JavaScript / JSX
import { atom, useAtomValue, useSetAtom } from 'jotai';

const articleAtom = atom({ title: 'Hello', body: '' });
const titleAtom = atom((get) => get(articleAtom).title);

function Title() {
  const title = useAtomValue(titleAtom);
  return <h3>{title}</h3>;
}

export default function App() {
  const setArticle = useSetAtom(articleAtom);
  return (
    <>
      <Title />
      <button
        onClick={() =>
          setArticle((i) => ({
            ...i,
            body: i.body + '!',
          }))
        }
      >
        body + !
      </button>
      <button
        onClick={() =>
          setArticle((i) => ({
            ...i,
            title: i.title + '!',
          }))
        }
      >
        title + !
      </button>
    </>
  );
}

restate 把 selector 傳給你本來就在用的同一個 Hook。

restate17 行 · 1 個 API
JavaScript / JSX
import { restate } from '@kkwaenggwari/restate';

const useArticle = restate({ title: 'Hello', body: '' });

function Title() {
  const title = useArticle((i) => i.title);
  return <h3>{title}</h3>;
}

export default function App() {
  return (
    <>
      <Title />
      <button
        onClick={() =>
          useArticle.set((i) => ({
            ...i,
            body: i.body + '!',
          }))
        }
      >
        body + !
      </button>
      <button
        onClick={() =>
          useArticle.set((i) => ({
            ...i,
            title: i.title + '!',
          }))
        }
      >
        title + !
      </button>
    </>
  );
}

這裡的每個工具都能做選取。restate 用的是同一個 Hook 呼叫，而不是另外的 selector Hook 或衍生 atom。

儲存草稿

啟動時還原已儲存的草稿，點擊時儲存，並顯示儲存中、未儲存與失敗的狀態。

Redux Toolkit 把更新整理成 slice 與 action，並 dispatch 到透過 React context 提供的 store。 出色的 DevTools，以及適合大型團隊、嚴謹且可預測的更新流程。

Zustand 用 create() 建立 store Hook，用 setState 修改它。 極小又有彈性，提供持久化與 DevTools 的中介軟體。

Jotai 組合 atom 與衍生 atom，可選擇放在 Provider 中。 大量小型狀態之間的細緻相依關係。

Redux Toolkit84 行 · 4 個 API
JavaScript / JSX
import { useEffect, useState } from 'react';
import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useSelector } from 'react-redux';

function openDraftDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('draft-example', 1);
    let blocked = false;
    request.onupgradeneeded = () => {
      request.result.createObjectStore('drafts');
    };
    request.onblocked = () => {
      blocked = true;
      reject(new Error('Close other tabs to upgrade storage'));
    };
    request.onerror = () => reject(request.error);
    request.onsuccess = () => {
      const db = request.result;
      if (blocked) {
        db.close();
        return;
      }
      db.onversionchange = () => db.close();
      resolve(db);
    };
  });
}

async function storedDraft(mode, text) {
  const db = await openDraftDB();
  try {
    return await new Promise((resolve, reject) => {
      const tx = db.transaction('drafts', mode);
      const store = tx.objectStore('drafts');
      const request = mode === 'readonly' ? store.get('draft') : store.put(text, 'draft');
      tx.oncomplete = () => resolve(request.result);
      tx.onabort = () => reject(tx.error || new Error('Storage aborted'));
    });
  } finally {
    db.close();
  }
}

const draft = createSlice({
  name: 'draft',
  initialState: '',
  reducers: { edit: (_, action) => action.payload },
});
const store = configureStore({ reducer: { draft: draft.reducer } });
const hydrated = storedDraft('readonly').then((saved) => {
  if (saved === undefined) return;
  if (typeof saved !== 'string') throw new Error('Invalid draft');
  const value = saved;
  store.dispatch(draft.actions.edit(value));
});
// Observe errors immediately, even before the component mounts.
hydrated.catch(() => {});

function DraftEditor() {
  const text = useSelector((state) => state.draft);
  const [ready, setReady] = useState(false);
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState('Loading');
  useEffect(() => {
    let active = true;
    hydrated.then(
      () => {
        if (active) {
          setReady(true);
          setMessage('Ready');
        }
      },
      () => {
        if (active) setMessage('Storage error');
      },
    );
    return () => {
      active = false;
    };
  }, []);
  async function save() {
    setSaving(true);
    try {
      await storedDraft('readwrite', store.getState().draft);
      setMessage('Saved');
    } catch {
      setMessage('Save failed');
    } finally {
      setSaving(false);
    }
  }
  return (
    <>
      <label>
        Draft
        <textarea
          value={text}
          disabled={!ready || saving}
          onChange={(event) => {
            const value = event.target.value;
            store.dispatch(draft.actions.edit(value));
            setMessage('Edited');
          }}
        />
      </label>
      <output>{text}</output>
      <button disabled={!ready || saving} onClick={save}>
        Save
      </button>
      <p>{message}</p>
    </>
  );
}

export default function App() {
  return (
    <Provider store={store}>
      <DraftEditor />
    </Provider>
  );
}
Zustand79 行 · 1 個 API
JavaScript / JSX
import { useEffect, useState } from 'react';
import { create } from 'zustand';

function openDraftDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('draft-example', 1);
    let blocked = false;
    request.onupgradeneeded = () => {
      request.result.createObjectStore('drafts');
    };
    request.onblocked = () => {
      blocked = true;
      reject(new Error('Close other tabs to upgrade storage'));
    };
    request.onerror = () => reject(request.error);
    request.onsuccess = () => {
      const db = request.result;
      if (blocked) {
        db.close();
        return;
      }
      db.onversionchange = () => db.close();
      resolve(db);
    };
  });
}

async function storedDraft(mode, text) {
  const db = await openDraftDB();
  try {
    return await new Promise((resolve, reject) => {
      const tx = db.transaction('drafts', mode);
      const store = tx.objectStore('drafts');
      const request = mode === 'readonly' ? store.get('draft') : store.put(text, 'draft');
      tx.oncomplete = () => resolve(request.result);
      tx.onabort = () => reject(tx.error || new Error('Storage aborted'));
    });
  } finally {
    db.close();
  }
}

const useDraft = create(() => ({ text: '' }));
const hydrated = storedDraft('readonly').then((saved) => {
  if (saved === undefined) return;
  if (typeof saved !== 'string') throw new Error('Invalid draft');
  const value = saved;
  useDraft.setState({ text: value });
});
// Observe errors immediately, even before the component mounts.
hydrated.catch(() => {});

function DraftEditor() {
  const text = useDraft((state) => state.text);
  const [ready, setReady] = useState(false);
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState('Loading');
  useEffect(() => {
    let active = true;
    hydrated.then(
      () => {
        if (active) {
          setReady(true);
          setMessage('Ready');
        }
      },
      () => {
        if (active) setMessage('Storage error');
      },
    );
    return () => {
      active = false;
    };
  }, []);
  async function save() {
    setSaving(true);
    try {
      await storedDraft('readwrite', useDraft.getState().text);
      setMessage('Saved');
    } catch {
      setMessage('Save failed');
    } finally {
      setSaving(false);
    }
  }
  return (
    <>
      <label>
        Draft
        <textarea
          value={text}
          disabled={!ready || saving}
          onChange={(event) => {
            const value = event.target.value;
            useDraft.setState({ text: value });
            setMessage('Edited');
          }}
        />
      </label>
      <output>{text}</output>
      <button disabled={!ready || saving} onClick={save}>
        Save
      </button>
      <p>{message}</p>
    </>
  );
}

export default function App() {
  return <DraftEditor />;
}
Jotai80 行 · 3 個 API
JavaScript / JSX
import { useEffect, useState } from 'react';
import { atom, createStore, useAtomValue } from 'jotai';

function openDraftDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('draft-example', 1);
    let blocked = false;
    request.onupgradeneeded = () => {
      request.result.createObjectStore('drafts');
    };
    request.onblocked = () => {
      blocked = true;
      reject(new Error('Close other tabs to upgrade storage'));
    };
    request.onerror = () => reject(request.error);
    request.onsuccess = () => {
      const db = request.result;
      if (blocked) {
        db.close();
        return;
      }
      db.onversionchange = () => db.close();
      resolve(db);
    };
  });
}

async function storedDraft(mode, text) {
  const db = await openDraftDB();
  try {
    return await new Promise((resolve, reject) => {
      const tx = db.transaction('drafts', mode);
      const store = tx.objectStore('drafts');
      const request = mode === 'readonly' ? store.get('draft') : store.put(text, 'draft');
      tx.oncomplete = () => resolve(request.result);
      tx.onabort = () => reject(tx.error || new Error('Storage aborted'));
    });
  } finally {
    db.close();
  }
}

const draftAtom = atom('');
const store = createStore();
const hydrated = storedDraft('readonly').then((saved) => {
  if (saved === undefined) return;
  if (typeof saved !== 'string') throw new Error('Invalid draft');
  const value = saved;
  store.set(draftAtom, value);
});
// Observe errors immediately, even before the component mounts.
hydrated.catch(() => {});

function DraftEditor() {
  const text = useAtomValue(draftAtom, { store });
  const [ready, setReady] = useState(false);
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState('Loading');
  useEffect(() => {
    let active = true;
    hydrated.then(
      () => {
        if (active) {
          setReady(true);
          setMessage('Ready');
        }
      },
      () => {
        if (active) setMessage('Storage error');
      },
    );
    return () => {
      active = false;
    };
  }, []);
  async function save() {
    setSaving(true);
    try {
      await storedDraft('readwrite', store.get(draftAtom));
      setMessage('Saved');
    } catch {
      setMessage('Save failed');
    } finally {
      setSaving(false);
    }
  }
  return (
    <>
      <label>
        Draft
        <textarea
          value={text}
          disabled={!ready || saving}
          onChange={(event) => {
            const value = event.target.value;
            store.set(draftAtom, value);
            setMessage('Edited');
          }}
        />
      </label>
      <output>{text}</output>
      <button disabled={!ready || saving} onClick={save}>
        Save
      </button>
      <p>{message}</p>
    </>
  );
}

export default function App() {
  return <DraftEditor />;
}

restate persistedRestate 會自動還原，useStatus 會回報儲存進度、未儲存的修改與錯誤。

restate18 行 · 1 個 API
JavaScript / JSX
import { persistedRestate } from '@kkwaenggwari/restate';

const useDraft = persistedRestate('', {
  key: 'draft',
  validate: (value) => typeof value === 'string',
});

export default function App() {
  const text = useDraft();
  const { dirty, operation, error } = useDraft.useStatus();
  const saving = operation === 'save';
  const message = error ? 'Save failed' : saving ? 'Saving…' : dirty ? 'Edited' : 'Saved';

  return (
    <>
      <label>
        Draft
        <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />
      </label>
      <output>{text}</output>
      <button disabled={saving} onClick={() => useDraft.save().catch(() => {})}>
        Save
      </button>
      <p>{message}</p>
    </>
  );
}

其他版本都手寫了相同的 IndexedDB 程式碼。它們的持久化中介軟體或儲存工具可以靠轉接器縮短程式碼，但這裡沒有計入那部分程式碼。

依文件區分的狀態

兩份文件各自保有獨立的狀態，關閉其中一份就會釋放它。

Redux Toolkit 把更新整理成 slice 與 action，並 dispatch 到透過 React context 提供的 store。 出色的 DevTools，以及適合大型團隊、嚴謹且可預測的更新流程。

Zustand 用 create() 建立 store Hook，用 setState 修改它。 極小又有彈性，提供持久化與 DevTools 的中介軟體。

Jotai 組合 atom 與衍生 atom，可選擇放在 Provider 中。 大量小型狀態之間的細緻相依關係。

Redux Toolkit42 行 · 4 個 API
JavaScript / JSX
import { useState } from 'react';
import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useSelector } from 'react-redux';

const draft = createSlice({
  name: 'draft',
  initialState: '',
  reducers: { edit: (_, action) => action.payload },
});
const selectionSlice = createSlice({
  name: 'selection',
  initialState: 0,
  reducers: { next: (index) => index + 1 },
});
function createDocument() {
  return {
    store: configureStore({
      reducer: {
        draft: draft.reducer,
        selection: selectionSlice.reducer,
      },
    }),
  };
}

function Document({ doc, name }) {
  const text = useSelector((state) => state.draft);
  const selection = useSelector((state) => state.selection);
  return (
    <section>
      <label>
        {name}
        <input
          value={text}
          onChange={(event) => doc.store.dispatch(draft.actions.edit(event.target.value))}
        />
      </label>
      <output>{text}</output>
      <button onClick={() => doc.store.dispatch(selectionSlice.actions.next())}>
        Selection: {selection}
      </button>
    </section>
  );
}

function DocumentSlot({ name }) {
  const [doc] = useState(createDocument);
  return (
    <Provider store={doc.store}>
      <Document doc={doc} name={name} />
    </Provider>
  );
}

export default function App() {
  const [leftOpen, setLeftOpen] = useState(true);
  return (
    <>
      <button onClick={() => setLeftOpen((open) => !open)}>
        {leftOpen ? 'Close left' : 'Open left'}
      </button>
      {leftOpen && <DocumentSlot name="Left" />}
      <DocumentSlot name="Right" />
    </>
  );
}
Zustand35 行 · 2 個 API
JavaScript / JSX
import { useState } from 'react';
import { useStore } from 'zustand';
import { createStore } from 'zustand/vanilla';

function createDocument() {
  return {
    draft: createStore(() => ({ text: '' })),
    selection: createStore(() => ({ index: 0 })),
  };
}

function Document({ doc, name }) {
  const text = useStore(doc.draft, (state) => state.text);
  const selection = useStore(doc.selection, (state) => state.index);
  return (
    <section>
      <label>
        {name}
        <input
          value={text}
          onChange={(event) => doc.draft.setState({ text: event.target.value })}
        />
      </label>
      <output>{text}</output>
      <button onClick={() => doc.selection.setState((s) => ({ index: s.index + 1 }))}>
        Selection: {selection}
      </button>
    </section>
  );
}

function DocumentSlot({ name }) {
  const [doc] = useState(createDocument);
  return <Document doc={doc} name={name} />;
}

export default function App() {
  const [leftOpen, setLeftOpen] = useState(true);
  return (
    <>
      <button onClick={() => setLeftOpen((open) => !open)}>
        {leftOpen ? 'Close left' : 'Open left'}
      </button>
      {leftOpen && <DocumentSlot name="Left" />}
      <DocumentSlot name="Right" />
    </>
  );
}
Jotai33 行 · 3 個 API
JavaScript / JSX
import { useState } from 'react';
import { atom, createStore, useAtomValue } from 'jotai';

const draftAtom = atom('');
const selectionAtom = atom(0);
function createDocument() {
  return { store: createStore() };
}

function Document({ doc, name }) {
  const text = useAtomValue(draftAtom, { store: doc.store });
  const selection = useAtomValue(selectionAtom, { store: doc.store });
  return (
    <section>
      <label>
        {name}
        <input value={text} onChange={(event) => doc.store.set(draftAtom, event.target.value)} />
      </label>
      <output>{text}</output>
      <button onClick={() => doc.store.set(selectionAtom, (n) => n + 1)}>
        Selection: {selection}
      </button>
    </section>
  );
}

function DocumentSlot({ name }) {
  const [doc] = useState(createDocument);
  return <Document doc={doc} name={name} />;
}

export default function App() {
  const [leftOpen, setLeftOpen] = useState(true);
  return (
    <>
      <button onClick={() => setLeftOpen((open) => !open)}>
        {leftOpen ? 'Close left' : 'Open left'}
      </button>
      {leftOpen && <DocumentSlot name="Left" />}
      <DocumentSlot name="Right" />
    </>
  );
}

restate useRestateScope 建立 store，並在卸載後銷毀它們。

restate27 行 · 2 個 API
JavaScript / JSX
import { useState } from 'react';
import { restate, useRestateScope } from '@kkwaenggwari/restate';

function Document({ name }) {
  const doc = useRestateScope((scope) => ({
    useDraft: restate('', { scope }),
    useSelection: restate(0, { scope }),
  }));
  const text = doc.useDraft();
  const selection = doc.useSelection();
  return (
    <section>
      <label>
        {name}
        <input value={text} onChange={(event) => doc.useDraft.set(event.target.value)} />
      </label>
      <output>{text}</output>
      <button onClick={() => doc.useSelection.set((n) => n + 1)}>Selection: {selection}</button>
    </section>
  );
}

export default function App() {
  const [leftOpen, setLeftOpen] = useState(true);
  return (
    <>
      <button onClick={() => setLeftOpen((open) => !open)}>
        {leftOpen ? 'Close left' : 'Open left'}
      </button>
      {leftOpen && <Document name="Left" />}
      <Document name="Right" />
    </>
  );
}

Jotai 的 Provider 或 store、Zustand 的 vanilla store 也能隔離狀態，但需要你自己建立並連接。

這些數字怎麼算

計算的是所示程式碼的非空白行數，以及從各狀態函式庫匯入的名稱數量（不計 React 的匯入）。每個版本都以相同的儲存空間、載入和錯誤狀態渲染相同的 UI。restate 範例假設應用程式進入點已執行 await restateManager.ready。原始碼已對照各專案的官方文件確認：

  • Redux Toolkit — Redux Toolkit · Quick Start, React Redux · useSelector, Redux Toolkit · configureStore. 當一份可稽核的 action 紀錄與龐大的中介軟體生態系最重要時選擇它
  • Zustand — Zustand · Introduction, Zustand · persist. 當你想要最小的核心、喜歡組合中介軟體時選擇它
  • Jotai — Jotai · atom, Jotai · Storage, Jotai · Provider. 當你的狀態天生就是一張由小型衍生值構成的圖時選擇它

02 — 快速

只渲染有變化的部分，只寫入一次。

兩個面板都在瀏覽器中執行真正的 restate 套件。點一點、打打字，看看計數器。

渲染地圖

用兩種方式讀取同樣的四個欄位。改一個欄位，數一數渲染次數。

讀取整個 store
  • 名稱
  • 主題
  • 計數
  • 草稿
選取一個欄位
  • 名稱
  • 主題
  • 計數
  • 草稿

合併寫入

autoSave 會等輸入停頓後才寫入一次。連續呼叫 save() 會共用佇列中的同一次寫入。

persistedRestate('', { key: 'note', autoSave: { delayMs: 400 } });

次數來自本頁真實的 React 渲染，以及一個會計數的儲存轉接器。其他函式庫也能選取值；在 restate 中，選取就是讀取值的方式。

03 — 穩定

儲存空間出錯時，資料依然安好。

狀態最容易在儲存時遺失：磁碟緩慢、儲存空間被封鎖、分頁被關閉。以下是 restate 1.0 的保證，而不是建議。

開啟故障實驗室 閱讀可靠性指南
  1. 01

    儲存依序執行

    每個 store 依序執行自己的儲存操作，所以緩慢的儲存絕不會讓舊值覆寫新值。

    save() · restore()
  2. 02

    排隊中的儲存會寫入最新的值

    在另一次儲存排隊時呼叫 save()，會併入那次儲存，而不是疊加更多寫入。

    save(): Promise<T>
  3. 03

    尚未讀取的紀錄不會被意外覆寫

    如果某筆紀錄載入失敗，autoSave 和批次儲存不會動它，並回報 LOAD_FAILED。只有明確呼叫 save() 才能取代它。

    LOAD_FAILED
  4. 04

    即使卸載，儲存也會完成

    卸載前要求的儲存會完成。之後對已銷毀 store 的寫入會被忽略，就像卸載後的 React state 一樣。

    useRestateScope
  5. 05

    沒有儲存空間？應用程式照樣啟動

    在伺服器端渲染或儲存空間被封鎖時，store 會繼續在記憶體中運作，並回報儲存空間無法使用。

    status().available
  6. 06

    錯誤會說明是什麼、在哪裡

    每個 restate 錯誤都帶有具型別的代碼與對應紀錄的 key，方便你顯示合適的訊息。

    error.code · error.key

與應用程式一起成長

只改宣告，元件不變。

儲存、自動儲存和驗證都是同一個 store 的選項。右邊的元件始終不變。

  1. 記憶體

    記憶體中的共享值。

    import { restate } from '@kkwaenggwari/restate';

export const useDraft = restate('');

  2. 持久化

    自動還原；呼叫 save() 時寫入。

    import { persistedRestate } from '@kkwaenggwari/restate';

export const useDraft = persistedRestate('', { key: 'draft' });

  3. 自動儲存

    輸入停頓 500 ms 後寫入一次。

    import { persistedRestate } from '@kkwaenggwari/restate';

export const useDraft = persistedRestate('', {
  key: 'draft',
  autoSave: { delayMs: 500 },
});

  4. 附驗證

    舊紀錄在使用前會先遷移並檢查。

    import { persistedRestate } from '@kkwaenggwari/restate';

export const useDraft = persistedRestate('', {
  key: 'draft',
  autoSave: { delayMs: 500 },
  version: 2,
  migrate: (value) => String(value ?? ''),
  validate: (value) => typeof value === 'string',
});

元件 — 每一步都不變

function Editor() {
  const text = useDraft();

  return <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />;
}

React 能跑的地方它都能跑

一個套件，涵蓋所有 React 環境。

  • react >=16.8.0

    React

    支援 React 16.8 以上版本，瀏覽器和伺服器端渲染都能用。

  • react-native-mmkv >=2.0.0

    React Native

    import 完全相同。安裝 react-native-mmkv 後，儲存會使用 MMKV。

  • SSR

    伺服器端渲染

    元件擁有的 store 從 props 取得伺服器快照，並在 hydration 之後開始載入。

  • index.d.ts

    TypeScript

    內建型別宣告。selector、狀態欄位和錯誤代碼都有型別。

開始使用

一分鐘內擁有第一個共享狀態。

安裝、宣告、使用。應用程式需要時再加上儲存。

1 分鐘上手 開啟線上練習場
  1. 01
    安裝
    Terminal
    npm install @kkwaenggwari/restate
  2. 02
    宣告一個 store
    JavaScript / JSX
    export const useCart = restate({ items: 0, total: 0 });
  3. 03
    在任何元件中讀取
    JavaScript / JSX
    const items = useCart((cart) => cart.items);

KKWAENGGWARI

專案

01Open SourceKKWAENGGWARI02Animated@kkwaenggwari/animated03Animated Chorus@kkwaenggwari/animated-chorus

搜尋文件

搜尋所有指南的標題、說明與內文。

Esc關閉