restate / v1.0.0
ప్రారంభం
restate ఇన్స్టాల్ చేసి, మొదటి విలువను కాంపోనెంట్ల మధ్య పంచుకుని, అదే స్టోర్ను React బయట వాడండి.
ఈ పేజీలో
ఇన్స్టాలేషన్మీ మొదటి పంచుకున్న స్టేట్విలువను నవీకరించడంReact బయట వాడకంTypeScriptReact Nativeఅన్ని ప్లాట్ఫారమ్లలో ఒకే డిక్లరేషన్ఇన్స్టాలేషన్
restate React 16.8 మరియు కొత్త వెర్షన్లతో పనిచేస్తుంది. TypeScript డిక్లరేషన్లు కలిసి వస్తాయి; ఇతర రన్టైమ్ ఆధారాలు లేవు.
npm install @kkwaenggwari/restateమీ మొదటి పంచుకున్న స్టేట్
కాంపోనెంట్ల బయట ఒకసారి స్టోర్ సృష్టించండి. restate ఇచ్చే విలువ ఒక హుక్, set, get వంటి మెథడ్లు కలిగిన ఆబ్జెక్ట్ కూడా.
Editor, CharacterCount మధ్య props గానీ Provider గానీ లేవు. ఒకదానిలో టైప్ చేస్తే మరొకటి నవీకరించబడుతుంది.
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>;
}విలువను నవీకరించడం
set కొత్త విలువను లేదా మునుపటి విలువ యొక్క ఫంక్షన్ను స్వీకరిస్తుంది. reset మీరు ప్రకటించిన విలువకు తిరిగి వెళ్తుంది.
విలువను మార్చలేనిదిగా భావించండి: పాతదాన్ని మార్చే బదులు కొత్త ఆబ్జెక్ట్ లేదా అరే ఇవ్వండి, అప్పుడే సెలెక్టర్లు మార్పును చూస్తాయి.
pushతో cart.items-కి ఒక వస్తువు జోడించి useCart.set(cart) కాల్ చేశారు. ఎందుకు ఏదీ రెండర్ కాలేదు?
స్టోర్ అదే ఆబ్జెక్ట్ను పొందుతుంది; Object.is ఏ మార్పునూ చూడదు. కొత్త ఆబ్జెక్ట్ ఇవ్వండి, ఉదాహరణకు 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 valueReact బయట వాడకం
అదే స్టోర్ ఈవెంట్ హ్యాండ్లర్లు, సర్వీసులు, టెస్టులలో పనిచేస్తుంది. get ప్రస్తుత విలువను చదువుతుంది; subscribe ప్రతి మార్పు తర్వాత మిమ్మల్ని కాల్ చేసి, వినడం ఆపే ఫంక్షన్ను ఇస్తుంది.
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
స్టేట్ టైప్ను ఒకసారి ఇవ్వండి. సెలెక్టర్లు, set, ప్రతి మెథడ్ దాని నుండి టైప్లను పొందుతాయి.
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
React Native-లో మెమరీ స్టోర్లకు ఇంకేమీ అవసరం లేదు. స్టేట్ సేవ్ చేయడానికి react-native-mmkv ఇన్స్టాల్ చేయండి; React Native ఎంట్రీ పాయింట్ దాన్ని స్వయంచాలకంగా లోడ్ చేస్తుంది.
bare ప్రాజెక్టులలో ఇన్స్టాలేషన్ తర్వాత iOS కోసం pod install రన్ చేయండి. Expo-లో development build వాడండి, ఎందుకంటే MMKV నేటివ్ మాడ్యూల్.
npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modulesఅన్ని ప్లాట్ఫారమ్లలో ఒకే డిక్లరేషన్
సేవ్ అయ్యే స్టోర్ బ్రౌజర్లో IndexedDB-ని, React Native-లో MMKV-ని వాడుతుంది. డిక్లరేషన్, మీ కాంపోనెంట్లు అలాగే ఉంటాయి.
import { persistedRestate } from '@kkwaenggwari/restate';
// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });