restate / v1.0.0

Zacznij

Zainstaluj restate, udostępnij pierwszą wartość między komponentami i używaj tego samego magazynu poza React.

Na tej stronie

Instalacja Twój pierwszy wspólny stan Aktualizuj wartość Użycie poza React TypeScript React Native Jedna deklaracja na każdej platformie

Instalacja

restate działa z React 16.8 i nowszym. Deklaracje TypeScript są w zestawie i nie ma innych zależności w czasie działania.

npm install @kkwaenggwari/restate

Twój pierwszy wspólny stan

Utwórz magazyn raz, poza komponentami. Wartość zwracana przez restate jest jednocześnie hookiem i obiektem z metodami takimi jak set i get.

Między Editor i CharacterCount nie ma ani props, ani Providera. Pisanie w jednym aktualizuje drugi.

Co widzisz

type "Hi"
Editor          → Hi
CharacterCount  → 2 characters

Oba komponenty odczytują ten sam magazyn. Licznik renderuje się tylko przy zmianie długości, bo wybiera text.length.

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

export const useDraft = restate('');

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

export function CharacterCount() {
  const count = useDraft((text) => text.length);
  return <span>{count} characters</span>;
}

Aktualizuj wartość

set przyjmuje nową wartość lub funkcję poprzedniej. reset wraca do zadeklarowanej wartości.

Traktuj wartość jako niezmienną: zwracaj nowy obiekt lub tablicę zamiast modyfikować stare, żeby selektory zobaczyły zmianę.

Robisz push do cart.items i wywołujesz useCart.set(cart). Dlaczego nic się nie renderuje?

Magazyn dostaje ten sam obiekt i Object.is nie widzi zmiany. Zwróć nowy obiekt, na przykład useCart.set(cart => ({ ...cart, items: [...cart.items, item] })).

useCount.set(10); // replace the value
useCount.set((count) => count + 1); // compute from the previous value
useCount.reset(); // back to the declared initial value

Użycie poza React

Ten sam magazyn działa w obsłudze zdarzeń, usługach i testach. get odczytuje bieżącą wartość, a subscribe wywołuje cię po każdej zmianie i zwraca funkcję kończącą nasłuch.

import { useCart } from './stores/cart';

// Any module, event handler or test can use the same store.
const current = useCart.get();
useCart.set((cart) => ({ ...cart, items: [...cart.items, 'Pen'] }));

const stop = useCart.subscribe((cart, previous) => {
  console.log(previous.items.length, '→', cart.items.length);
});
stop();

TypeScript

Przekaż typ stanu raz. Selektory, set i każda metoda dostają typy z niego.

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

type Cart = { items: string[]; coupon: string };

export const useCart = restate<Cart>({ items: [], coupon: '' });

const count = useCart((cart) => cart.items.length); // number
useCart.set((cart) => ({ ...cart, coupon: 'SPRING' }));

React Native

Magazyny w pamięci nie potrzebują w React Native niczego więcej. Aby zapisywać stan, zainstaluj react-native-mmkv; punkt wejścia React Native wczyta go automatycznie.

W projektach bare po instalacji uruchom pod install dla iOS. W Expo użyj development build, bo MMKV to moduł natywny.

npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modules

Jedna deklaracja na każdej platformie

Zapisywany magazyn używa IndexedDB w przeglądarce i MMKV w React Native. Deklaracja i twoje komponenty pozostają takie same.

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

// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });

Napisane dla API restate 1.0