Gérer l'état à Aurelia: comment utiliser Aurelia avec Redux

Construisez un éditeur Markdown avec un état prévisible à l'aide d'Aurelia et Redux

Cet article explore comment intégrer Redux dans le cadre Aurelia et démontre ce processus en construisant un éditeur de Markdown avec des capacités d'annulation / rénovation. L'article est divisé en trois étapes: paramètres de base Aurelia, Redux intégré pour la gestion de l'état et ajoutant des fonctions d'annulation / réévolution.

Points de base:

• redux fournit un conteneur d'état prévisible qui simplifie la gestion des états d'application, ce qui rend cohérent et facile à tester, en particulier dans des environnements complexes.
• L'intégration de Redux avec Aurelia comprend la configuration du stockage Redux, la configuration des dépendances et la connexion du stockage aux applications Aurelia, qui est très simple et simple avec le plugin Aurelia-Redux.
• Ce didacticiel démontre la construction d'un éditeur Markdown à l'aide d'Aurelia et Redux, avec sa fonctionnalité UNDO / Redo gérée par le plugin Redux-Undo.
• L'application de l'échantillon est divisée en trois étapes: Configuration de base Aurelia, redux intégré pour la gestion de l'état et ajout de la fonctionnalité UNDO / Remo.
L'implémentation
• Redux remplace la liaison bidirectionnelle d'Aurelia par des flux de données unidirectionnels, modifiant la façon dont la vue répond aux changements d'état.
• Pour les débutants Redux ou ceux qui ont besoin d'une revue, il est recommandé de se référer à la série vidéo Egghead de Dan Abramov pour les concepts de base et les fonctionnalités de Redux.

Cet article a été revu par des pairs par Moritz Kröger et Jedd Ahyoung. Merci à tous les pairs examinateurs de SitePoint pour avoir obtenu le contenu de SitePoint à son meilleur! Merci à Simon Codrington d'avoir conçu le style pour la présentation.

De nos jours, lors du développement d'applications Web, les gens prêtent une grande attention aux conteneurs d'État, en particulier tous les modes de flux. Redux est l'une des implémentations les plus importantes de Flux. Pour ceux qui n'ont pas rattrapé cette vague, Redux est une bibliothèque pour vous aider à garder vos changements d'État prévisibles. Il stocke tout l'état de l'application dans un seul arbre d'objet.

Dans cet article, nous couvrirons les bases de la façon d'utiliser Redux avec Aurelia, une nouvelle génération de cadre client JavaScript open source. Mais nous ne construisons pas un autre contre-exemple, nous ferons quelque chose de plus intéressant. Nous allons construire un simple éditeur Markdown avec des capacités d'annulation et de rétablissement. Le code de ce tutoriel est disponible sur GitHub, voici une démo du projet terminé.

Remarque: Lors de l'apprentissage de nouvelles choses, je préfère retourner à la source, dans le cas de Redux, le Redux Creator (Dan Abramov) a une grande série vidéo Egghead. Étant donné que nous n'entrerons pas dans les détails sur le fonctionnement de Redux, si vous devez réviser et avoir quelques heures, je vous recommande fortement d'essayer cette série.

Structure du tutoriel:

Cet article créera trois versions du même composant.

La première version utilisera la méthode Pure Aurelia. Ici, vous apprendrez à configurer une application Aurelia, à configurer les dépendances et à créer les vues et les anomaliers de vue nécessaires. Nous examinerons les exemples de construction de la manière classique Aurelia en utilisant la liaison des données bidirectionnelle.

La deuxième version introduira Redux pour gérer l'état d'application. Nous utiliserons une approche normale, ce qui signifie qu'il n'y a pas de plugins supplémentaires pour gérer l'interopérabilité. De cette façon, vous apprendrez à vous adapter au processus de développement Redux en utilisant les fonctionnalités prêtes à l'emploi d'Aurelia.

La version finale implémentera la fonction UNDO / REDO. Quiconque construit de telles fonctionnalités à partir de zéro sait que le démarrage est facile, mais les choses peuvent rapidement devenir incontrôlables. C'est pourquoi nous allons utiliser le plugin Redux-Undo pour gérer cela pour nous.

Tout au long de l'article, vous verrez plusieurs références à la documentation officielle d'Aurelia pour vous aider à trouver plus d'informations. Tous les manifestes de code sont également liés à son fichier source d'origine.

donc, sans plus tarder, commençons.

Créez une nouvelle application Aurelia:

Puisque nous nous concentrons sur l'interaction avec Aurelia, cet exemple est basé sur la méthode de création d'application préférée d'Aurelia, à savoir la CLI Aurelia.

Selon les étapes décrites dans la documentation CLI, nous installons la CLI globalement en utilisant la commande suivante:

npm install aurelia-cli -g

Ensuite, nous créerons une nouvelle application en utilisant la commande suivante:

au new aurelia-redux

Cela démarrera une boîte de dialogue vous demandant si vous souhaitez utiliser les paramètres par défaut ou personnaliser vos sélections. Sélectionnez la valeur par défaut (ESNEXT) et sélectionnez Créer des dépendances du projet et d'installation. Ensuite, passez au dossier du nouveau projet (en utilisant CD Aurelia-Redux) et démarrez le serveur de développement avec la commande suivante:

au run --watch

Si tout se passe comme prévu, cela démarrera une instance de serveur de développement BrowSersync avec le port d'écoute par défaut 9000. De plus, il suivra les modifications apportées à l'application et actualisera si nécessaire.

Ajouter des dépendances au bundler:

L'étape suivante consiste à installer les dépendances nécessaires pour le projet à venir. Étant donné que le CLI Aurelia est construit sur le dessus du module NPM, nous pouvons le faire en utilisant la commande suivante:

npm install --save marked redux redux-undo

D'accord, présentons-le un par un. Marked est un analyseur et compilateur entièrement fonctionnel et facile à utiliser que nous utiliserons ... comme son nom l'indique. Redux est un package pour la bibliothèque elle-même, et Redux-Undo est un plugin simple qui ajoute une fonctionnalité UNDO / Redo à notre conteneur d'état d'application.

Dans les coulisses, l'Aurelia CLI utilise les exigences, de sorte que toutes les dépendances sont référencées via le format de définition du module asynchrones (AMD). Tout ce qui reste maintenant, c'est dire à l'application Aurelia comment trouver ces dépendances où.

Pour ce faire, ouvrez le fichier Aurelia.json situé dans le sous-dossier Aurelia-Project de l'application. Si vous faites défiler jusqu'à la section Bundles, vous verrez deux objets. L'un est App-Bundle, qui contient votre propre code d'application, et l'autre est le fournisseur-Bundle, qui est utilisé pour regrouper toutes les dépendances d'application dans un fichier de bundle séparé. L'objet contient une propriété appelée dépendances, vous l'avez deviné, et c'est là que nous ajouterons des dépendances supplémentaires.

Le fonctionnement manuel du fichier aurelia.json est actuellement une étape nécessaire, mais sera automatisé dans les futures versions.

Il existe plusieurs façons d'enregistrer les dépendances personnalisées, qui sont mieux comprises en suivant la documentation officielle Aurelia correspondante. Nous ajouterons le code suivant:

npm install aurelia-cli -g

(Le contenu suivant est similaire au texte d'origine, mais les ajustements de déclaration et les divisions de paragraphe ont été faits pour le rendre plus fluide et facile à lire. En raison des limitations de l'espace, le contenu ultérieur ne sera que brièvement résumé que brièvement et les extraits de code de base sont conservés.)

La suivante consiste à connecter les dépendances des applications, à ajouter des styles, à implémenter l'éditeur Markdown via Aurelia, à introduire Redux, à mettre à jour les vues, à implémenter une fonctionnalité UNDO / REDO et enfin résumer et FAQ. Ces parties suivent toutes la même logique que le texte d'origine, mais l'expression du langage est plus concise et le code est rationalisé, conservant la fonctionnalité principale.

Exemple d'extrait de code de base:

(ViewModel en mode redux)

au new aurelia-redux

(vue de style redux)

au run --watch

(Contient ViewModel pour l'annulation / la refonte)

npm install --save marked redux redux-undo

L'article résume enfin les avantages de Redux dans Aurelia et comment il fonctionne en conjonction avec le système de liaison des données Aurelia, et fournit des réponses aux ressources d'apprentissage et aux questions fréquemment posées. L'ensemble du processus montre clairement comment intégrer progressivement Redux dans les applications Aurelia et met en œuvre des capacités de gestion de l'État plus avancées.

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!