Redux & RxJS, des similitudes?

Ils sont des choses très différentes.

RxJS peut être utilisé pour faire Réactif de Programmation et est un très approfondie de la bibliothèque avec plus de 250 opérateurs.

Et Redux est comme décrit sur le dépôt github "Redux est un état prévisible de conteneur pour les applications JavaScript".

Redux est juste un outil pour gérer l'état des applications. Mais, en comparaison, vous pouvez construire une application complète en seulement RxJS.

Espère que cela aide 🙂

Je voulais juste ajouter quelques pragmatique des différences à partir de quand j'ai fait Redux-inspiré RxJS-code.

Je l'ai associé à chaque type d'action à un Objet de l'instance.
Chaque stateful volet, un Sujet qui est alors mappé à un réducteur de fonction.
Tous réducteur de flux sont combinés avec merge et puis scan sorties de l'état.
La valeur par défaut est définie avec startWith juste avant la scan. J'ai utilisé publishReplay(1) pour les états, mais peut enlever plus tard.

La réagir rendu pur aura pour seul endroit où vous produire les données de l'événement par l'envoi de tous les producteurs/les Sujets.

Si vous avez des enfants, vous devez décrire la façon dont ces états sont combinés dans le vôtre. combineLatest pourrait être un bon point de départ pour que.

Des différences notables dans la mise en œuvre:

• Aucun middleware, juste rxjs opérateurs. Je pense que c'est la plus grande puissance et la faiblesse. Vous pouvez toujours emprunter des concepts, mais je trouve difficile d'obtenir de l'aide auprès des communautés-sœurs comme redux et cycle.js puisque c'est encore une autre solution personnalisée. C'est pourquoi j'ai besoin d'écrire "je" au lieu de "nous" dans ce texte.

• Pas d'interrupteur/cas ou des chaînes de caractères pour les types d'action. Vous avez plus dynamique de la séparation d'actions.

• rxjs peut être utilisé comme un outil d'ailleurs, et n'est pas contenu pour la gestion de l'état.

• Un moins grand nombre de producteurs de types d'action(?). Je ne suis pas sûr à ce sujet, mais vous pouvez avoir de nombreuses réactions dans les composants parent à l'écoute des composants enfants. Que signifie moins de code impératif, et moins de complexité.

• Vous possédez la solution. Pas de cadre nécessaire. Les bonnes et les mauvaises. Vous allez vous retrouver l'écriture de votre propre cadre de référence, de toute façon.

• Il est beaucoup plus fractales, et vous pouvez facilement vous abonner à des changements à partir d'un sous-arbre, ou de plusieurs parties de l'application de l'état de l'arbre.

  • Deviner comment il est facile de faire des épopées comme redux-obseravble faire? Vraiment facile.

Je travaille aussi sur beaucoup plus grands avantages lorsque l'enfant composants sont décrits comme des ruisseaux. Cela signifie que nous n'avons pas à complect parent et de l'enfant de l'état dans les réducteurs, puisque nous pouvons juste ("juste") de manière récursive combiner les membres en fonction de la structure des composants.

Je pense aussi que de sauter de réagir et d'aller avec snabbdom ou autre chose, jusqu'à ce que Réagir poignées réactif états de mieux. Pourquoi devrions-nous construire notre etat vers le haut juste pour casser vers le bas par des étais de nouveau? Donc je vais essayer de faire une version 2 de ce modèle avec Snabbdom.

Voici un plus avancés mais petit extrait où l'etat.ts fichier construit à l'état de flux. C'est l'ajax formulaire état du composant qui reçoit un objet de champs (entrées) avec des règles de validation et de styles css. Dans ce fichier, on utilise simplement les noms de champ (clés de l'objet) pour combiner tous les enfants des états dans l'état.

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
  }
}

Alors que le code peut ne pas en dire beaucoup dans l'isolement, il montre comment vous pouvez créer de l'état vers le haut, et comment vous pouvez produire des événements dynamiques avec facilité. Le prix à payer est que vous avez besoin de comprendre un autre type de code. Et j'adore prix à payer.

Redux est un juste un état de gestion de la bibliothèque sont à venir avec des normes bien définies pour les opérations de mise à jour. Autant que vous vous en tenez à des normes que vous pouvez garder votre flux de données saine et facile à la raison. Il apporte également la capacité d'améliorer le flux de données avec les middlewares et de stocker des amplificateurs.

RxJS est une boîte à outils pour la programmation réactive. Vous pouvez effectivement penser à chaque chose qui se passe dans votre application comme un flux. RxJS donne un très riche ensemble d'outils pour gérer ces flux.

Où RxJS et Redux intercepte? Dans redux vous mettez à jour votre état avec des actions et, évidemment, ces actions peuvent être traités comme des ruisseaux. À l'aide d'un middleware comme redux-observables (vous n'avez pas à), vous pouvez mettre en œuvre votre soi-disant "logique d'entreprise" de manière réactive. Une autre chose est que vous pouvez créer une observable à partir de votre redux magasin qui pourrait parfois être plus facile que d'utiliser un activateur.