Lithium State
Gestion des États avec Lithium
Lithium fournit une gestion des états puissante et intuitive, permettant de suivre et de réagir aux changements de valeurs de manière efficace. Ce guide explique comment utiliser la classe State
et la fonction createState
pour gérer les états dans vos applications.
Table des Matières
Introduction
Lithium propose une gestion d'état élégante basée sur des objets observables. Les états permettent de suivre et de réagir aux changements de manière réactive, simplifiant ainsi la gestion des données dans vos applications.
Installation
Installez Lithium state via npm :
npm install @lithium-framework/state
Utilisation
Initialisation d'un État
Pour initialiser un état, utilisez la classe State
ou la fonction createState
:
import { State, createState } from '@lithium-framework/state';
let state = State.init<number>(0);
let [counter, setCounter] = createState<number>(0);
Souscription aux Changements d'État
Vous pouvez souscrire aux changements d'état pour réagir aux modifications de valeur :
state.subscribe((newValue) => {
console.log('Nouvelle valeur:', newValue);
});
counter.subscribe((newValue) => {
console.log({ newValue });
});
setCounter(counter.value + 1);
Historique des États
Lithium maintient un historique des valeurs d'état, permettant de suivre les changements successifs :
state.value = 1;
state.value = 2;
console.log(state.history);
Mutateurs
Les mutateurs permettent de gérer l'état et de le mettre à jour de manière fluide :
let [ counter, setCounter ] = state.mutator;
setCounter(10);
console.log(counter.value);
Symbol.toPrimitive
Lithium permet de convertir des objets d'état en valeurs primitives de manière personnalisée :
let primitiveValue = +state;
console.log(primitiveValue);
API de Référence
State<T>
- Propriétés :
value: T
- Obtient ou définit la valeur actuelle de l'état.history: T[]
- Obtient l'historique des valeurs de l'état (jusqu'à 10 entrées).
- Méthodes :
static init<T>(value: T): State<T>
- Initialise un nouvel état avec la valeur spécifiée.subscribe(callback: (newValue: any) => void): void
- Souscrit aux changements de valeur de l'état.mutator: [State<T> & T, (newValue: T) => void]
- Renvoie un tableau contenant l'état et une fonction pour le mettre à jour.
createState<T>(value: T): [State<T> & T, (newValue: T) => void]
Crée un état avec une valeur initiale et renvoie son mutateur.
Exemples Complets
Exemple 1 : Compteur Réactif
typescriptCopier le code
import { createState } from 'lithium';
let [ counter, setCounter ] = createState<number>(0);
counter.subscribe(( newValue ) => {
console.log('Valeur du compteur:', newValue);
});
setCounter(counter.value + 1);
Exemple 2 : Historique des États
typescriptCopier le code
import { State } from 'lithium';
let state = State.init<number>(0);
state.value = 1;
state.value = 2;
state.value = 3;
console.log(state.history);
Contribuer
Les contributions sont les bienvenues !