PC & Mobile

Comment créer Redux Store uniquement avec VanillaJS et RxJS

Comment créer Redux Store uniquement avec VanillaJS et RxJS


Dans ce guide, nous allons construire une architecture Redux Store en utilisant uniquement VanillaJS et RxJS. Oui bien NE PAS utilisez React du tout.

Avant d'essayer ce guide, vous devriez avoir:

  • Bonne connaissance de VanillaJS.
  • Connaissance de base en RxJS.
  • Connaissances de base en TypeScript, HTML, Scss.

En général, ce n'est pas une bonne idée de recréer Redux (ou redux-observable) par vous-même. Redux est un paquet public très bien coté et son utilisation présente de nombreux avantages, tels que la grande communauté, le dépannage et les cas extrêmes que nous ne couvrirons probablement pas. Ce guide est plus un exercice pour comprendre comment tout cela fonctionne et une démonstration de ce que nous pouvons réaliser avec RxJS.

Tout d'abord, qu'est-ce que Redux Store?

Selon redux.js, Redux Store est “Conteneur d'état prévisible pour les applications JavaScript.”. Eh bien, c’est à peu près tout. Votre application a un état global qui contient tout ce dont vous avez besoin. Vous pouvez lire ses données sur votre application, écouter les modifications et transformer son contenu via des actions, des réducteurs et des épopées. Les actions sont des objets qui décrivent ce qui doit être changé dans l’état ou quelle tâche nous aimerions effectuer, tandis que les réducteurs sont l’instrument permettant de muter de manière synchronisée l’état. Mais ne vous inquiétez pas, tout sera expliqué en détail plus tard. En général, Redux tente de rendre les mutations d’état plus prévisibles en imposant certaines restrictions quant au mode et au moment où les mises à jour peuvent avoir lieu.

Avantages de l’utilisation de l’architecture Redux Store:

  • Source unique de vérité - les données ne disposent que d’une source officielle à utiliser par les consommateurs de données.
  • Séparation des préoccupations - qui conduisent à des morceaux de code réutilisables et facilitent grandement les modifications.
  • Faible couplage & haute cohésion - chaque composant dans cette architecture a son propre but et il n'y a absolument aucun couplage entre eux. Cela mène effectivement à la séparation des préoccupations.
  • Haute évolutivité - l'extension de cette architecture à une plus grande échelle est très facile.
  • Simple et propre- c’est ce que vous verrez exactement après avoir lu ce guide.
  • Facile à déboguer

Les inconvénients de l'architecture Redux Store:

  • Augmentation de la complexité des couches lors de l’écriture d’une logique de manipulation d’états, comme Actions et Réducteurs.
  • Pas très utile pour les petites applications.

Commençons par coder

À la fin de ce guide, nous obtiendrons une architecture entièrement fonctionnelle pour Redux Store mise en œuvre uniquement avec VanillaJS et RxJS. L'application aura une interface utilisateur de base qui nous permettra de demander des publications, de les afficher et de supprimer chaque élément. Encore une fois nous allons NE PASutilisez ReactJS.

Structure des fichiers de projet

- src /
- le magasin/
- épopées /
- delete-post.epic.ts
- get-posts.epic.ts
- index.ts
- réducteurs /
- delete-post-request.reducer.ts
- delete-post-success.reducer.ts
- get-posts-success.reducer.ts
- index.ts
- store.actions.ts
- store.epics.ts
- store.init.ts
- store.reducer.ts
- store.types.ts
- store.utils.ts
- index.js
- styles.scss
- utils.ts
- index.html
- package.json
- tsconfig.json

Donc, avant de nous plonger dans le code, comme je le recommande toujours, définissons d’abord les types et interfaces qui seront utilisés dans notre application. Une fois que nous avons couvert cela, nous serons en mesure de parler la même langue.

Les types

/store/store.types.ts

[Interface] État d'application- Dans le État d'application Interface, nous déclarons quelles données seront stockées dans notre état. Dans cette application jouet, nous aurons un dictionnaire des publications où la clé est l'identifiant de publication et sa valeur est l'instance réelle. De plus, nous aurons besoin d'un autre dictionnaire avec la même clé pour une valeur booléenne cette fois, ce qui indique que cette publication est en cours de suppression (action asynchrone).

[Type] Réducteur-UNERéducteur spécifier comment l’état de l’application change en réponse aux actions. Ou, en d'autres termes, étant donné l'état précédent de l'application et l'action envoyée (qui contient un type et quelques données utiles), le réducteur renverra l'état nouvellement mis à jour de manière synchronisée.

[Type] Épique-Épique est une fonction qui prend un observable d’actions et renvoie un observable d’actions. Actions in, actions out. Ils nous ont laissé écrire une logique asynchrone qui interagit avec le magasin.

[Type] ActionCréateur - ActionCréateur est une définition de fonction qui peut prendre un nombre quelconque d'arguments et doit renvoyer une action. Nous allons utiliser des créateurs d’action, comme vous l’avez supposé pour créer des actions.

[Interface] action - action contenir un type et une charge utile facultative, de sorte que le Réducteur saura quelle logique exécuter et quelles données doivent être remplacées.

[Type] Envoi- Le Envoi fonction, très simple, déclenche une action.

[Type] StoreSubscriber- C’est l’abonné ordinaire de RxJS, il suffit de forcer un type de État d'application. Pour les curieux d’entre nous, c’est la définition de NextObserver .

/ ** INTERFACES D'OBSERVATEUR * /interface d'exportationNextObserver {
fermé?: booléen;
next: (valeur: T) => vide;
erreur ?: (err: tout) => vide;
complète ?: () => vide;
}
classe d'exportationObservable met en oeuvreAbonné {
...
souscrire(
next ?: (valeur: T) => vide,
erreur ?: (erreur: tout) => vide,
complète ?: () => vide): Abonnement;
...
}

Ce n’est pas vraiment important… ne perdez pas plus d’une minute à ce sujet.

[Interface] le magasin- eh bien oui, c'est le magasin, nous avons besoin d'un moyen d'envoyer des actions et de souscrire à ses modifications.

Utils

Voici quelques fonctions utilitaires que nous allons utiliser.

/store/store.utils.ts
/utils.ts

actes

Comme mentionné précédemment, cette application prend en charge 2 cas d'utilisation:

  1. L'utilisateur pourra obtenir une liste de 100 articles en appuyant simplement sur un bouton. Ceux-ci seront imprimés à l'écran.
  2. L'utilisateur pourra supprimer tout message qu'il souhaite.

Voyons donc notre fichier d’actions.

/store/store.actions.ts

Sous Redux, nous devons définir 2 actions pour chaque action asynchrone que nous aimerions effectuer (si nous dépendons de sa réponse bien sûr) car le réducteur met à jour l'état de manière synchrone. Le premier provoquera une Épique pour exécuter une requête réseau ou une logique asynchrone, et la seconde est utilisée par l'épopée pour déclencher les données résolues une fois la logique terminée. Nous traitons les tâches asynchrones de manière synchronisée.

Réducteurs

Puisque nous avons déjà créé l'interface du État d'application . Nous pouvons commencer à écrire nos réducteurs.

Nous aurons besoin de 3 réducteurs:

  1. Obtenir des messages réussis - gérera la mise à jour de getPostsSuccess action.
  2. Supprimer post-demande réducteur - gérera la mise à jour de deletePostRequest action.
  3. Supprimer post-succès réducteur - gérera la mise à jour de deletePostSuccess action.
/store/reducers/get-posts-success.reducer.ts
/store/reducers/delete-post-request.reducer.ts
/store/reducers/delete-post-success.reducer.ts
/store/reducers/index.ts

Création du réducteur de racine

Le réducteur racine définira l'état initial de l'application et, pour chaque action déployée, exécutera le réducteur pertinent que nous venons de créer en fonction du type de l'action. Sinon, l'état de l'application précédente sera retourné.

Épopées

Comme dit plus tôt “Actions in, actions out”. Ils nous ont laissé écrire une logique asynchrone qui interagit avec le magasin. Les actions qui seront retournées par une épopée seront automatiquement envoyées.

Nous aurons besoin de 2 épopées dans notre application de jouet:

  1. Get posts epic - gérera la tâche asynchrone d'atteindre l'API pour obtenir un tableau de 100 publications.
  2. Delete post epic - gèrera la tâche asynchrone d'atteindre l'API pour supprimer un seul post.
/store/epics/get-all-posts.epic.ts
/store/epics/delete-post.epic.ts
/store/epics/index.ts

Combinez les épopées en un seul observable

/store/store.epics.ts

Enfin, createStore

Cette fonction crée le magasin d’applications, configure nos réducteurs, les epics et un observable d’actions.

/store/store.init.ts

Passons en revue commande par commande:

  1. Créez un sujet d'actions.
// Créer le sujet de l'action
action const $ = nouveau sujet();

2 Créer l'état et attacher le réducteur à la balayage opérateur rxjs.

Chaque action envoyée sera réduite par le réducteur.

état const $ = action $ .pipe (
        startWith ({type: "@@ INIT"}),
        scan (réducteur, non défini) // <- La magie se passe ici
)

balayage fonctionne commeArray.reduce mais avec le temps:

/ **
Applique une fonction d'accumulateur sur l'observable source et renvoie chaque résultat intermédiaire avec une valeur de départ facultative.
** /
scan (accumulateur: fonction, graine: toute): observable

Vous pouvez voir quelques exemples ici:

https://www.learnrxjs.io/operators/transformation/scan.html

3 Connectez nos épopées au magasin

Chaque épopée obtiendra le flot d'actions et enverra d'autres actions en retour. Les actions émises seront immédiatement envoyées via le store.dispatch () normal.

combineEpics (action $, state $). subscribe (action $);

4Retourner le magasin

revenir {
        dispatch: action $ .next.bind (action $),
        subscribe: state $ .subscribe.bind (state $)
};

Notre HTML

Un simple bouton pour obtenir toutes les publications et un espace réservé pour les répercuter à partir de l'état de l'application.

/index.html

Le principal

Joue avec

Conclusion

Eh bien, c’est tout, nous avons construit l’architecture Redux Store en utilisant uniquement VanillaJS et RxJS. Dans cet article, je voulais vous montrer la puissance d’utilisation de RxJS et ce que nous pouvons réaliser avec ses outils.

Ce guide est fortement inspiré de Redux-Observable. J'utilise ce paquet très souvent dans les applications à grande échelle. Si vous avez aimé ce guide, vous devriez absolument jeter un oeil à ce paquet.

Merci pour la lecture,

J'apprécierais des commentaires et des questions.

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close