restate / v1.0.0

Початок

Встановіть restate, поділіться першим значенням між компонентами й використовуйте те саме сховище поза React.

На цій сторінці

Встановлення Ваш перший спільний стан Оновлення значення Використання поза React TypeScript React Native Одне оголошення на всіх платформах

Встановлення

restate працює з React 16.8 і новішими. Оголошення TypeScript включено, інших залежностей під час виконання немає.

npm install @kkwaenggwari/restate

Ваш перший спільний стан

Створіть сховище один раз, поза компонентами. Значення, яке повертає restate, — це водночас хук і об’єкт із методами на кшталт set і get.

Між Editor і CharacterCount немає ні props, ні Provider. Введення в одному оновлює інший.

Що ви бачите

type "Hi"
Editor          → Hi
CharacterCount  → 2 characters

Обидва компоненти читають одне сховище. Лічильник перемальовується, лише коли змінюється довжина, бо він вибирає text.length.

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

Написано для API restate 1.0