restate / v1.0.0

Πρώτα βήματα

Εγκαταστήστε το restate, μοιραστείτε μια πρώτη τιμή μεταξύ components και χρησιμοποιήστε το ίδιο store εκτός React.

Σε αυτή τη σελίδα

Εγκατάσταση Η πρώτη σας κοινή κατάσταση Ενημέρωση της τιμής Χρήση εκτός React TypeScript React Native Μία δήλωση σε κάθε πλατφόρμα

Εγκατάσταση

Το restate λειτουργεί με React 16.8 και νεότερο. Οι δηλώσεις TypeScript περιλαμβάνονται και δεν υπάρχουν άλλες εξαρτήσεις χρόνου εκτέλεσης.

npm install @kkwaenggwari/restate

Η πρώτη σας κοινή κατάσταση

Δημιουργήστε ένα store μία φορά, έξω από τα components. Η τιμή που επιστρέφει το restate είναι ταυτόχρονα hook και αντικείμενο με μεθόδους όπως set και get.

Ανάμεσα στο Editor και στο CharacterCount δεν υπάρχουν ούτε props ούτε Provider. Η πληκτρολόγηση στο ένα ενημερώνει το άλλο.

Τι βλέπετε

type "Hi"
Editor          → Hi
CharacterCount  → 2 characters

Και τα δύο components διαβάζουν το ίδιο store. Ο μετρητής αποδίδεται ξανά μόνο όταν αλλάζει το μήκος, επειδή επιλέγει το 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 επιστρέφει στην τιμή που δηλώσατε.

Θεωρήστε την τιμή αμετάβλητη: επιστρέψτε νέο αντικείμενο ή πίνακα αντί να τροποποιήσετε το παλιό, ώστε οι selectors να δουν την αλλαγή.

Προσθέτετε ένα στοιχείο στο cart.items με push και καλείτε 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

Το ίδιο 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

Δώστε τον τύπο της κατάστασης μία φορά. Οι selectors, το 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

Τα stores στη μνήμη δεν χρειάζονται τίποτα επιπλέον στο React Native. Για να αποθηκεύσετε κατάσταση, εγκαταστήστε το react-native-mmkv· το σημείο εισόδου του React Native το φορτώνει αυτόματα.

Σε bare έργα, εκτελέστε pod install για iOS μετά την εγκατάσταση. Στο Expo, χρησιμοποιήστε development build, επειδή το MMKV είναι native module.

npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modules

Μία δήλωση σε κάθε πλατφόρμα

Ένα αποθηκευμένο store χρησιμοποιεί IndexedDB στο πρόγραμμα περιήγησης και MMKV στο React Native. Η δήλωση και τα components σας μένουν ίδια.

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