restate / v1.0.0
Bien démarrer
Installez restate, partagez votre première valeur entre composants et utilisez le même store en dehors de React.
Sur cette page
InstallerVotre premier état partagéMettre à jour la valeurL’utiliser en dehors de ReactTypeScriptReact NativeUne seule déclaration sur toutes les plateformesInstaller
restate fonctionne avec React 16.8 et versions ultérieures. Les déclarations TypeScript sont incluses et il n’y a aucune autre dépendance à l’exécution.
npm install @kkwaenggwari/restateVotre premier état partagé
Créez le store une fois, en dehors de vos composants. La valeur renvoyée par restate est à la fois un hook et un objet doté de méthodes comme set et get.
Editor et CharacterCount n’ont ni props ni Provider entre eux. Taper dans l’un met à jour l’autre.
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>;
}Mettre à jour la valeur
set accepte une nouvelle valeur ou une fonction de la valeur précédente. reset revient à la valeur déclarée.
Traitez la valeur comme immuable : renvoyez un nouvel objet ou tableau au lieu de modifier l’ancien, pour que les sélecteurs voient le changement.
Vous faites un push dans cart.items puis appelez useCart.set(cart). Pourquoi rien ne se re-rend ?
Le store reçoit le même objet et Object.is ne détecte aucun changement. Renvoyez un nouvel objet, par exemple 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 valueL’utiliser en dehors de React
Le même store fonctionne dans les gestionnaires d’événements, les services et les tests. get lit la valeur actuelle, et subscribe vous appelle après chaque changement et renvoie une fonction qui arrête l’écoute.
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
Passez le type de l’état une seule fois. Les sélecteurs, set et toutes les méthodes en tirent leur typage.
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
Les stores en mémoire n’ont besoin de rien d’autre sur React Native. Pour enregistrer l’état, installez react-native-mmkv ; le point d’entrée React Native le charge automatiquement.
Pour les projets bare, lancez pod install pour iOS après l’installation. Avec Expo, utilisez un development build, car MMKV est un module natif.
npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modulesUne seule déclaration sur toutes les plateformes
Un store enregistré utilise IndexedDB dans le navigateur et MMKV sur React Native. La déclaration et vos composants restent identiques.
import { persistedRestate } from '@kkwaenggwari/restate';
// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });