Redux & RxJS, des similitudes?

Je sais que Redux est une meilleure “implémentation” de Flux, ou mieux c’est une refonte pour simplifier les choses (gestion de l’état des applications).

J’ai beaucoup entendu parler de la programmation réactive (RxJS), mais je n’ai pas encore essayé de l’apprendre.

Donc, ma question est la suivante: existe-t-il une intersection (quelque chose en commun) entre ces deux technologies ou sont-elles complémentaires? … ou totalement différent?

Bref, ce sont des bibliothèques très différentes à des fins très différentes, mais oui, il y a de vagues similitudes.

Redux est un outil de gestion de l’état dans toute l’application. Il est généralement utilisé comme architecture pour les interfaces utilisateur. Pensez-y comme une alternative à (la moitié des) angular.

RxJS est une bibliothèque de programmation réactive. Il est généralement utilisé comme outil pour accomplir des tâches asynchrones en JavaScript. Pensez-y comme une alternative aux promesses.


La programmation réactive est un paradigme (mode de travail et de reflection) dans lequel les changements de données sont observés à distance . Les données ne sont pas modifiées à distance .

Voici un exemple de changement à distance :

// In the controller.js file model.set('name', 'George'); 

Le modèle est modifié depuis le contrôleur.

Voici un exemple d’ observé à distance :

 // logger.js store.subscribe(function (data) { console.log(data); }); 

Dans le Logger, nous observons les modifications de données qui se produisent dans Store (à distance) et écrivons sur la console.


Redux utilise un peu le paradigme réactif: le Store est réactif. Vous ne définissez pas son contenu à distance. C’est pourquoi il n’y a pas de store.set() dans Redux. Le magasin observe les actions à distance et se modifie. Et le magasin permet aux autres d’observer ses données à distance.

RxJS utilise également le paradigme réactif, mais au lieu d’être une architecture, il vous fournit des composants de base, des observables , pour accomplir ce modèle “d’observation à distance”.

Pour conclure, des choses très différentes à des fins différentes, mais partagez quelques idées.

Ce sont des choses très différentes.

RxJS peut être utilisé pour faire de la programmation réactive et est une bibliothèque très complète avec plus de 250 opérateurs.

Et Redux est tel que décrit sur le repository github “Redux est un conteneur d’état prévisible pour les applications JavaScript”.

Redux est juste un outil pour gérer l’état des applications. Mais en comparaison, vous pouvez créer une application complète dans RxJS.

J’espère que cela t’aides 🙂

Je voulais juste append quelques différences pragmatiques par rapport au code RxJS inspiré par Redux.

J’ai mappé chaque type d’action sur une instance de sujet. Chaque composant avec état aura un sujet qui sera ensuite associé à une fonction de réduction. Tous les stream de réducteurs sont combinés avec la merge , puis scan les états. La valeur par défaut est définie avec startWith juste avant l’ scan . J’ai utilisé publishReplay(1) pour les états, mais pourrait le supprimer ultérieurement.

La fonction de rendu pure rendra uniquement l’endroit où vous produirez des données d’événement en envoyant tous les producteurs / sujets.

Si vous avez des composants enfants, vous devez décrire comment ces états sont combinés dans les vôtres. combineLatest pourrait être un bon sharepoint départ pour cela.

Différences notables dans la mise en œuvre:

  • Pas de middleware, juste des opérateurs rxjs. Je pense que c’est le plus grand pouvoir et la plus grande faiblesse. Vous pouvez toujours emprunter des concepts, mais j’ai du mal à obtenir de l’aide de communautés sœurs comme redux et cycle.js, car c’est une autre solution personnalisée. C’est pourquoi je dois écrire “je” au lieu de “nous” dans ce texte.

  • Pas de switch / case ou de chaînes pour les types d’action. Vous avez une manière plus dynamic de séparer les actions.

  • rxjs peut être utilisé comme un outil ailleurs et n’est pas contenu dans la gestion des états.

  • Moins de producteurs que de types d’action (?). Je ne suis pas sûr à ce sujet, mais vous pouvez avoir de nombreuses réactions dans les composants parents qui écoutent les composants enfants. Cela signifie moins de code impératif et moins de complexité.

  • Vous possédez la solution. Aucun cadre nécessaire. Bon et mauvais. Vous finirez par écrire votre propre cadre de toute façon.

  • C’est beaucoup plus fractal, et vous pouvez facilement vous abonner aux modifications d’un sous-arbre ou de plusieurs parties de l’arborescence d’état de l’application.

    • Devinez combien il est facile de faire des épopées comme des redux-obseravbles? Vraiment facile.

Je travaille également sur des avantages beaucoup plus importants lorsque les composants enfants sont décrits comme des stream. Cela signifie que nous ne devons pas compliquer l’état parent et enfant dans les réducteurs, car nous pouvons simplement (“juste”) combiner récursivement les états en fonction de la structure du composant.

Je pense aussi à ne pas réagir et à aller avec Snabbdom ou autre chose jusqu’à ce que React gère mieux les états réactifs. Pourquoi devrions-nous construire notre état vers le haut juste pour le décomposer par des accessoires à nouveau? Je vais donc essayer de faire une version 2 de ce modèle avec Snabbdom.

Voici un extrait plus avancé mais petit du fichier state.ts qui construit le stream d’état. C’est l’état du composant ajax-form qui obtient un object de champs (entrées) avec des règles de validation et des styles css. Dans ce fichier, nous utilisons simplement les noms de champs (clés d’object) pour combiner tous les états des enfants dans l’état du formulaire.

 export default function create({ Observable, ajaxInputs }) { const fieldStreams = Object.keys(ajaxInputs) .map(function onMap(fieldName) { return ajaxInputs[fieldName].state.stream .map(function onMap(stateData) { return {stateData, fieldName} }) }) const stateStream = Observable.combineLatest(...fieldStreams) .map(function onMap(fieldStreamDataArray) { return fieldStreamDataArray.reduce(function onReduce(acc, fieldStreamData) { acc[fieldStreamData.fieldName] = fieldStreamData.stateData return acc }, {}) }) return { stream: stateStream } } 

Bien que le code ne dise peut-être pas grand chose de manière isolée, il montre comment vous pouvez créer un état ascendant et comment créer facilement des événements dynamics. Le prix à payer est que vous devez comprendre un style de code différent. Et j’adore payer ce prix.

Vous pouvez “implémenter” Redux dans une ligne de RxJS . Si vous pensez à Rx pour d’autres raisons (pour promettre des promesses, pour l’utiliser sur un serveur et un client), ignorez Redux et lancez-vous sur Rx.

En bref:

Redux: Bibliothèque inspirée du stream utilisée pour la gestion de l’état .

RxJS: C’est une autre bibliothèque Javascript basée sur la philosophie de programmation réactive, utilisée pour traiter les “stream” (Observables, etc.) [Lisez à propos de la programmation réactive pour comprendre les concepts du stream].