restate / v1.0.0
Начало
Инсталирайте restate, споделете първата си стойност между компоненти и използвайте същия store извън React.
На тази страница
ИнсталиранеПървото ви споделено състояниеОбновяване на стойносттаИзползване извън ReactTypeScriptReact NativeЕдна декларация на всички платформиИнсталиране
restate работи с React 16.8 и по-нови. Декларациите за TypeScript са включени и няма други зависимости по време на изпълнение.
npm install @kkwaenggwari/restateПървото ви споделено състояние
Създайте store веднъж, извън компонентите. Стойността, която връща restate, е едновременно hook и обект с методи като 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). Защо нищо не се пререндерира?
Store получава същия обект и 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 valueИзползване извън React
Същият store работи в обработчици на събития, услуги и тестове. 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
Store в паметта не се нуждаят от нищо повече в React Native. За да запазвате състояние, инсталирайте react-native-mmkv; входната точка на React Native го зарежда автоматично.
В bare проекти след инсталирането изпълнете pod install за iOS. В Expo използвайте development build, защото MMKV е нативен модул.
npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modulesЕдна декларация на всички платформи
Запазваният store използва IndexedDB в браузъра и MMKV в React Native. Декларацията и компонентите ви остават същите.
import { persistedRestate } from '@kkwaenggwari/restate';
// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });