Product
Introducing Ruby Support in Socket
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
MobX is a state management library for JavaScript applications. It enables developers to manage the application state outside of UI frameworks in a reactive way that ensures that the state is consistent and predictable. MobX uses observable data structures and automatically tracks changes, updating the UI when necessary.
Observable State
Create observable state that can be tracked and updated. When the state changes, MobX will automatically propagate changes to any computed values or reactions that depend on the changed state.
import { observable } from 'mobx';
const appState = observable({
count: 0,
increment: function() {
this.count++;
},
decrement: function() {
this.count--;
}
});
Computed Values
Define computed values that will be re-evaluated when any observable data they depend on changes. Computed values are cached and only updated when necessary.
import { computed, makeObservable } from 'mobx';
class TodoList {
todos = [];
get unfinishedTodoCount() {
return this.todos.filter(todo => !todo.finished).length;
}
constructor() {
makeObservable(this, {
todos: observable,
unfinishedTodoCount: computed
});
}
}
Reactions
Reactions are a way to automatically run side effects when observable data changes. The autorun function is one type of reaction that runs immediately and then re-runs every time its dependencies change.
import { observable, autorun } from 'mobx';
const temperature = observable.box(20);
const reaction = autorun(() => {
console.log(`Temperature is: ${temperature.get()}C`);
});
temperature.set(25); // This will trigger the autorun and log the new temperature
Actions
Actions are functions that modify observables. They are the only way to modify state in MobX, and they can be bound to the class instance using the action.bound decorator.
import { observable, action } from 'mobx';
class Store {
@observable count = 0;
@action.bound increment() {
this.count++;
}
@action.bound decrement() {
this.count--;
}
}
Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. Unlike MobX, Redux uses a single immutable state tree and pure reducer functions to handle state changes.
Vuex is a state management pattern and 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. Vuex is similar to Redux and differs from MobX in its strict emphasis on mutation tracking and less focus on reactive programming.
Immer is a tiny package that allows you to work with immutable state in a more convenient way. It uses a copy-on-write mechanism to ensure that the original state is not modified. While Immer is not a state management library like MobX, it can be used with state management libraries to simplify handling immutable data.
Simple, scalable state management
MobX is proudly sponsored by Mendix, Coinbase, Facebook Open Source, Canva, Algolia, Guilded, Auction Frontier, Mantro and TalentPlot for $100/month or more! And beyond that by many individual backers and through one time contributions.
🥇Gold sponsors ($3000+ total contribution):
🥉Bronze sponsors ($500+ total contributions):
Was MobX key in making your project a success? Join our open collective!
Support us with a monthly donation and help us continue our activities. [Become a backer]
Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]
FAQs
Simple, scalable state management.
The npm package mobx receives a total of 1,287,328 weekly downloads. As such, mobx popularity was classified as popular.
We found that mobx demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.