restate / v1.0.0

தொடக்கம்

restate-ஐ நிறுவி, முதல் மதிப்பைக் கம்போனென்ட்களிடையே பகிர்ந்து, அதே ஸ்டோரை React-க்கு வெளியே பயன்படுத்துங்கள்.

இந்தப் பக்கத்தில்நிறுவுதல்உங்கள் முதல் பகிரப்பட்ட ஸ்டேட்மதிப்பைப் புதுப்பித்தல்React-க்கு வெளியே பயன்பாடுTypeScriptReact Nativeஎல்லாத் தளங்களிலும் ஒரே அறிவிப்பு

நிறுவுதல்

restate React 16.8 மற்றும் புதிய பதிப்புகளுடன் இயங்கும். TypeScript அறிவிப்புகள் உடன் வருகின்றன; வேறு இயக்கநேரச் சார்புகள் இல்லை.

Terminal
npm install @kkwaenggwari/restate

உங்கள் முதல் பகிரப்பட்ட ஸ்டேட்

கம்போனென்ட்களுக்கு வெளியே ஒருமுறை ஸ்டோரை உருவாக்குங்கள். restate தரும் மதிப்பு ஒரு ஹூக்கும், set, get போன்ற மெத்தட்கள் கொண்ட ஆப்ஜெக்டும் ஆகும்.

Editor-க்கும் CharacterCount-க்கும் இடையே props-உம் இல்லை, Provider-உம் இல்லை. ஒன்றில் தட்டச்சு செய்தால் மற்றொன்று புதுப்பிக்கப்படுகிறது.

JavaScript / JSX
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] })).

JavaScript / JSX
useCount.set(10); // replace the value
useCount.set((count) => count + 1); // compute from the previous value
useCount.reset(); // back to the declared initial value

React-க்கு வெளியே பயன்பாடு

அதே ஸ்டோர் நிகழ்வு கையாளிகள், சேவைகள், சோதனைகளில் இயங்கும். get தற்போதைய மதிப்பைப் படிக்கிறது; subscribe ஒவ்வொரு மாற்றத்துக்குப் பிறகும் உங்களை அழைத்து, கேட்பதை நிறுத்தும் ஃபங்ஷனைத் தருகிறது.

JavaScript / JSX
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, ஒவ்வொரு மெத்தடும் அதிலிருந்து வகைகளைப் பெறுகின்றன.

JavaScript / JSX
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 ஒரு நேட்டிவ் மாட்யூல்.

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

எல்லாத் தளங்களிலும் ஒரே அறிவிப்பு

சேமிக்கப்பட்ட ஸ்டோர் உலாவியில் IndexedDB-ஐயும் React Native-இல் MMKV-ஐயும் பயன்படுத்துகிறது. அறிவிப்பும் உங்கள் கம்போனென்ட்களும் அப்படியே இருக்கின்றன.

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

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

ஆவணங்களில் தேடு

எல்லா வழிகாட்டிகளின் தலைப்புகள், விளக்கங்கள், உள்ளடக்கத்தில் தேடுங்கள்.