MobX vs Redux.js

Overview

Redux

Stacks32.0K

Followers23.6K

Votes674

MobX

Stacks847

Followers516

Votes114

GitHub Stars28.1K

Forks1.8K

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.

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

Share your Stack

Help developers discover the tools you use. Get visibility for your team's tech choices and contribute to the community's knowledge.

View Docs

CLI (Node.js)

Manual

Advice on Redux, MobX

Engineer at Refi App

Apr 14, 2021

Decided

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.

16.7k views16.7k

Comments

Detailed Comparison

Redux	MobX
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.	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.
Predictable state; Easy testing; Works with other view layers besides React	-
Statistics
GitHub Stars -	GitHub Stars 28.1K
GitHub Forks -	GitHub Forks 1.8K
Stacks 32.0K	Stacks 847
Followers 23.6K	Followers 516
Votes 674	Votes 114
Pros & Cons
Pros 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 Cons 13 Lots of boilerplate 6 Verbose 5 Design 5 Steep learning curve 4 Steeper learning curve than RxJs	Pros 26 It's just stupidly simple, yet so magical 18 Easier and cleaner than Redux 15 Fast 13 Automagic updates 13 React integration Cons 1 Maturity
Integrations
JavaScript React	React

What are some alternatives to Redux, MobX?

Zustand

Small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, that isn't boilerplatey or opinionated, but still just enough to be explicit and flux-like.

Effector

It is an effective multi-store state manager for Javascript apps, that allows you to manage data in complex applications.

redux-saga

An alternative side effect model for Redux apps

vuex

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.

redux-thunk

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.

Unstated

State so simple, it goes without saying

reselect

Simple “selector” library for Redux (and others) inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskater.

Redux Observable

It allows developers to dispatch a function that returns an observable, promise or iterable of action(s). Compose and cancel async actions to create side effects and more.

Recoiljs

It is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

XState

It is a library for creating, interpreting, and executing finite state machines and statecharts. It's a really powerful package that can be used to manage state in React Apps.

Related Comparisons

MobX vs Redux.js: What are the differences?

Introduction

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

MobX vs Redux.js

Overview

MobX vs Redux.js: What are the differences?

Introduction

Share your Stack

Advice on Redux, MobX

Why Electron over macOS

Why Recoiljs over Redux or something else

Why not Redux? Zustan? DVA?

Why not MobX? MST?

Why Recoil?

Detailed Comparison

What are some alternatives to Redux, MobX?

Zustand

Effector

redux-saga

vuex

redux-thunk

Unstated

reselect

Redux Observable

Recoiljs

XState

Related Comparisons

Bootstrap vs Materialize

Django vs Laravel vs Node.js

Bootstrap vs Foundation vs Material UI

Node.js vs Spring-Boot

Flyway vs Liquibase

MobX vs Redux.js

Overview

MobX vs Redux.js: What are the differences?

Introduction

Share your Stack

Advice on Redux, MobX

Why Electron over macOS

Why Recoiljs over Redux or something else

Why not Redux? Zustan? DVA?

Why not MobX? MST?

Why Recoil?

Detailed Comparison

What are some alternatives to Redux, MobX?

Zustand

Effector

redux-saga

vuex

redux-thunk

Unstated

reselect

Redux Observable

Recoiljs

XState

Related Comparisons

Bootstrap vs Materialize

Django vs Laravel vs Node.js

Bootstrap vs Foundation vs Material UI

Node.js vs Spring-Boot

Flyway vs Liquibase