What is MobX ?

MobX is a library for managing state in React applications. It’s often used with React to provide a simple and efficient way to manage state in complex applications. MobX uses a reactive programming approach to automatically update the UI whenever the application state changes. This makes it easy to build applications that are fast and responsive to user actions.

“MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP).”

In addition, some of the core principles of MobX include:

· May have multiple stores to store the state of the application

· The state of the entire application is stored in a single object tree

· Action in any piece of code can change the state of the application

· All derivations from the state are automatically and atomically updated when the state is changed

MobX: Core concepts

In addition to being a library, MobX also introduces a few concepts: state, actions, and derivations (including reactions and computed values).

The core concepts of MobX in React are:

Observables: These are the values that you want to track and react to changes in. In MobX, you can mark any piece of state as observable, which allows components to “observe” those values for changes.

Computed values: These are values that are derived from one or more observables. In MobX, you can create computed values using functions, and these values will automatically update whenever the observables they depend on change.

Actions: These are the functions that update your observable state. In MobX, you can mark any function that modifies observables as an action, which allows MobX to automatically track the changes that the function makes.

Reactions: These are the components or functions that react to changes in your observable state. In MobX, you can create reactions using the observer decorator or the useObserver hook, which will automatically update the components or functions whenever the observables they are observing change.

Overall, the core concepts of MobX in React are designed to make it easier to manage state and react to changes in your application. By using observables, computed values, actions, and reactions, you can create applications that are more reactive and easier to reason about.

MobX data flow

1. You mark certain pieces of state as observables, which allows components to “observe” those values for changes.
2. You create computed values, which are derived from one or more observables. These values will automatically update whenever the observables they depend on change.
3. You create actions, which are functions that update your observable state. Whenever you call an action, MobX automatically tracks the changes that the function makes to observables.
4. You create reactions, which are components or functions that react to changes in your observable state. Whenever an observable value that a reaction is observing changes, the reaction will automatically update.

In this way, MobX helps to manage the flow of data in your application and ensures that your UI stays up-to-date with the latest state. When an observable value changes, MobX automatically updates any computed values or reactions that depend on that value, so you don’t have to worry about manually updating your UI.

MobX Example:

import { observable, action } from 'mobx';
import { observer } from 'mobx-react';

// Create a new instance of the `AppStore`
const appStore = new AppStore();

// Define a `Todo` component that uses the `observer` HOC to automatically
// update the UI whenever the `todos` array in the `appStore` changes
const Todo = observer(({ todo }) => {
  return <div>{todo.title}</div>;
});

// Define the `App` component that uses the `observer` HOC to automatically
// update the UI whenever the `appStore` changes
const App = observer(() => {
  return (
    <div>
      {appStore.todos.map(todo => (
        <Todo todo={todo} key={todo.id} />
      ))}
    </div>
  );
});

// Define the `AppStore` class that manages the application state
class AppStore {
  // Use the `observable` decorator to mark properties that will be used to
  // manage application state
  @observable todos = [];

  // Use the `action` decorator to mark methods that modify application state
  @action addTodo(title) {
    this.todos.push({
      id: Date.now(),
      title,
    });
  }
}

In this example, the App component uses the observer Higher-Order Component (HOC) from the mobx-react library to automatically update the UI whenever the appStore changes. The appStore itself uses the observable decorator from the mobx library to mark properties that will be used to manage application state, and the action decorator to mark methods that modify application state.

Whenever the addTodo method is called, it updates the todos array in the appStore, which automatically triggers the UI to update via the observer HOC. This makes it easy to build applications that are fast and responsive to user actions without having to manually manage updates to the UI.

REDUX VS MOBX?

Both Redux and MobX are libraries for managing state in React applications. Redux is a more popular and widely used library, while MobX is a newer library that aims to provide a simpler and more intuitive way of managing state.

Redux is based on the idea of a single, immutable state tree. This means that the state of your entire application is represented by a single JavaScript object, and whenever you want to update the state, you create a new object with the new values. This approach makes it easy to reason about your application state and allows for powerful features like time-travel debugging.

MobX, on the other hand, takes a more reactive approach to state management. In MobX, you can mark certain pieces of state as “observable” and components can “observe” these values for changes. When an observable value changes, MobX automatically updates any components that are observing that value, so you don’t have to worry about manually updating your UI.

Both libraries can be used to manage state in React applications, but they have different approaches and tradeoffs. Redux is a more robust and feature-rich library, but it can be more difficult to learn and can make your code more verbose. MobX is easier to learn and can make your code more concise, but it may not have all the features of Redux. Ultimately, the choice between the two libraries will depend on your specific needs and preferences.