REX sur le Best of Web : «Tout ce que vous voulez savoir sur Redux»

Du 9 au 10 juin 2016 se déroulait la deuxième édition du Best Of Web, la conférence regroupant 12 meetups web pour nous présenter le meilleur de leur talks. La conférence de Matthieu LUX a particulièrement retenu mon attention. Redux encore une nouvelle implémentation de Flux ?

Flux, c’est quoi ?

Face à l’arrivée régulière de nouvelles features, l’équipe front-end de Facebook s’est très vite retrouvée confrontée au problème de maintenabilité de l’état des composants dans leur application et de scalabilité. Pour résoudre ce problème Facebook a créé Flux, une architecture ou guideline. Malgré les très bonnes idées de cette architecture, Flux est trop compliqué.

Redux, le sauveur ?

Redux est devenu en peu de temps l’implémentation la plus populaire de Flux. Il propose de centraliser l’intégralité du contexte de l’application en un seul endroit, organisant toutes les transformations de façon séquentielles et reproductibles.

Redux s’appuie sur trois principes :

  1. Une seule source de vérité : L’état de l’application est stocké dans un seul object tree.
  2. Les états sont immutables : La seule façon de modifier un état et de créer une nouvelle state.
  3. Les modifications sont faites avec des fonctions pures : Cela permet d’éviter les effets de bord.

Oui, mais concrètement ?

Redux utilise des actions qui serviront de payload pour les états. Les actions sont de simples objets Javascript avec une propriété type.

REDUX1

Le Reducer est une fonction pure qui utilise une action et l’ancien état pour renvoyer un nouvel état (attention pour rappel les états sont immutables).

Signature :

REDUX2

Exemple en es6 :

REDUX3

Pour conclure, un store unique par application contient les états de l’application.

En résumé:

redux4

Le code du Store de la librairie

Matthieu Lux nous propose d’aller voir directement le code de la librarie, l’essentiel pouvant s’écrire en 10 lignes de code.

Le Store contient :

  • Le state tree ;
  • Une liste de listener appelée sur les dispatch d’Actions.

Le Store fournit :

  • Une fonction dispatch qui va appeler le reducer et modifier le state.
  • Une fonction subscribe pour ajouter un listener.
  • Une fonction pour lire le state tree.

Côté code :REDUX6

Pour aller plus loin

Finalement voici quelques mots clés de concept que je vous invite à approfondir. Ils ne sont pas directement liés à l’architecture Redux mais beaucoup plus à cette architecture.

redux5

Conclusion

Redux est l’héritier de Flux, mais même si elle reprend les concepts clés de Flux ce serait une erreur de la considérer comme une énième implémentation de celui-ci. En effet, Redux simplifie l’architecture de Flux, en effet on peut remarquer, par exemple, la disparition du dispatcher ou même l’obligation d’utiliser un store unique. Enfin on associe souvent Redux avec React mais n’oublions pas que Redux est « juste » un state container et qu’il peut donc être utilisé avec n’importe quel technologie front (ex : Angular, Vue, Mithril).

Retrouvez la documentation officiel de Redux ici et les slides de la présentation ici.

Share
Emilien MURATON
Emilien MURATON

740

Leave a Reply

Your email address will not be published. Required fields are marked *