Állapot React és React Native alá · 1.0

Ossza meg az állapotot.Egy hook.Kész.

Deklaráljon egy store-t egy sorban, és használja bármelyik komponensben, Provider, action és reducer nélkül. Egy komponens csak akkor renderel újra, ha a kiválasztott értéke változik, a mentés pedig akkor történik, amikor eldönti.

Kezdés 1 perc alatt A játszótér megnyitása

npm install @kkwaenggwari/restate

Élő — egy valódi restate store

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

Az items és a total változik: három kártya renderel, az ajándékkártya mozdulatlan marad.

Egyszerű0Provider, action és reducer a beállításhozDeklaráljon egy értéket, és használja. Előre semmit nem kell bekötni.
Gyors11 → 1Tizenegy változás, egy írásAz autoSave szünetre vár, így tizenegy gyors változásból egyetlen írás lesz.
Stabil26Típusos hibakódokMinden hiba megmondja, mi romlott el, és melyik rekordot érinti.

01 — Egyszerű

Ugyanaz a funkció, kevesebb fogalom.

Ugyanannak a feladatnak négy megvalósítása egymás mellett. A számok az itt látható kódból származnak, és a webhely buildelésekor mérjük őket.

Feladat Megosztott számláló · Mező kiválasztása · Piszkozat mentése · Dokumentumonkénti állapot

Megosztott számláló

Két komponens olvassa és frissíti ugyanazt a számot.

Redux Toolkit A frissítéseket slice-okba és action-ökbe szervezi, amelyeket a React-kontextuson át biztosított store-nak küld. Kiváló DevTools és szigorú, kiszámítható frissítési folyamat nagy csapatoknak.

Zustand A create()-tel store-hookot hoz létre, és a setState-tel módosítja. Apró és rugalmas, perzisztencia- és DevTools-middleware-rel.

Jotai Atomokat és származtatott atomokat állít össze, igény szerint egy Provideren belül. Finom függőségek sok kis állapotdarab között.

Redux Toolkit29 sor · 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 sor · 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 sor · 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 Egyetlen deklaráció egyszerre store és hook.

restate13 sor · 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 />
    </>
  );
}

Ehhez a feladathoz a Zustand és a Jotai is kicsi és Provider nélküli. A különbség a mentéssel és a dokumentumonkénti állapottal nő.

Mező kiválasztása

A címkomponens ne rendereljen, ha csak a szöveg változik.

Zustand A create()-tel store-hookot hoz létre, és a setState-tel módosítja. Apró és rugalmas, perzisztencia- és DevTools-middleware-rel.

Jotai Atomokat és származtatott atomokat állít össze, igény szerint egy Provideren belül. Finom függőségek sok kis állapotdarab között.

Redux Toolkit26 sor · 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 sor · 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 sor · 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 Adjon át egy selectort ugyanannak a hooknak, amelyet már használ.

restate17 sor · 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>
    </>
  );
}

Itt minden eszköz tud kiválasztani. A restate ugyanazt a hookhívást használja külön selector-hook vagy származtatott atom helyett.

Piszkozat mentése

Induláskor állítsa helyre a mentett piszkozatot, kattintásra mentse, és jelenítse meg a mentés folyamatban, nem mentett és sikertelen állapotokat.

Zustand A create()-tel store-hookot hoz létre, és a setState-tel módosítja. Apró és rugalmas, perzisztencia- és DevTools-middleware-rel.

Jotai Atomokat és származtatott atomokat állít össze, igény szerint egy Provideren belül. Finom függőségek sok kis állapotdarab között.

Redux Toolkit84 sor · 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 sor · 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 sor · 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 A persistedRestate automatikusan helyreállít, a useStatus pedig jelzi a mentést, a nem mentett változásokat és a hibákat.

restate18 sor · 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>
    </>
  );
}

A többi változat kézzel írja meg ugyanazt az IndexedDB-kódot. A perzisztencia-middleware-ük vagy tárolóeszközeik egy adapterrel lerövidíthetik; ezt a kódot itt nem számoljuk.

Dokumentumonkénti állapot

Két dokumentum független állapotot tárol, és az egyik bezárása felszabadítja azt.

Zustand A create()-tel store-hookot hoz létre, és a setState-tel módosítja. Apró és rugalmas, perzisztencia- és DevTools-middleware-rel.

Jotai Atomokat és származtatott atomokat állít össze, igény szerint egy Provideren belül. Finom függőségek sok kis állapotdarab között.

Redux Toolkit42 sor · 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 sor · 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 sor · 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 A useRestateScope létrehozza a store-okat, és leválasztás után megsemmisíti őket.

restate27 sor · 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" />
    </>
  );
}

A Jotaiban egy Provider vagy store, a Zustandban pedig a vanilla store-ok is el tudják különíteni az állapotot; ezeket Ön hozza létre és köti be.

Hogyan számoljuk ezeket a számokat

A megjelenített kód nem üres sorai és az egyes állapotkönyvtárakból importált nevek (a React importjait nem számoljuk). Minden változat ugyanazt a UI-t rendereli ugyanazzal a tárolóval, ugyanazokkal a betöltési és hibaállapotokkal. A restate-példák feltételezik az await restateManager.ready lépést az alkalmazás belépési pontjában. A forrásokat az egyes projektek hivatalos dokumentációjával ellenőriztük:

Redux Toolkit — Redux Toolkit · Quick Start, React Redux · useSelector, Redux Toolkit · configureStore. Akkor válassza, ha egy auditálható action-napló és egy nagy middleware-ökoszisztéma a legfontosabb
Zustand — Zustand · Introduction, Zustand · persist. Akkor válassza, ha a lehető legkisebb magot szeretné, és szívesebben rak össze middleware-t
Jotai — Jotai · atom, Jotai · Storage, Jotai · Provider. Akkor válassza, ha az állapota természeténél fogva kis származtatott értékek gráfja

02 — Gyors

Csak a változást renderelje. Írjon egyszer.

Mindkét panel a valódi restate csomagot futtatja a böngészőjében. Kattintson, gépeljen, és figyelje a számlálókat.

Renderelési térkép

Ugyanaz a négy mező, kétféleképpen olvasva. Módosítson egy mezőt, és számolja a rendereléseket.

A teljes store-t olvassa

Név
Téma
Számláló
Piszkozat

Egy mezőt választ ki

Név
Téma
Számláló
Piszkozat

Összevont írások

Az autoSave szünetet vár a gépelésben, majd egyszer ír. A save() hívások sorozata egyetlen sorban álló írást oszt meg.

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

A számok valódi React-renderelésekből és egy, az írásokat ezen az oldalon számoló tárolóadapterből származnak. Más könyvtárak is tudnak értéket kiválasztani; itt a kiválasztás csak az olvasás módja.

03 — Stabil

Ha a tároló meghibásodik, az adatai a helyükön maradnak.

Az állapot éppen mentéskor vész el: lassú lemez, letiltott tároló, bezárt fül. Ezek a restate 1.0 garanciái, nem tanácsok.

A hibalabor megnyitása A megbízhatósági útmutató olvasása

01
A mentések sorrendben futnak
Minden store egyenként hajtja végre a tárolóműveleteket, így egy lassú mentés soha nem engedi, hogy egy régi érték felülírjon egy újabbat.
save() · restore()
02
A várakozó mentés a legújabb értéket veszi át
Ha egy másik mentés sorban áll, a save() hívás csatlakozik hozzá ahelyett, hogy további írásokat halmozna.
save(): Promise<T>
03
A beolvasatlan rekordokat soha nem írja felül véletlenül
Ha egy rekord nem töltődött be, az autoSave és a tömeges mentések nem nyúlnak hozzá, és LOAD_FAILED hibát jeleznek. Csak egy kifejezett save() cserélheti le.
LOAD_FAILED
04
A mentés leválasztás után is befejeződik
A leválasztás előtt kért mentések befejeződnek. A megsemmisített store-ba később érkező írásokat figyelmen kívül hagyja, mint a React-állapotot leválasztás után.
useRestateScope
05
Nincs tároló? Az alkalmazás akkor is elindul
Szerveroldali renderelés közben vagy letiltott tároló esetén a store-ok tovább működnek a memóriában, és jelzik, hogy a tároló nem érhető el.
status().available
06
A hibák megmondják, mi és hol
Minden restate-hiba típusos kódot és a rekord key-ét hordozza, így a megfelelő üzenetet jelenítheti meg.
error.code · error.key

Együtt nő az alkalmazással

A deklarációt módosítsa. A komponensek maradnak.

A mentés, az automatikus mentés és az ellenőrzés ugyanannak a store-nak a beállításai. A jobb oldali komponens soha nem változik.

Memória

Megosztott érték a memóriában.

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

export const useDraft = restate('');

Mentett

Automatikusan helyreáll; a save() hívásakor íródik ki.

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

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

Automatikus mentés

A gépelés 500 ms-os szünete után egyszer íródik ki.

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

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

Ellenőrzött

A régebbi rekordokat használat előtt migráljuk és ellenőrizzük.

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',
});

Komponens — minden lépésben ugyanaz

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

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

Mindenhol fut, ahol a React fut

Egy csomag minden React-környezethez.

react >=16.8.0
React
React 16.8 és újabb verziókkal működik, böngészőben és szerveroldali renderelés közben is.
react-native-mmkv >=2.0.0
React Native
Ugyanazok az importok. A mentés MMKV-t használ, amint telepíti a react-native-mmkv csomagot.
SSR
Szerveroldali renderelés
A komponensek store-jai a props-ból veszik a szerver pillanatképét, és a hidratálás után kezdik a betöltést.
index.d.ts
TypeScript
A deklarációk a csomag részei. A selectorok, az állapotmezők és a hibakódok típusosak.

Első lépések

Az első megosztott állapota egy perc alatt.

Telepítse, deklarálja, használja. A mentést akkor adja hozzá, amikor az alkalmazásnak szüksége van rá.

Kezdés 1 perc alatt A játszótér megnyitása

01
Telepítés
Terminal
```
npm install @kkwaenggwari/restate
```

Deklaráljon egy store-t

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

03
Olvassa bármelyik komponensben
JavaScript / JSX
```
const items = useCart((cart) => cart.items);
```

KKWAENGGWARI

Projektek

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

Ossza meg az állapotot.Egy hook.Kész.

Renderelési térkép

Összevont írások

A mentések sorrendben futnak

A várakozó mentés a legújabb értéket veszi át

A beolvasatlan rekordokat soha nem írja felül véletlenül

A mentés leválasztás után is befejeződik

Nincs tároló? Az alkalmazás akkor is elindul

A hibák megmondják, mi és hol

Memória

Mentett

Automatikus mentés

Ellenőrzött

React

React Native

Szerveroldali renderelés

TypeScript

Az első megosztott állapota egy perc alatt.

Projektek