Stanje za React i React Native · 1.0

Dijelite stanje.Jedan hook.Gotovo.

Deklarirajte store u jednom retku i koristite ga u bilo kojoj komponenti, bez Providera, actiona i reducera. Komponenta se ponovno renderira samo kad se promijeni vrijednost koju je odabrala, a spremanje se događa kad vi odlučite.

Započnite za 1 minutu Otvori igralište

npm install @kkwaenggwari/restate

Uživo — pravi restate store

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

Mijenjaju se items i total: renderiraju se tri kartice, čestitka ostaje mirna.

Jednostavno0Provider, actioni i reduceri za postavljanjeDeklarirajte vrijednost i koristite je. Ništa ne treba unaprijed povezivati.
Brzo11 → 1Jedanaest izmjena, jedan zapisautoSave čeka stanku, pa jedanaest brzih izmjena postaje jedan zapis.
Stabilno26Tipizirani kodovi pogrešakaSvaka pogreška kaže što je pošlo po zlu i kojeg se zapisa tiče.

01 — Jednostavno

Ista funkcionalnost, manje pojmova.

Četiri implementacije istog zadatka jedna uz drugu. Brojevi dolaze iz ovdje prikazanog koda i mjere se pri izgradnji ove stranice.

Zadatak Dijeljeni brojač · Odabir polja · Spremanje skice · Stanje za svaki dokument

Dijeljeni brojač

Dvije komponente čitaju i ažuriraju isti broj.

Redux Toolkit Organizira ažuriranja u sliceove i actione poslane storeu dostupnom kroz Reactov kontekst. Izvrsni DevTools i strog, predvidljiv tok ažuriranja za velike timove.

Zustand Stvara hook storea pomoću create() i mijenja ga pomoću setState. Sićušan i fleksibilan, s middlewareom za trajnost i DevTools.

Jotai Slaže atome i izvedene atome, po želji unutar Providera. Fine ovisnosti između mnogo malih komadića stanja.

Redux Toolkit29 redaka · 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 redaka · 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 redaka · 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 Jedna deklaracija istodobno je store i hook.

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

Za ovaj zadatak i Zustand i Jotai su mali i bez Providera. Razlika raste kad se dodaju spremanje i stanje za svaki dokument.

Odabir polja

Komponenta naslova ne bi se trebala renderirati kad se promijeni samo tekst.

Redux Toolkit Organizira ažuriranja u sliceove i actione poslane storeu dostupnom kroz Reactov kontekst. Izvrsni DevTools i strog, predvidljiv tok ažuriranja za velike timove.

Zustand Stvara hook storea pomoću create() i mijenja ga pomoću setState. Sićušan i fleksibilan, s middlewareom za trajnost i DevTools.

Jotai Slaže atome i izvedene atome, po želji unutar Providera. Fine ovisnosti između mnogo malih komadića stanja.

Redux Toolkit26 redaka · 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 redaka · 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 redaka · 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 Predajte selector istom hooku koji već koristite.

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

Svi alati ovdje znaju odabirati. restate koristi isti poziv hooka umjesto zasebnog hooka za selector ili izvedenog atoma.

Spremanje skice

Pri pokretanju vratite spremljenu skicu, spremite na klik i prikažite stanja spremanja, nespremljenog i neuspjeha.

Redux Toolkit Organizira ažuriranja u sliceove i actione poslane storeu dostupnom kroz Reactov kontekst. Izvrsni DevTools i strog, predvidljiv tok ažuriranja za velike timove.

Zustand Stvara hook storea pomoću create() i mijenja ga pomoću setState. Sićušan i fleksibilan, s middlewareom za trajnost i DevTools.

Jotai Slaže atome i izvedene atome, po želji unutar Providera. Fine ovisnosti između mnogo malih komadića stanja.

Redux Toolkit84 redaka · 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 redaka · 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 redaka · 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 vraća automatski, a useStatus javlja spremanje, nespremljene izmjene i pogreške.

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

Druge verzije isti kod za IndexedDB pišu ručno. Njihov middleware za trajnost ili alati spremišta mogu ga skratiti adapterom; taj kod ovdje se ne broji.

Stanje za svaki dokument

Dva dokumenta drže neovisno stanje, a zatvaranje jednoga ga oslobađa.

Redux Toolkit Organizira ažuriranja u sliceove i actione poslane storeu dostupnom kroz Reactov kontekst. Izvrsni DevTools i strog, predvidljiv tok ažuriranja za velike timove.

Zustand Stvara hook storea pomoću create() i mijenja ga pomoću setState. Sićušan i fleksibilan, s middlewareom za trajnost i DevTools.

Jotai Slaže atome i izvedene atome, po želji unutar Providera. Fine ovisnosti između mnogo malih komadića stanja.

Redux Toolkit42 redaka · 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 redaka · 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 redaka · 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 stvara storeove i uništava ih nakon demontiranja.

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

Provider ili store u Jotaiju i vanilla storeovi u Zustandu također mogu izolirati stanje; stvarate ih i povezujete sami.

Kako se ovi brojevi broje

Neprazni retci prikazanog koda i imena uvezena iz svake biblioteke stanja (Reactovi importi se ne broje). Svaka verzija renderira isti UI s istim spremištem i istim stanjima učitavanja i pogreške. Primjeri restate pretpostavljaju await restateManager.ready u ulaznoj točki aplikacije. Izvori su provjereni prema službenoj dokumentaciji svakog projekta:

Redux Toolkit — Redux Toolkit · Quick Start, React Redux · useSelector, Redux Toolkit · configureStore. Odaberite ga kad su najvažniji jedinstveni provjerljivi zapis actiona i velik ekosustav middlewarea
Zustand — Zustand · Introduction, Zustand · persist. Odaberite ga kad želite najmanju moguću jezgru i radije slažete middleware
Jotai — Jotai · atom, Jotai · Storage, Jotai · Provider. Odaberite ga kad je vaše stanje po prirodi graf malih izvedenih vrijednosti

02 — Brzo

Renderirajte samo promijenjeno. Zapisujte jednom.

Obje ploče pokreću pravi paket restate u vašem pregledniku. Klikajte, tipkajte i pratite brojače.

Karta renderiranja

Ista četiri polja pročitana na dva načina. Promijenite polje i brojite renderiranja.

Čita cijeli store

Ime
Tema
Brojač
Skica

Odabire jedno polje

Ime
Tema
Brojač
Skica

Spojeni zapisi

autoSave čeka stanku u tipkanju i zatim zapisuje jednom. Niz poziva save() dijeli jedan zapis u redu čekanja.

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

Brojevi dolaze iz pravih Reactovih renderiranja i adaptera spremišta koji broji zapise na ovoj stranici. I druge biblioteke mogu odabirati vrijednosti; ovdje je odabir jednostavno način čitanja.

03 — Stabilno

Kad spremište zakaže, vaši podaci ostaju gdje jesu.

Stanje se gubi upravo pri spremanju: spori diskovi, blokirano spremište, zatvorene kartice. Ovo su jamstva restate 1.0, a ne savjeti.

Otvori laboratorij kvarova Pročitajte vodič o pouzdanosti

01
Spremanja se odvijaju redom
Svaki store izvodi operacije sa spremištem jednu za drugom, pa sporo spremanje nikad ne dopušta staroj vrijednosti da prepiše noviju.
save() · restore()
02
Spremanje na čekanju uzima najnoviju vrijednost
Poziv save() dok drugo spremanje čeka u redu pridružuje mu se umjesto da gomila dodatne zapise.
save(): Promise<T>
03
Nepročitani zapisi nikad se ne prepisuju slučajno
Ako se zapis nije učitao, autoSave i skupna spremanja ga ne diraju i javljaju LOAD_FAILED. Zamijeniti ga može samo izričiti save().
LOAD_FAILED
04
Čak i nakon demontiranja spremanje se dovršava
Spremanja zatražena prije demontiranja se dovršavaju. Kasniji zapisi u uništeni store zanemaruju se, kao i Reactovo stanje nakon demontiranja.
useRestateScope
05
Nema spremišta? Aplikacija se ipak pokreće
Tijekom renderiranja na poslužitelju ili s blokiranim spremištem storeovi nastavljaju raditi u memoriji i javljaju da spremište nije dostupno.
status().available
06
Pogreške kažu što i gdje
Svaka restate pogreška nosi tipizirani kod i ključ svog zapisa, pa možete prikazati pravu poruku.
error.code · error.key

Raste s vašom aplikacijom

Promijenite deklaraciju. Zadržite komponente.

Spremanje, automatsko spremanje i validacija opcije su istog storea. Komponenta desno nikad se ne mijenja.

Memorija

Dijeljena vrijednost u memoriji.

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

export const useDraft = restate('');

Spremljen

Automatski se vraća; zapisuje se kad pozovete save().

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

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

Automatsko spremanje

Zapisuje se jednom nakon stanke u tipkanju od 500 ms.

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

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

S validacijom

Stariji zapisi migriraju se i provjeravaju prije upotrebe.

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

Komponenta — ista u svakom koraku

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

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

Radi gdje radi React

Jedan paket za svako React okruženje.

react >=16.8.0
React
Radi s Reactom 16.8 i novijim, u pregledniku i tijekom renderiranja na poslužitelju.
react-native-mmkv >=2.0.0
React Native
Isti importi. Spremanje koristi MMKV čim instalirate react-native-mmkv.
SSR
Renderiranje na poslužitelju
Storeovi komponente uzimaju snimku s poslužitelja iz props i počinju učitavanje nakon hidratacije.
index.d.ts
TypeScript
Deklaracije su uključene. Selektori, polja statusa i kodovi pogrešaka su tipizirani.

Početak

Vaše prvo dijeljeno stanje za minutu.

Instalirajte, deklarirajte, koristite. Dodajte spremanje kad ga aplikacija zatreba.

Započnite za 1 minutu Otvori igralište

01
Instalacija
Terminal
```
npm install @kkwaenggwari/restate
```

Deklarirajte store

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

03
Čitajte ga u bilo kojoj komponenti
JavaScript / JSX
```
const items = useCart((cart) => cart.items);
```

KKWAENGGWARI

Projekti

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

Dijelite stanje.Jedan hook.Gotovo.

Karta renderiranja

Spojeni zapisi

Spremanja se odvijaju redom

Spremanje na čekanju uzima najnoviju vrijednost

Nepročitani zapisi nikad se ne prepisuju slučajno

Čak i nakon demontiranja spremanje se dovršava

Nema spremišta? Aplikacija se ipak pokreće

Pogreške kažu što i gdje

Memorija

Spremljen

Automatsko spremanje

S validacijom

React

React Native

Renderiranje na poslužitelju

TypeScript

Vaše prvo dijeljeno stanje za minutu.

Projekti