What are the advantages and disadvantages of mobx and Redux, particularly in a React-Native environment? [closed]

Question

Lately I've been hearing everyone talking about mobx, I've used (am using) Redux in a production React Native application.

I'm just looking to see if anyone has experience with both and can advise where each one holds advantages over the other.

Answer 1

I'll paste a summary of their approaches I wrote in a Reddit comment:

• Redux is heavily influenced by Functional Programming principles:

  • It encourages use of "pure" functions, wants you to handle your data "immutably" (ie, make copies and modify the copies, don't directly update the original values), and focuses on explicit definitions of data flow and update logic.
  • It gives you features like the ability to do "time-travel debugging" (stepping back and forth between individual updates to your state, or loading in a copy of the app state from a customer crash report to see what was going on).
  • Idiomatic Redux code "normalizes" nested or relational objects, like a database. Each item is defined in one place, and other parts of your data would refer to that item by ID only, leaving lookups for later
  • The usual complaint is that there's too much boilerplate code, and that typical Redux usages involves things like string constants and switch statements.
  • Use it when you want to explicitly track the flow of data through your application, or want to see exactly why your application wound up in a certain state.

• MobX is influenced by Object-Oriented Programming and Reactive Programming principles:

  • It lets you define specific pieces of data as being "observable", then wraps those up and tracks any changes made to that data and automatically updates any other piece of code that is observing the data.
  • It encourages use of standard mutating code, like someObject.someField = someValue, and someArray.push(someValue), with the real update logic being hidden internal to MobX.
  • Idiomatic MobX code keeps your data in nested form and maintain direct references from one object to another
  • One possible complaint would be that you don't see as much of when and how your data is being updated, and it may be harder to track through the application
  • Use it when you prefer an OOP style over Functional, prefer your data to be represented and manipulated by classes instead of plain functions, or want to write less explicit update logic and let the library do the work of managing things.

For more in-depth comparisons, I can highly recommend Preethi Kasireddy's talk MobX vs Redux: Comparing the Opposing Paradigms from ReactConf 2017, and Robin Wieruch's article Redux or MobX: An attempt to dissolve the confusion . I also have a number of other comparisons collected in my React/Redux links list.

Answer 2

MobX and Redux try to solve the similar problems using different approaches. The main objective being; state management in javascript applications.

The core problem here is effective and optimal synchronization of information between your primary data source and the user interface, through whatever layers and transport mechanisms you have in between.

@saiki link has already written a great comparative analysis rich with examples, which helps you understand what code would look like when written using MobX vs Redux.

MobX embraces an approach often called Declarative MVVM:

Redux embraces functional programming and referential transparency:

State is a plain javascript object. You never mutate it directly, but instead, derive a new updated state when something happens in the application (which result in action dispatch) through pure functions.

for more details you can go through this example byExample