New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@lithium-framework/state

Package Overview
Dependencies
Maintainers
0
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lithium-framework/state

lithium state

  • 1.2.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

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

// Utilisation de la classe State
let state = State.init<number>(0);

// Utilisation de la fonction createState
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 :

// Souscrire aux changements d'état avec la classe State
state.subscribe((newValue) => {
  console.log('Nouvelle valeur:', newValue);
});

// Souscrire aux changements d'état avec createState
counter.subscribe((newValue) => {
  console.log({ newValue });
});

// Mettre à jour l'état
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;

// Affiche les valeurs précédentes, jusqu'à 10 entrées
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); // Met à jour l'état à 10
console.log(counter.value); // Affiche 10

Symbol.toPrimitive

Lithium permet de convertir des objets d'état en valeurs primitives de manière personnalisée :

// Utilise Symbol.toPrimitive pour obtenir la valeur primitive
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); // Incrémente le compteur

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); // Affiche [0, 1, 2]

Contribuer

Les contributions sont les bienvenues !

Keywords

FAQs

Package last updated on 31 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc