Redux expliqué simplement

Le dev du coin vous explique aujourd’hui un autre mot très hype : Redux.

En bref, Redux c’est :

  • Une façon de gĂ©rer les donnĂ©es d’une application.
  • Un concept thĂ©orique, pas un framework.
  • Pas exclusivement pour React.

Redux, comment ça marche ?

Redux se base sur le concept de « single source of truth ». Une seule source de donnĂ©es pour l’intĂ©gralitĂ© de l’application.

Le principe de Redux consiste Ă  stocker l’ensemble des donnĂ©es d’une application, le « state », Ă  un emplacement unique, le « store ». Ce store est alors la seule source de donnĂ©e pour les composants UI. Si un composant est emmenĂ© Ă  modifier des donnĂ©es, il doit les modifier dans le store pour que les autres composants utilisant ces donnĂ©es soient mis Ă  jour.

Un bon exemple pour illustrer ce concept est la fonction « j’aime » de Twitter. Dans le gif ci-dessous, lorsque je clique le coeur, le nombre total de mes « j’aime » en haut se met Ă  jour pour prendre en compte ce nouveau tweet.

Exemple d'utilisation de Redux

En coulisse, au clic sur le coeur, une instruction (ou « action » en terme Redux) est envoyĂ©e pour ajouter ce tweet Ă  la liste des tweets favoris. Tous les composants utilisant cette donnĂ©e, comme le nombre de j’aime, reçoivent alors automatiquement la nouvelle information, et peuvent se mettre Ă  jour en consĂ©quence.

J’espère que cette introduction vous aura permis d’avoir une idĂ©e gĂ©nĂ©rale de ce qu’est Redux. Si vous voulez aller plus loin, je vous recommande cet article de Smashing Mag (avec de très belles illustrations).

Et si vous avez la moindre question, n’hĂ©sitez pas Ă  la poster en commentaire ou sur Twitter.

A propos de l'auteur

Le dev du coin

Je suis un développeur web freelance basé à Paris, spécialisé dans le développement frontend (Angular, React, VueJS, etc). Je fais également du développement personnalisé de thèmes et de plugins pour WordPress.

Ajouter un commentaire

Laisser un commentaire

Le dev du coin

Je suis un développeur web freelance basé à Paris, spécialisé dans le développement frontend (Angular, React, VueJS, etc). Je fais également du développement personnalisé de thèmes et de plugins pour WordPress.

Sur les réseaux

Derniers articles