La gestion de l'état global dans les applications JavaScript, en particulier lorsque vous en avez besoin, est accessible dans des contextes React et non-React, peut être un défi. Les bibliothèques existantes impliquent souvent une configuration lourde, une complexité inutile et sont étroitement couplées à React. Et si vous pouviez gérer l’État avec l’élégance et la simplicité du pliage de papier ? Entrez Origami-State-Manager (OSM).
Origami-State-Manager (OSM), prononcé "génial" est une bibliothèque légère de gestion d'état conçue pour être simple, flexible et évolutive. Inspiré de l'art japonais de l'Origami, qui transforme une simple feuille de papier en dessins complexes, OSM vous permet de gérer l'état global de votre application avec la même élégance. Tout comme le papier, il est incroyablement léger, ce qui le rend parfait pour les applications où la simplicité et les performances comptent.
Le parcours vers la création d'OSM a commencé par la recherche d'une solution qui pourrait :
Si vous en avez assez des solutions sur-conçues et que vous voulez quelque chose qui fonctionne tout simplement, OSM pourrait être l'outil "génial" dont vous avez besoin.
Prêt à ajouter un peu d'OSM à votre application ? Voici comment commencer :
1. Installez la bibliothèque :
npm install origami-state-manager
2. Créer une boutique :
Un magasin est l'endroit où vivent tous vos États mondiaux. En configurer un est aussi simple que de transmettre vos valeurs d'état initiales à createStore :
// store.ts import { createStore } from "origami-state-manager"; const initialValues = { origami: 0, osmness: 0, }; export const store = createStore(initialValues);
Vous pouvez également rendre le magasin persistant en fournissant un nom de magasin :
export const store = createStore(initialValues, "myOSMness");
3. État d'accès et de mise à jour :
Pour les composants React, utilisez le hook useStateListener pour accéder et mettre à jour l'état :
import { store } from "./store"; import { useStateListener } from "origami-state-manager"; function OrigamiComponent() { const origami = useStateListener("origami", store); return ( <button onClick={() => store["origami"].value = new Date().getSeconds()}> Origami Count: {origami} </button> ); }
4. État d'accès dans les fonctions non-React :
Vous pouvez également facilement travailler avec un état en dehors de React :
// utils.js function getProfile() { let profile = store["profile"].value; if (!profile) { store["profile"].value = {}; } return store["profile"].value; }
OSM est parfait pour les scénarios où :
OSM en est encore à ses débuts et n’a pas été entièrement testé dans tous les environnements. Bien qu’il soit idéal pour les petits projets et les besoins simples de l’État, il est conseillé d’être prudent lorsque vous l’utilisez dans des scénarios complexes. Si vous rencontrez des problèmes, veuillez les signaler afin que la bibliothèque puisse continuer à s'améliorer.
Vous souhaitez contribuer à rendre OSM encore plus génial ? Les contributions sont les bienvenues ! Consultez les directives de contribution pour commencer.
Le journal des modifications est régulièrement mis à jour avec toutes les nouvelles modifications et améliorations.
Origami-State-Manager (OSM) vise à fournir une solution simple mais puissante pour la gestion globale de l'état sans encombrement. En gardant une configuration minimale et des performances élevées, OSM vous permet de vous concentrer sur la création de fonctionnalités plutôt que de lutter contre la complexité des états.
Essayez-le et découvrez un nouveau niveau de OSM-ness dans vos projets !
Démarrez avec OSM aujourd'hui : npm : origami-state-manager
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!