React と React Native のための状態管理 · 1.0

状態を共有。フックひとつ。以上。

ストアを 1 行で宣言して、どのコンポーネントからでも使えます。Provider もアクションもリデューサーも要りません。コンポーネントは選択した値が変わったときだけレンダリングされ、保存のタイミングはあなたが決めます。

npm install @kkwaenggwari/restate

ライブ — 本物の restate ストア

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

items と total が変化 — 3 つのカードがレンダリングされ、メッセージはそのまま。

かんたん0Provider、アクション、リデューサーの準備値を宣言して使うだけ。先に配線するものは何もありません。
速い11 → 111 回の編集で、書き込みは 1 回autoSave は入力が止まるのを待つので、すばやい 11 回の編集が 1 回の書き込みになります。
安定26型付きのエラーコードどの失敗も、何が起きたか、どのレコードで起きたかを教えてくれます。

01 — かんたん

同じ機能を、より少ない概念で。

同じタスクの 4 つの実装を並べました。数値はここに表示しているコードから、このサイトのビルド時に計測しています。

タスク 共有カウンター · 1 つのフィールドを選択 · 下書きを保存 · ドキュメントごとの状態

共有カウンター

2 つのコンポーネントが 1 つの数値を読み書きします。

Redux Toolkit 更新を slice と action に分け、React コンテキストで提供される store へ dispatch します。優れた DevTools と、大きなチームに向いた厳格で予測しやすい更新フロー。

Zustand create() でストアのフックを作り、setState で変更します。とても小さく柔軟で、永続化や DevTools のミドルウェアがあります。

Jotai atom と派生 atom を組み合わせます。必要なら Provider の中で使います。小さな状態どうしの細かな依存関係。

Redux Toolkit29 行 · 5 API

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

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

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 1 つの宣言がストアであり、フックでもあります。

restate13 行 · 1 API

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 も要りません。差が開くのは、保存やドキュメントごとの状態が関わってからです。

1 つのフィールドを選択

本文だけが変わったときに、タイトルのコンポーネントをレンダリングしてはいけません。

Zustand create() でストアのフックを作り、setState で変更します。とても小さく柔軟で、永続化や DevTools のミドルウェアがあります。

Jotai atom と派生 atom を組み合わせます。必要なら Provider の中で使います。小さな状態どうしの細かな依存関係。

Redux Toolkit26 行 · 4 API

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

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

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を渡すだけです。

restate17 行 · 1 API

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 は、別のselector用フックや派生 atom ではなく、同じフック呼び出しを使います。

下書きを保存

起動時に保存済みの下書きを復元し、クリックで保存し、保存中・未保存・失敗の状態を表示します。

Zustand create() でストアのフックを作り、setState で変更します。とても小さく柔軟で、永続化や DevTools のミドルウェアがあります。

Jotai atom と派生 atom を組み合わせます。必要なら Provider の中で使います。小さな状態どうしの細かな依存関係。

Redux Toolkit84 行 · 4 API

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

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

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

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 のコードを手で書いています。それぞれの永続化ミドルウェアやストレージユーティリティーを使えばアダプターで短くできますが、そのコードはここでは数えていません。

ドキュメントごとの状態

2 つのドキュメントがそれぞれ独立した状態を持ち、閉じると解放されます。

Zustand create() でストアのフックを作り、setState で変更します。とても小さく柔軟で、永続化や DevTools のミドルウェアがあります。

Jotai atom と派生 atom を組み合わせます。必要なら Provider の中で使います。小さな状態どうしの細かな依存関係。

Redux Toolkit42 行 · 4 API

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

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

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 がストアを作成し、アンマウント後に破棄します。

restate27 行 · 2 API

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 でも状態を分離できますが、作成と接続は自分で行います。

数値の数え方

表示しているコードの空でない行数と、各状態管理ライブラリーから import している名前の数です(React の import は数えません)。どのバージョンも、同じストレージ、読み込み状態、エラー状態で同じ UI を描画します。restate の例は、アプリのエントリーで await restateManager.ready を行う前提です。ソースは各プロジェクトの公式ドキュメントと照らし合わせて確認しています:

Redux Toolkit — Redux Toolkit · Quick Start, React Redux · useSelector, Redux Toolkit · configureStore. 監査できる 1 本のアクションログと、大きなミドルウェアのエコシステムが何より重要なときに
Zustand — Zustand · Introduction, Zustand · persist. いちばん小さなコアを求め、ミドルウェアを組み合わせるのが好きなときに
Jotai — Jotai · atom, Jotai · Storage, Jotai · Provider. 状態がもともと小さな派生値のグラフになっているときに

02 — 速い

変わったところだけレンダリング。書き込みは 1 回だけ。

どちらのパネルも、ブラウザーの中で本物の restate パッケージを動かしています。クリックや入力をして、カウンターを見てください。

レンダリングマップ

同じ 4 つのフィールドを 2 通りの方法で読みます。フィールドを 1 つ変えて、レンダリング回数を数えてみてください。

ストア全体を読む

名前
テーマ
カウント
下書き

1 つのフィールドを選択

名前
テーマ
カウント
下書き

まとめられる書き込み

autoSave は入力が止まるのを待ってから 1 回だけ書き込みます。save() を立て続けに呼んでも、キューに入った 1 回の書き込みを共有します。

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

回数は、このページでの実際の React レンダリングと、書き込みを数えるストレージアダプターによるものです。ほかのライブラリーでも値を選択できます。restate では、選択することがそのまま値の読み方です。

03 — 安定

ストレージが失敗しても、データはそのまま。

状態が失われるのは保存のときです。遅いディスク、ブロックされたストレージ、閉じられたタブ。ここにあるのはアドバイスではなく、restate 1.0 の保証です。

障害ラボを開く信頼性ガイドを読む

01
保存は順番どおり
ストアはストレージ操作を 1 つずつ順に実行するので、遅い保存のせいで古い値が新しい値を上書きすることはありません。
save() · restore()
02
待機中の保存は最新の値を書く
別の保存がキューで待っている間に save() を呼ぶと、書き込みを積み増さずにその保存に合流します。
save(): Promise<T>
03
読み込めていないレコードを誤って上書きしない
レコードの読み込みに失敗した場合、autoSave と一括保存はそのレコードに手を付けず LOAD_FAILED を報告します。置き換えられるのは明示的な save() だけです。
LOAD_FAILED
04
アンマウントしても保存は完了する
アンマウント前に要求した保存は完了します。破棄されたストアへのその後の書き込みは、アンマウント後の React state と同じく無視されます。
useRestateScope
05
ストレージがなくてもアプリは起動する
サーバーレンダリング中やストレージがブロックされている場合、ストアはメモリ上で動き続け、ストレージが使えないことを知らせます。
status().available
06
エラーは「何が」「どこで」を伝える
restate のエラーにはすべて型付きのコードとレコードのキーが付いているので、適切なメッセージを表示できます。
error.code · error.key

アプリと一緒に育つ

変えるのは宣言だけ。コンポーネントはそのまま。

保存、自動保存、検証はすべて同じストアのオプションです。右側のコンポーネントは一切変わりません。

メモリ

メモリ上の共有値。

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

export const useDraft = restate('');

保存

自動で復元され、save() を呼んだときに書き込まれます。

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

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

自動保存

入力が 500 ms 止まった後に 1 回だけ書き込まれます。

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

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

検証付き

古いレコードは使う前にマイグレーションされ、検証されます。

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
サーバーレンダリング
コンポーネントが所有するストアは props からサーバースナップショットを受け取り、ハイドレーション後に読み込みを始めます。
index.d.ts
TypeScript
型定義を同梱。selector、ステータスのフィールド、エラーコードまで型が付きます。

はじめる

最初の共有状態を 1 分で。

インストールして、宣言して、使うだけ。保存はアプリが必要になったときに追加できます。

1 分ではじめるプレイグラウンドを開く

01
インストール
Terminal
```
npm install @kkwaenggwari/restate
```

ストアを宣言

export const useCart = restate({ items: 0, total: 0 });

03
どのコンポーネントからでも読む
JavaScript / JSX
```
const items = useCart((cart) => cart.items);
```

KKWAENGGWARI

プロジェクト

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

状態を共有。フックひとつ。以上。

レンダリングマップ

まとめられる書き込み

保存は順番どおり

待機中の保存は最新の値を書く

読み込めていないレコードを誤って上書きしない

アンマウントしても保存は完了する

ストレージがなくてもアプリは起動する

エラーは「何が」「どこで」を伝える

メモリ

保存

自動保存

検証付き

React

React Native

サーバーレンダリング

TypeScript

最初の共有状態を 1 分で。

プロジェクト