restate / v1.0.0

Pirmieji žingsniai

Įdiekite restate, bendrinkite pirmąją reikšmę tarp komponentų ir naudokite tą patį store už React ribų.

Šiame puslapyje

Diegimas Jūsų pirmoji bendra būsena Reikšmės atnaujinimas Naudojimas už React ribų TypeScript React Native Vienas aprašas visose platformose

Diegimas

restate veikia su React 16.8 ir naujesnėmis versijomis. TypeScript deklaracijos pridėtos, kitų vykdymo priklausomybių nėra.

npm install @kkwaenggwari/restate

Jūsų pirmoji bendra būsena

Sukurkite store vieną kartą, už komponentų ribų. restate grąžinama reikšmė yra ir hook, ir objektas su metodais, tokiais kaip set ir get.

Tarp Editor ir CharacterCount nėra nei props, nei Provider. Rašymas viename atnaujina kitą.

Ką matote

type "Hi"
Editor          → Hi
CharacterCount  → 2 characters

Abu komponentai skaito tą patį store. Skaitiklis perpiešiamas tik pasikeitus ilgiui, nes jis pasirenka 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>;
}

Reikšmės atnaujinimas

set priima naują reikšmę arba ankstesnės reikšmės funkciją. reset grąžina jūsų aprašytą reikšmę.

Laikykite reikšmę nekintama: grąžinkite naują objektą ar masyvą, o ne keiskite senąjį, kad selektoriai pamatytų pakeitimą.

Su push pridedate elementą į cart.items ir iškviečiate useCart.set(cart). Kodėl niekas neperpiešiama?

Store gauna tą patį objektą, ir Object.is nemato pakeitimo. Grąžinkite naują objektą, pavyzdžiui, 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

Tas pats store veikia įvykių apdorojimo funkcijose, paslaugose ir testuose. get perskaito dabartinę reikšmę, o subscribe iškviečia jus po kiekvieno pakeitimo ir grąžina funkciją, kuri nustoja klausytis.

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

Būsenos tipą nurodykite vieną kartą. Selektoriai, set ir kiekvienas metodas tipus gauna iš jo.

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

Atminties store React Native nereikia nieko daugiau. Norėdami išsaugoti būseną, įdiekite react-native-mmkv; React Native įėjimo taškas jį įkelia automatiškai.

Bare projektuose po diegimo paleiskite pod install iOS. Expo naudokite development build, nes MMKV yra vietinis modulis.

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

Vienas aprašas visose platformose

Išsaugotas store naršyklėje naudoja IndexedDB, o React Native – MMKV. Aprašas ir jūsų komponentai lieka tie patys.

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

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

Parašyta restate 1.0 API