Gestion de l'État simple en javascript avec un état de nounou

État de nounou: une bibliothèque de gestion de l'État vanille rationalisée

Nanny State est une mini-bibliothèque conçue pour simplifier le processus de création d'applications Web basées sur l'État à l'aide de JavaScript natif. C'est similaire à React, mais avec moins de frais généraux, pas besoin d'apprendre une nouvelle syntaxe. Il utilise un seul objet d'état à l'échelle de l'application au lieu de laisser chaque composant avoir son propre état. Il a été inspiré par Hyperapp et a de nombreuses similitudes avec l'ELM.

Cet article expliquera comment fonctionne Nanny State et démontrera sa fonctionnalité avec plusieurs exemples.

Points clés:

1. Introduction de l'état de nounou: L'état de nounou est une bibliothèque minimaliste pour la création d'applications Web basées sur l'État utilisant le JavaScript natif, ce qui est plus simple et moins sur la tête que réagir. Il utilise un seul objet d'état à l'échelle de l'application, plutôt qu'un seul état de chaque composant, inspiré par HyperApp et Elm, et est conçu pour être facile à adopter sans apprendre une nouvelle syntaxe.
2. Modèle de flux de données unidirectionnel: Cette bibliothèque est basée sur un modèle de flux de données unidirectionnel et se compose de trois parties principales: État (un objet qui contient toutes les données d'application), et View (une Retour basé sur l'état actuel). Ce modèle met l'accent sur la simplicité, avec les objets d'état comme la seule source de faits, assurant le déterminisme, la cohérence et la prévisibilité du comportement d'application.
3. Exemples pratiques et évolutivité: avec des exemples pratiques (y compris l'application de base "Hello Nanny State" et des jeux de questions-réponses plus complexes et faux), l'article démontre la construction dynamique, la réactivité avec la simplicité et l'efficacité de l'état de la nounou et l'efficacité d'une application Web de style. Présentation du potentiel de la bibliothèque à créer des applications interactives avec un code minimal, ainsi que des suggestions d'extension de jeux de questions / réponses, mettant en évidence la polyvalence et la prise en charge de Nanny State pour des fonctionnalités avancées telles que le stockage et le routage locaux.

flux de données unidirectionnel

L'état de nounou utilise un modèle de flux de données unidirectionnel, composé de trois parties:

• État: un objet qui stocke toutes les données d'application.
• View (View): Une fonction qui renvoie une chaîne HTML basée sur l'état actuel.
• MISE À JOUR: La seule fonction qui peut modifier l'état et renvoyer la vue.

Dans l'état de nounou, l'état est tout. L'objet d'état est la seule source de fait pour l'application - chaque partie des données de l'application est une propriété de cet objet. Même les gestionnaires d'événements utilisés dans les vues sont les propriétés des objets d'état.

La vue est une représentation de l'état comme HTML. Il change lorsque l'état change et permet à l'utilisateur d'interagir avec l'application.

Les fonctions de mise à jour sont le seul moyen de modifier l'état. Il s'agit d'un seul point d'entrée pour mettre à jour l'état et garantit que les changements sont déterministes, cohérents et prévisibles.

La construction d'une application d'État de nounou ne nécessite que ces trois parties. En fait, il peut être résumé comme suit trois questions:

1. quelles données mon application doit-elle stocker? Cela formera les propriétés de l'objet d'état.
2. Comment dois-je souhaiter que les données d'application soient rendues sur la page? Cela vous aidera à créer des fonctions de vue.
3. Comment les données de l'application changeront-elles lorsque l'utilisateur interagit avec l'application? À cette fin, la fonction doit être mise à jour.

Bonjour Nanny State!

La façon la plus simple de comprendre comment fonctionne Nanny State est d'écrire du code! Nous allons commencer par un exemple de base et essayer de rendre quelque chose de plus complexe.

Le moyen le plus simple d'exécuter l'exemple suivant est d'utiliser un éditeur de code en ligne tel que Codepen, ou vous pouvez l'exécuter localement en installant le package de nounou à l'aide de NodeJS.

Copiez le code suivant dans la partie JS de Codepen:

<code class="language-javascript">import { Nanny, html } from 'https://cdn.skypack.dev/nanny-state';

const View = state => html`<h1>Hello ${state.name}</h1>`;

const State = {
  name: "Nanny State",
  View
};

const Update = Nanny(State);</code>

Cela montre comment les trois parties de l'État de nounou travaillent ensemble. Examinons de plus près chaque section:

<code class="language-javascript">const View = state => html`<h1>Hello ${state.name}</h1>`;</code>

L'état de nounou utilise µhtml pour rendre HTML. La fonction de vue toujours accepte un objet d'état comme paramètre unique . Il utilise ensuite la fonction HTML fournie par µhtml pour créer du HTML en fonction des littéraux de modèle fournis comme paramètres.

L'utilisation de littéraux de modèle signifie que nous pouvons insérer les propriétés de l'état dans la vue en utilisant le symbole ${variable}. Dans cet exemple, nous l'utilisons pour insérer la valeur de l'attribut de nom dans l'élément <h1></h1>.

<code class="language-javascript">const State = {
  name: "Nanny State",
  View
};</code>

Les objets d'état sont l'endroit où toutes les données d'application sont stockées. Il contient tous les attributs et valeurs qui seront affichés dans la vue qui peuvent changer sur la durée de vie de l'application, comme l'attribut de nom dans cet exemple.

Veuillez noter que la vue est également une propriété d'état à l'aide de la notation d'abréviation de l'objet. N'oubliez pas que le statut est tout - Chaque partie de l'application est une propriété de l'État.

<code class="language-javascript">const Update = Nanny(State);</code>

La dernière ligne définit la fonction de mise à jour comme la valeur de retour de la fonction de nounou. Cela peut désormais être utilisé pour mettre à jour la valeur de toute propriété d'État. En fait, c'est le seul moyen de mettre à jour toute propriété d'État. Il effectue également un rendu initial de la vue en fonction des valeurs fournies dans l'état. Cela signifie qu'un titre sera affiché avec les mots "Hello Nanny State" comme indiqué dans le codepen ci-dessous:

... (Le contenu ultérieur est similaire au texte d'origine, sauf que la langue et l'expression sont ajustées, le texte d'origine est gardé inchangé et que toutes les images et leurs formats sont conservés.)

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!