Quels sont les avantages et les inconvénients de mobx et Redux, notamment dans un environnement React-Native ?

Question

Dernièrement, j'ai entendu tout le monde parler de mobx, j'ai utilisé (j'utilise) Redux dans une application React Native en production.

Je cherche simplement à savoir si quelqu'un a l'expérience des deux et peut me conseiller sur les avantages de l'un par rapport à l'autre.

Answer 1

Je vais coller un résumé de leurs approches J'ai écrit dans un commentaire sur Reddit :

• Redux est fortement influencé par les principes de la programmation fonctionnelle :

  • Il encourage l'utilisation de fonctions "pures", veut que vous traitiez vos données de manière "immuable" (c'est-à-dire que vous fassiez des copies et modifiez les copies, mais que vous ne mettiez pas directement à jour les valeurs originales) et se concentre sur des définitions explicites du flux de données et de la logique de mise à jour.
  • Il vous offre des fonctionnalités telles que la possibilité de faire du "débogage par voyage dans le temps" (en allant et venant entre les différentes mises à jour de votre état, ou en chargeant une copie de l'état de l'application à partir d'un rapport de crash client pour voir ce qui se passait).
  • Le code Idiomatic Redux "normalise" les objets imbriqués ou relationnels, comme une base de données. Chaque élément est défini à un endroit, et d'autres parties de vos données se réfèrent à cet élément par ID uniquement, laissant les recherches pour plus tard
  • La plainte habituelle est qu'il y a trop de code " boilerplate ", et que les utilisations typiques de Redux impliquent des choses comme des constantes de chaînes de caractères et des instructions de type " switch ".
  • Utilisez-le lorsque vous souhaitez suivre explicitement le flux de données à travers votre application, ou lorsque vous voulez savoir exactement pourquoi votre application s'est retrouvée dans un certain état.

• MobX est influencé par les principes de la programmation orientée objet et de la programmation réactive :

  • Il vous permet de définir des éléments de données spécifiques comme étant "observables", puis de les envelopper et de suivre toutes les modifications apportées à ces données et de mettre automatiquement à jour tout autre élément de code qui observe les données.
  • Il encourage l'utilisation de code de mutation standard, comme someObject.someField = someValue, et someArray.push(someValue), la véritable logique de mise à jour étant cachée à l'intérieur de MobX.
  • Le code Idiomatic MobX conserve vos données sous forme imbriquée et maintient des références directes d'un objet à l'autre.
  • L'un des reproches possibles est que vous ne voyez pas autant quand et comment vos données sont mises à jour, et qu'il peut être plus difficile d'en suivre l'évolution dans l'application
  • Utilisez-le si vous préférez un style OOP à un style fonctionnel, si vous préférez que vos données soient représentées et manipulées par des classes plutôt que par de simples fonctions, ou si vous voulez écrire une logique de mise à jour moins explicite et laisser la bibliothèque faire le travail de gestion des choses.

Pour des comparaisons plus approfondies, je vous recommande vivement l'exposé de Preethi Kasireddy MobX vs Redux : comparaison des paradigmes opposés de ReactConf 2017, et l'article de Robin Wieruch Redux ou MobX : une tentative de dissiper la confusion . J'ai également un nombre d'autres comparaisons collectées dans ma liste de liens React/Redux .

Answer 2

MobX et Redux tentent de résoudre des problèmes similaires en utilisant des approches différentes. L'objectif principal étant la gestion de l'état dans les applications javascript.

Le problème central est ici la synchronisation efficace et optimale des informations entre votre source de données principale et l'interface utilisateur, par le biais de toutes les couches et de tous les mécanismes de transport que vous avez entre les deux.

@saiki lien a déjà écrit une excellente analyse comparative riche en exemples, qui vous aide à comprendre à quoi ressemblerait un code écrit en utilisant MobX vs Redux.

MobX adopte une approche souvent appelée MVVM déclaratif :

Redux adopte la programmation fonctionnelle et la transparence référentielle :

State est un simple objet javascript. On ne le modifie jamais directement, mais on obtient un nouvel état mis à jour lorsque quelque chose se produit dans l'application (ce qui entraîne l'exécution d'une action) par le biais de fonctions pures.

Pour plus de détails, vous pouvez consulter cet exemple parExemple