restate / v1.0.0
Начало
Установите restate, поделитесь первым значением между компонентами и используйте то же хранилище вне React.
На этой странице
УстановкаВаше первое общее состояниеОбновление значенияИспользование вне ReactTypeScriptReact 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 valueИспользование вне React
То же хранилище работает в обработчиках событий, сервисах и тестах. 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-проектах после установки выполните pod install для iOS. В Expo используйте development build, потому что MMKV — нативный модуль.
npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modulesОдно объявление на всех платформах
Сохраняемое хранилище использует 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' });