Need advice about which tool to choose?Ask the StackShare community!

MobX

748
515
+ 1
114
Redux

30.5K
23.3K
+ 1
674
Add tool

MobX vs Redux.js: What are the differences?

Introduction

When it comes to state management in React applications, MobX and Redux.js are two popular libraries with their own unique characteristics. Understanding the key differences between them can be crucial in choosing the right solution for your project.

  1. Data Flow: Redux.js strictly follows a unidirectional data flow pattern, where any changes to the state trigger actions that are then processed by reducers to update the state. On the other hand, MobX allows for a more flexible data flow, as changes to observable state properties can automatically trigger reactions, making it feel more reactive and less verbose than Redux.js.

  2. Configuration: Redux.js tends to have a more opinionated setup with actions, reducers, and the store being clearly defined. In contrast, MobX is more flexible and requires less boilerplate code, thanks to its observational approach where you can simply decorate properties with @observable to handle state changes.

  3. Immutability: Redux.js promotes immutability by design, requiring reducers to always return new state objects to ensure data integrity and efficient change detection. MobX, on the other hand, allows for mutable data structures which can simplify the code but may potentially lead to unintended side effects if not carefully managed.

  4. Community and Ecosystem: Redux.js, being older and more established, has a larger community and ecosystem with a wide range of tools, middleware, and dev tools available. MobX has been gaining popularity but still lags behind in terms of the overall support and resources compared to Redux.js.

  5. Learning Curve: Due to its strict guidelines and patterns, Redux.js often has a steeper learning curve for beginners, especially when grasping concepts like actions, reducers, and the store. MobX, with its more intuitive data flow and less boilerplate code, may be easier for newcomers to pick up and start using effectively.

  6. Performance: In terms of performance, MobX tends to excel in scenarios where there are frequent, small updates to the state, as it optimizes reactivity and minimizes unnecessary re-renders. Redux.js can struggle with performance in complex applications due to its rigid data flow and need for immutable updates, potentially causing unnecessary re-renders.

In Summary, understanding the key differences between MobX and Redux.js, such as data flow, configuration, immutability, community support, learning curve, and performance, can help developers make informed decisions on which library best suits their project needs.

Decisions about MobX and Redux
Le Thanh
Why Electron over macOS
  • Since this is a very early stage, so I want to verify the hypothesis so that I go with Electron. It will help you build faster, cross-native app but the trade off is the performance. It's ok, if the app is get product-market fit, we will plan to move it to Native platform to bring high performance for users
Why Recoiljs over Redux or something else Why not Redux? Zustan? DVA?
  • The boilderplace is so fukin hard. Besides, it really hard for optimizing to only render a component that subscribes to a sub-tree state. I need to use selector, memorize, immutable, ...
Why not MobX? MST?
  • It has been a long time since I last use Mobx, MST. It's cool, but now the world has changed a lot, no more Class component, so I don't know it supports a lot.
  • One more thing I don't want to use MobX is that the API is changed a lot in each major version. No! I don't want to use an outdated library for the rest of my life
  • I feel can not control how Component will render when I use MobX
Why Recoil?
  • It solves my concern, each component is subscribed to a very small state object (called atom) and only render once they changed
  • It plays nice with Functional Component. You can easily change useState to useRecoilState and vice versa. It's cool because "Alway use local state, only move it to global once needed"
  • I can map the product concept to state in my brain. A cell in a table should be an atom so that the cell will render on its own.
See more
Manage your open source components, licenses, and vulnerabilities
Learn More
Pros of MobX
Pros of Redux
  • 26
    It's just stupidly simple, yet so magical
  • 18
    Easier and cleaner than Redux
  • 15
    Fast
  • 13
    Automagic updates
  • 13
    React integration
  • 10
    Computed properties
  • 8
    ES6 observers and obversables
  • 7
    Global stores
  • 3
    Flexible architecture the requeriment
  • 1
    Has own router package (mobx-router)
  • 191
    State is predictable
  • 150
    Plays well with React and others
  • 126
    State stored in a single object tree
  • 79
    Hot reloading out of the box
  • 74
    Allows for time travel
  • 14
    You can log everything
  • 12
    Great tutorial direct from the creator
  • 7
    Endorsed by the creator of Flux
  • 7
    Test without browser
  • 6
    Easy to debug
  • 3
    Enforces one-way data flow
  • 3
    Granular updates
  • 2
    Blabla

Sign up to add or upvote prosMake informed product decisions

Cons of MobX
Cons of Redux
  • 1
    Maturity
  • 13
    Lots of boilerplate
  • 6
    Verbose
  • 5
    Steep learning curve
  • 5
    Design
  • 4
    Steeper learning curve than RxJs
  • 4
    Steeper learning curve than MobX

Sign up to add or upvote consMake informed product decisions

- No public GitHub repository available -

What is MobX?

MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). React and MobX together are a powerful combination. React renders the application state by providing mechanisms to translate it into a tree of renderable components. MobX provides the mechanism to store and update the application state that React then uses.

What is Redux?

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. t provides a great experience, such as live code editing combined with a time traveling debugger.

Need advice about which tool to choose?Ask the StackShare community!

Jobs that mention MobX and Redux as a desired skillset
What companies use MobX?
What companies use Redux?
Manage your open source components, licenses, and vulnerabilities
Learn More

Sign up to get full access to all the companiesMake informed product decisions

What tools integrate with MobX?
What tools integrate with Redux?

Sign up to get full access to all the tool integrationsMake informed product decisions

Blog Posts

JavaScriptGitHubReact+12
5
4201
Oct 11 2019 at 2:36PM

LogRocket

JavaScriptReactAngularJS+8
5
2011
JavaScriptGitHubNode.js+29
14
13634
GitHubPythonReact+42
49
40929
GitHubPythonNode.js+47
55
72784
What are some alternatives to MobX and Redux?
Relay Framework
Never again communicate with your data store using an imperative API. Simply declare your data requirements using GraphQL and let Relay figure out how and when to fetch your data.
Knockout
It is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), it can help you implement it more simply and maintainably.
GraphQL Cache
A custom middleware for graphql-ruby that handles key construction and cache reads/writes transparently.
Flux
Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.
Apollo
Build a universal GraphQL API on top of your existing REST APIs, so you can ship new application features fast without waiting on backend changes.
See all alternatives