restate / v1.0.0
Memulai
Instal restate, bagikan nilai pertama antar komponen, dan gunakan store yang sama di luar React.
Di halaman ini
InstalState bersama pertama AndaMemperbarui nilaiPenggunaan di luar ReactTypeScriptReact NativeSatu deklarasi di semua platformInstal
restate bekerja dengan React 16.8 dan yang lebih baru. Deklarasi TypeScript sudah disertakan, dan tidak ada dependensi runtime lain.
npm install @kkwaenggwari/restateState bersama pertama Anda
Buat store sekali, di luar komponen. Nilai yang dikembalikan restate adalah hook sekaligus objek dengan metode seperti set dan get.
Tidak ada props maupun Provider di antara Editor dan CharacterCount. Mengetik di satu komponen memperbarui yang lain.
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>;
}Memperbarui nilai
set menerima nilai baru atau fungsi dari nilai sebelumnya. reset kembali ke nilai yang Anda deklarasikan.
Perlakukan nilai sebagai immutable: kembalikan objek atau array baru alih-alih mengubah yang lama, agar selector melihat perubahannya.
Anda menambah item ke cart.items dengan push lalu memanggil useCart.set(cart). Mengapa tidak ada yang dirender?
Store menerima objek yang sama dan Object.is tidak melihat perubahan. Kembalikan objek baru, misalnya 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 valuePenggunaan di luar React
Store yang sama bekerja di event handler, service, dan test. get membaca nilai saat ini, dan subscribe memanggil Anda setelah setiap perubahan serta mengembalikan fungsi untuk berhenti mendengarkan.
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
Berikan tipe state sekali. Selector, set, dan setiap metode mendapat tipenya dari situ.
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 di memori tidak butuh apa-apa lagi di React Native. Untuk menyimpan state, instal react-native-mmkv; titik masuk React Native memuatnya otomatis.
Di proyek bare, jalankan pod install untuk iOS setelah instalasi. Di Expo, gunakan development build karena MMKV adalah modul native.
npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modulesSatu deklarasi di semua platform
Store tersimpan memakai IndexedDB di browser dan MMKV di React Native. Deklarasi dan komponen Anda tetap sama.
import { persistedRestate } from '@kkwaenggwari/restate';
// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });