restate / v1.0.0
Empezar
Instala restate, comparte tu primer valor entre componentes y usa el mismo store fuera de React.
En esta página
InstalarTu primer estado compartidoActualizar el valorÚsalo fuera de ReactTypeScriptReact NativeUna sola declaración en todas las plataformasInstalar
restate funciona con React 16.8 y posteriores. Incluye declaraciones de TypeScript y no tiene otras dependencias en tiempo de ejecución.
npm install @kkwaenggwari/restateTu primer estado compartido
Crea el store una vez, fuera de tus componentes. Lo que devuelve restate es a la vez un hook y un objeto con métodos como set y get.
Entre Editor y CharacterCount no hay props ni Provider. Escribir en uno actualiza el otro.
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>;
}Actualizar el valor
set acepta un valor nuevo o una función del valor anterior. reset vuelve al valor que declaraste.
Trata el valor como inmutable: devuelve un objeto o array nuevo en lugar de modificar el anterior, para que los selectores vean el cambio.
Haces push en cart.items y llamas a useCart.set(cart). ¿Por qué no se vuelve a renderizar nada?
El store recibe el mismo objeto y Object.is no detecta ningún cambio. Devuelve un objeto nuevo, por ejemplo 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Úsalo fuera de React
El mismo store funciona en manejadores de eventos, servicios y tests. get lee el valor actual, y subscribe te llama tras cada cambio y devuelve una función que deja de escuchar.
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
Pasa el tipo del estado una vez. Los selectores, set y todos los métodos se tipan a partir de é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
Los stores en memoria no necesitan nada más en React Native. Para guardar estado, instala react-native-mmkv; la entrada de React Native lo carga automáticamente.
En proyectos bare, ejecuta pod install para iOS después de instalar. En Expo, usa una development build, porque MMKV es un módulo nativo.
npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modulesUna sola declaración en todas las plataformas
Un store guardado usa IndexedDB en el navegador y MMKV en React Native. La declaración y tus componentes no cambian.
import { persistedRestate } from '@kkwaenggwari/restate';
// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });