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' });