Introduction aux alternatives Redux

Redux est une bibliothèque JavaScript open source. Il est utilisé pour gérer l'état de l'application. Redux est utilisé la plupart du temps avec d'autres bibliothèques javascript comme React et Angular pour créer des interfaces utilisateur. Redux peut être compris comme un outil de gestion d'état. Même s'il est le plus couramment utilisé avec React, il convient à tout framework JavaScript ou à sa bibliothèque. Il est très léger et ne mesure que 2 Ko. Pour toute application d'application basée sur JavaScript, la gestion des états devient compliquée lorsque la taille de l'application augmente ou que l'application devient plus complexe et nous avons donc besoin d'un outil de gestion des états tel que Redux pour maintenir ces états.

Redux est un excellent outil et son importance est évidente avec le fait qu'il a complètement changé l'architecture des applications frontales. Redux pourrait être un excellent outil à maîtriser pour quelqu'un à la recherche d'un nouvel emploi car il propose des offres intéressantes avec différentes versions d'Angular et d'autres. La combinaison React & Redux est particulièrement importante pour les perspectives d'emploi.

Définition Redux

Le principe de fonctionnement de Redux est assez simple et direct. Redux peut être considéré comme un magasin central qui contient la totalité de l'état de l'application. Chacun de ses composants peut accéder à l'état stocké donné sans nécessiter l'envoi de propriété d'un composant à un autre.

Il existe trois blocs de construction de redux: actions, magasin et réducteurs.

1. Actions

Ce ne sont que des événements. Ils sont le moyen d'envoyer des données de l'application au magasin Redux. Les données proviennent d'interactions utilisateur ou d'appels API ou de la soumission de formulaires.

2. Réducteurs

Ce ne sont que des fonctions pures qui, après avoir pris l'état actuel de l'application, exécutent l'action donnée, puis renvoient un nouvel état. Ces états sont ensuite stockés en tant qu'objets et ils spécifient également comment l'état de l'application sélectionnée change avec la réponse d'une action envoyée au magasin.

3. Magasin

Le magasin, qui est au cœur de la conception, contient l'état de l'application. Il ne peut y avoir qu'un seul magasin dans une application Redux. On peut accéder à l'état stocké et mettre à jour son état, puis enregistrer ou désinscrire des écouteurs via les méthodes d'assistance disponibles.

Redux est génial mais il y a quelques problèmes avec l'utilisation de Redux:

  • Difficulté à passer au travail avec des réducteurs: - Pour pouvoir travailler avec redux, il faut se soucier des principes de programmation fonctionnelle et toujours renvoyer une nouvelle valeur basée sur l'état précédent de l'application. Parfois, cela peut être facile, comme la manipulation de chaînes ou d'objets simples ou des opérations de tableau simples, mais à mesure que la complexité de la tâche augmente, la meilleure idée serait probablement d'utiliser Immutable.json à partir de la bibliothèque similaire.
  • Ne vous répétez pas ou principe DRY: - Travailler avec Redux nécessite de conserver certaines conventions, telles que la création de types d'actions ou de créateurs d'actions et également de réducteurs. Pour des raisons de logique similaires, telles que les opérations CRUD, le code Redux peut en fait être très similaire. L'ajout de petites fonctionnalités dans de tels cas nécessitera l'ajout de nombreux cas de logique et de test redux. Ainsi, une meilleure idée serait de penser à refactoriser ou à suivre une règle DRY.
  • Attention aux performances: - Au final, ce qui compte vraiment, c'est la performance. Les développeurs préfèrent généralement avoir une source de vérité unique qui est non seulement facile à entretenir, mais aussi à déboguer et à tester, et donc redux ne convient pas à cela. Dans Redux, même un petit changement peut déclencher des changements dans la structure DOM.

Liste des alternatives Redux

Voici les principales alternatives pour Redux qui sont les suivantes:

1. MobX

Il s'agit d'une nouvelle bibliothèque qui fournit de nombreuses solutions aux problèmes mentionnés ci-dessus. Cela fonctionne sur 3 points et ce sont des états, des dérivations et des actions. Avec MobX, la synchronisation entre les modèles et l'interface utilisateur peut se faire automatiquement. Avec MobX, on peut utiliser la POO et certaines méthodes directement sur l'élément des modèles. La normalisation des objets n'est pas non plus requise, mais dans le magasin Redux, elle est nécessaire.

2. GraphQL

La pile Relay & GraphQL est en fait relativement ancienne, mais pas aussi populaire que Redux. Il est développé par Facebook et lorsqu'il est venu, il a été décrit comme le cadre pour créer des applications de réaction basées sur les données. Il existe de nombreux avantages uniques à utiliser Relay avec GraphQL. Le plus important d'entre eux est qu'il n'est pas nécessaire de se rappeler du point de vue frontal comment récupérer les données pour obtenir la réponse requise.

3. Combinaison

C'est généralement une solution pour quelqu'un qui ne veut pas utiliser MobX, mais Redux pur ne lui plaît pas non plus. Une combinaison est un framework basé sur Redux et rend le flux plus automatique. Pour quelqu'un qui n'aime pas créer une application à partir de zéro (ce qui signifie ajouter et configurer de nombreux packages), alors Jumpsuit leur convient. Il donne une couche d'API simplifiée pour React et Redux.

4. Assistants / générateurs avec redux.js conventionnel

L'un des plus gros problèmes qui peut être reconnu avec l'application Redux est qu'elle a beaucoup de duplications de code, c'est-à-dire qu'elle ne suit pas le principe DRY. Conventional-redux.js est l'approche à suivre à cet égard pour simplifier votre flux de travail.

Jumpsuit, Conventional-redux.js et de nombreux autres outils de ce type se concentrent sur l'amélioration du flux de travail Redux. Ce sont les choix préférés de ceux qui connaissent Redux et qui comprennent ses tenants et aboutissants., Ce sont ces personnes qui ont probablement préparé beaucoup de données ou de trucs de logique d'état et qui ne veulent pas vraiment réécrire encore et encore ou qui ont mis plus d'efforts dans l'apprentissage de ces compétences.

D'un autre côté, MobX et Relay & GraphQL sont en dehors de la pile Redux. MobX est très facile à apprendre. Ceci est recommandé si quelqu'un veut écrire très rapidement à partir de zéro. GraphQL, au contraire, a besoin de beaucoup de temps pour pouvoir construire une logique de flux de données backend. Mais une fois cela fait, la mise en œuvre frontale devient beaucoup plus facile.

Tableau de comparaison des alternatives Redux

traits

Redux MobX GraphQL

Combinaison

Principe SECNonOuiOuiOui
ComplicationHauteFaibleMoyenMoyen
Courbe d'apprentissageHauteFaibleMoyenFaible
ApplicationConvient pour une application simpleConvient pour une application complexeConvient pour une application de taille moyenneConvient pour une application complexe

Articles recommandés

Ceci a été un guide sur les alternatives Redux. Ici, nous avons discuté des 4 meilleures alternatives Redux avec leur tableau de comparaison. Vous pouvez également consulter l'article suivant pour en savoir plus -

  1. Alternatives Linux
  2. Alternatives à Ubuntu
  3. Alternatives à WordPress
  4. Git Alternatives