restate / v1.0.0

Inizia

Installa restate, condividi il tuo primo valore tra componenti e usa lo stesso store fuori da React.

In questa pagina

Installa Il tuo primo stato condiviso Aggiorna il valore Usalo fuori da React TypeScript React Native Una dichiarazione su ogni piattaforma

Installa

restate funziona con React 16.8 e successivi. Le dichiarazioni TypeScript sono incluse e non ci sono altre dipendenze a runtime.

npm install @kkwaenggwari/restate

Il tuo primo stato condiviso

Crea lo store una volta, fuori dai componenti. Il valore che restituisce restate è sia un hook sia un oggetto con metodi come set e get.

Tra Editor e CharacterCount non ci sono né props né Provider. Scrivere in uno aggiorna l’altro.

Che cosa vedi

type "Hi"
Editor          → Hi
CharacterCount  → 2 characters

Entrambi i componenti leggono lo stesso store. Il conteggio si ri-renderizza solo quando cambia la lunghezza, perché seleziona 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>;
}

Aggiorna il valore

set accetta un nuovo valore o una funzione del valore precedente. reset torna al valore che hai dichiarato.

Tratta il valore come immutabile: restituisci un nuovo oggetto o array invece di modificare quello vecchio, così i selettori vedono il cambiamento.

Fai push in cart.items e chiami useCart.set(cart). Perché non si ri-renderizza nulla?

Lo store riceve lo stesso oggetto e Object.is non vede cambiamenti. Restituisci un nuovo oggetto, per esempio 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

Usalo fuori da React

Lo stesso store funziona in event handler, servizi e test. get legge il valore attuale, e subscribe ti chiama dopo ogni modifica e restituisce una funzione che smette di ascoltare.

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

Passa il tipo dello stato una volta. Selettori, set e ogni metodo vengono tipizzati da lì.

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

Gli store in memoria non richiedono altro su React Native. Per salvare lo stato, installa react-native-mmkv; l’entry point di React Native lo carica in automatico.

Nei progetti bare, dopo l’installazione esegui pod install per iOS. In Expo usa una development build, perché MMKV è un modulo nativo.

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

Una dichiarazione su ogni piattaforma

Uno store salvato usa IndexedDB nel browser e MMKV su React Native. La dichiarazione e i tuoi componenti restano uguali.

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

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

Scritto per l’API di restate 1.0