Qu'est-ce que Redux : tout ce que vous devez savoir sur cette bibliothèque

Si vous ne savez toujours pas qu'est-ce que Redux, dans cet article, nous allons nous concentrer sur l'explication de tout ce que vous devez savoir sur cette bibliothèque de JavaScript, ainsi que ses utilisations, comment il peut être utilisé, etc. De cette façon, vous disposerez de tous les outils nécessaires pour pouvoir l’intégrer dans vos prochains projets JS.

Voyons à quoi ressemble Redux !

Qu'est-ce que Javascript ?

Javascript (JS), est un langage de programmation interprété. Il est considéré comme un dialecte de la norme ECMAScript et se caractérise par être orienté objet, basé sur un prototype, impératif, faiblement typé et dynamique. Malgré son nom, il ne faut pas le confondre avec Java. Sa création repose sur des considérations commerciales, suite au rachat de Sun Microsystems (créateur de Java) par Netscape Navigator (créateur de LiveScript) et au changement de nom du langage de programmation.

principalement utilisé côté client, faisant partie intégrante des navigateurs Web. Cela vous permet d'améliorer l'interface utilisateur et de créer des pages Web dynamiques. De plus, JavaScript peut être utilisé côté serveur, appelé JavaScript côté serveur ou SSJS. Son applicabilité s'étend au-delà du Web, trouvant une utilisation dans les documents PDF et les applications de bureau, principalement les widgets, etc.

La La syntaxe JavaScript ressemble à celle de langages tels que C++ et Java, bien qu'il adopte des noms et des conventions de Java, d'où son nom. Mais, comme je l’ai déjà mentionné, il est important de noter que, malgré leur nom similaire, Java et JavaScript ont des sémantiques et des objectifs différents.

D’un autre côté, il faut rappeler que JavaScript utilise une implémentation du Document Object Model (DOM), et que JS est le seul langage de programmation que les navigateurs comprennent nativement. Initialement, il était utilisé dans les pages Web HTML pour les opérations sur le client sans accès au serveur. Cependant, il est aujourd’hui largement utilisé pour envoyer et recevoir des informations du serveur, souvent en combinaison avec des technologies telles qu’AJAX. JavaScript est interprété dans l'agent utilisateur tandis que les instructions sont téléchargées avec le code HTML.

Applications JS

JavaScript est un langage de programmation largement utilisé dans diverses applications et contextes, tels que :

• Développement web: C’est essentiel dans le développement web. Il est utilisé pour améliorer l’interactivité et l’expérience utilisateur sur les sites Web et les applications Web. Il est utilisé, entre autres, dans la création de formulaires interactifs, d'effets visuels, de validations de données en temps réel et de navigation dynamique. Présenter à:
  • Front-end Web : C’est la pierre angulaire du développement front-end. Les frameworks et bibliothèques comme React, Angular et Vue.js s'appuient sur JavaScript pour créer des interfaces utilisateur interactives et dynamiques dans les applications Web.
  • Back-end Web : Grâce à des plateformes comme Node.js, JavaScript est utilisé côté serveur pour créer des applications Web complètes. Cela permet à un développeur d'utiliser JavaScript à la fois sur le front-end et le back-end d'une application, ce qui facilite la synchronisation des données et la création d'applications en temps réel.
  • Application serveur : Bien qu'il ne soit pas aussi courant que d'autres langages côté serveur, JavaScript est utilisé dans le développement d'applications serveur via Node.js. Ceci est particulièrement utile pour les applications en temps réel et les applications qui gèrent un grand nombre de requêtes simultanées.
• Application mobile: Il est utilisé dans le développement d'applications mobiles hybrides utilisant des frameworks tels que React Native et Ionic. Ces frameworks permettent aux développeurs d'écrire une seule fois et d'exécuter l'application sur plusieurs plates-formes, telles que iOS et Android.
• Jeux en ligne: Il est utilisé dans le développement de jeux en ligne et de jeux par navigateur. Des bibliothèques comme Phaser et Three.js facilitent la création de jeux interactifs 2D et 3D dans le navigateur.
• Applications de bureau : Grâce à des outils comme Electron, il est possible de créer des applications de bureau multiplateformes à l'aide de technologies Web telles que HTML, CSS et JavaScript.
• Extensions de navigateur : Pour ajouter des fonctionnalités supplémentaires aux navigateurs Web, des extensions sont utilisées. Ces extensions sont généralement écrites en JavaScript.
• Applications Internet des objets (IoT) : Il est utilisé dans le développement d'applications et de systèmes pour les appareils IoT en raison de sa capacité à communiquer avec le matériel et les capteurs via des API et des bibliothèques spécialisées.

Qu'est-ce que Redux et comment ça marche ?

Redux est une bibliothèque JavaScript open source qui est utilisé pour gérer l'état dans les applications et influencé par le langage fonctionnel Elm. Il est souvent combiné avec d'autres bibliothèques telles que React ou Angular pour créer des interfaces utilisateur. Il a été conçu par Dan Abramov et Andrew Clark, inspirés par la bibliothèque Facebook appelée Flux.

D'une manière générale, Redux est une petite bibliothèque avec un API simple et limitée, conçu pour agir comme un conteneur prévisible pour l’état de l’application. Son fonctionnement s'apparente au concept de « réduire » en programmation fonctionnelle.

L'histoire de Redux remonte à 2015, lorsque Dan Abramov a commencé à développer la première version de Redux tout en se préparant à donner une conférence à la conférence React Europe sur le rechargement à chaud. Au cours de ce processus, Abramov a remarqué la similitude entre le motif Flux et la fonction réducteur. Cette observation l’a amené à se demander si un magasin Flux pouvait réellement être une fonction réductrice.

Pour concrétiser cette idée, Abramov a contacté Andrew Clark, auteur de l'implémentation de Flux appelée Flummox. Ensemble, ils ont collaboré pour donner vie à Redux et défini une API cohérente. De plus, ils ont mis en œuvre la capacité de extension utilisant un middleware et des optimiseurs de magasin, qui a contribué de manière significative à l'écosystème Redux actuel, élargissant encore ses possibilités.

Relation Redux et React : qu'est-ce que React

React est une bibliothèque JavaScript qui se concentre sur la création d'interfaces utilisateur, bien que sa polyvalence dépasse cette définition. Cet outil, initialement développé par Facebook, est open source et largement utilisé en raison de sa capacité à créer rapidement des interfaces utilisateur dans diverses applications, notamment les applications Web à page unique (SPA) et les applications Android et iOS.

Contrairement à d'autres frameworks, comme Angular, qui proposent des approches plus complexes, React est se distingue par sa capacité à générer des interfaces utilisateur efficacement. Ceci est réalisé grâce à l'utilisation de fichiers .jsx, qui combinent la logique et l'interface utilisateur dans un seul fichier et sont organisés en unités appelées composants.

DOM virtuel : qu'est-ce que c'est ?

Lorsque nous plongeons dans le monde de ReactJS, nous entendons probablement fréquemment parler du concept de DOM virtuel. Cette idée vient d'une notion ingénieuse : au lieu de mettre à jour l'intégralité du DOM actuel, nous ne modifions que la partie qui a réellement besoin d'être modifiée. Dans les anciennes applications JavaScript, nous recevions les données au format JSON du serveur puis générions un nouveau HTML complet à restituer, entraînant un rafraîchissement de la page entière à chaque modification.

Comment installer et configurer Redux dans votre projet

Si vous voulez savoir comment installer ReduxLa vérité est que ce n’est pas compliqué du tout. Pour ce faire, vous devez vous rendre au terminal et à partir de là, vous devez exécuter la commande suivante :

npm i-S redux

Vous avez maintenant la version stable de Redux installée sur votre système. Bien sûr, vous devrez probablement résoudre certaines dépendances, comme l'installation de npm, le gestionnaire de packages Node.js. Une fois cela fait, nous allons maintenant installer React, dont vous aurez également besoin pour profiter de Redux, ainsi que des outils de développement pour pouvoir commencer à créer vos projets.

Pour installer ces autres packages, les commandes que vous devez exécuter sont :

npm i -S réagir-redux npm i -D redux-devtools

Maintenant, vous auriez tout prêt à commencer. Si vous accédez au dossier ou répertoire principal dans lequel Redux a été installé, vous verrez qu'il existe plusieurs sous-répertoires ou sous-dossiers, tels que STORE, REDUCERS, ACTIONS, TYPES. Vous devez savoir ce que chacun est :

• ACTIONS: Ce sont des objets qui doivent avoir deux propriétés, une qui décrit le type (TYPE) de l'action et une autre qui décrit ce qui doit être modifié dans l'état de l'application.
• RÉDUCTEURS- Les réducteurs sont des fonctions qui implémentent le comportement des actions. Ils modifient l'état de l'application, en fonction de la description de l'action et de la description du changement d'état.
• BOUTIQUE: est le lieu où les actions et les réducteurs se rencontrent, maintenant et modifiant l'état de l'application. Il n'y a qu'un seul.
• TYPES: comme je l'ai déjà dit, c'est le type d'action.

Exemple pratique : Créer une application avec Redux

Un exemple utilisant Redux Cela pourrait être le cas suivant, où une simple application de comptabilité est créée à l'aide de Redux. Mais pour ce faire, vous devez d'abord configurer Redux et définir vos actions et réducteurs :

// Importer les bibliothèques Redux import { createStore } from 'redux' ; // Définir les actions const incrémentAction = { type: 'INCREMENT' }; const decrementAction = { type : 'DÉCREMENT' }; // Définir le réducteur const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; cas 'DÉCRÉMENT' : état de retour - 1 ; par défaut : état de retour ; } } ; // Créer le magasin Redux const store = createStore(counterReducer); // Abonnez-vous aux modifications du magasin store.subscribe(() => { console.log('Current counter state:', store.getState()); }); // Distribue des actions pour modifier l'état store.dispatch(incrementAction); store.dispatch(incrementAction); store.dispatch(decrementAction);

Ceci est un exemple très simple de la façon d'utiliser Redux. Dans une application plus grande, vous définiriez des actions et des réducteurs plus complexes et connecteriez les composants React pour accéder et mettre à jour l'état du magasin. Mais au moins cela vous donne une idée de comment ça marche...