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 → 111 次编辑，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 获取服务端快照，并在水合后开始加载。

  • 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关闭