restate / v1.0.0

Começar

Instale o restate, compartilhe seu primeiro valor entre componentes e use o mesmo store fora do React.

Nesta página

Instalar Seu primeiro estado compartilhado Atualizar o valor Usar fora do React TypeScript React Native Uma declaração em todas as plataformas

Instalar

O restate funciona com React 16.8 ou superior. Traz declarações TypeScript e não tem outras dependências em tempo de execução.

npm install @kkwaenggwari/restate

Seu primeiro estado compartilhado

Crie o store uma vez, fora dos componentes. O valor que restate retorna é ao mesmo tempo um hook e um objeto com métodos como set e get.

Entre Editor e CharacterCount não há props nem Provider. Digitar em um atualiza o outro.

O que você vê

type "Hi"
Editor          → Hi
CharacterCount  → 2 characters

Os dois componentes leem o mesmo store. A contagem só renderiza de novo quando o tamanho muda, porque ela seleciona 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>;
}

Atualizar o valor

set aceita um valor novo ou uma função do valor anterior. reset volta ao valor que você declarou.

Trate o valor como imutável: retorne um objeto ou array novo em vez de alterar o antigo, para que os seletores percebam a mudança.

Você faz push em cart.items e chama useCart.set(cart). Por que nada renderiza de novo?

O store recebe o mesmo objeto, e Object.is não vê mudança. Retorne um objeto novo, por exemplo 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

Usar fora do React

O mesmo store funciona em handlers de eventos, serviços e testes. get lê o valor atual, e subscribe chama você depois de cada mudança e retorna uma função que para de escutar.

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

Passe o tipo do estado uma vez. Os seletores, set e todos os métodos são tipados a partir dele.

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

Stores em memória não precisam de mais nada no React Native. Para salvar estado, instale react-native-mmkv; a entrada de React Native carrega o pacote automaticamente.

Em projetos bare, rode pod install para iOS depois de instalar. No Expo, use uma development build, porque MMKV é um módulo nativo.

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

Uma declaração em todas as plataformas

Um store salvo usa IndexedDB no navegador e MMKV no React Native. A declaração e seus componentes continuam iguais.

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

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

Escrito para a API do restate 1.0