Forget Redux and get started with mobx under 5 minutes

TL;DR Here is the video tutorial https://youtu.be/eJhULpC7mjk and here is the Github repo https://github.com/thebikashweb/react-mobx-todo

If you are a beginner in front-end development, you might find Redux to be a bit complex and overwhelming. With Redux, you have to deal with concepts like actions, dispatchers, reducers, and stores, which can take a while to understand. Fortunately, there is an alternative to Redux called Mobx, which is much simpler to use and understand. Best part it is scalable and can be used in a bigger project.

What is mobx?

Mobx is a lightweight and straightforward state management library that enables developers to manage the state of their React applications without much complexity. With Mobx, you don’t have to deal with the complex concepts of Redux, making it a great option for beginners.

What are unique features of Mobx?

1. Observable State: One of the key features of Mobx is its use of observable state. This means that any changes made to a particular state are automatically reflected in any component that uses that state. This makes it easy to manage the state of your application without having to worry about passing props around.
2. Computed Values: With Mobx, you can easily create computed values that are derived from other observable values. This makes it easy to create complex states without having to write a lot of code.
3. Automatic Dependency Tracking: Another unique feature of Mobx is its automatic dependency tracking. This means that any changes made to an observable state automatically trigger an update in any component that depends on that state. This eliminates the need for manual updates, making it much easier to manage your application’s state.
4. Easy to Learn: Mobx is much easier to learn than Redux. The library has a simple and intuitive API, making it easy for beginners to get started. With Mobx, you can start managing your application’s state in just a few minutes.

Let’s get started, shall we?

We are going to create a class to-do application using Mobx as a state management. If you want to jump directly into the code, you can go to this repo.

1. First create a react app. You can use Vite or create-react-app to create a react app.
2. Let’s install Mobx related modules. I am using yarn but you can do same with npm.

yarn add mobx mobx-react

3. Let’s create a todoStore. Inside the app folder create a folder called “Store”. You do not necessarily need to create this but it is a good practice to seperate all your store inside a store folder. Additionally, you can also have store for each of your entities.

Then inside the store folder create a file todoStore.ts unlike Redux we do not need to do any setup in the root component or pass any store around. This single file can do everything regarding the todo store.

Inside the todoStore.ts we’ll import makeAutoObservable from “mobx”.
This is all we need to create the Mobx store. makeAutoObservable will take care of making your states reactive, and takes the necessary types from your state declaration, action declaration and computed property declaration.

Now, we’ll create a class TodoStore, declare the variable/state todos, create a constructor and wrap this inside makeAutoObservable, then we’ll export the instance of store class. Something like below.

Notice, I have also imported TodoType. TodoType is inside a types folder and looks something like this.

export type TodoType = {
  title: string;
  isCompleted: boolean;
  id: string;
};

Now, let’s add few actions to our todoStore.ts.

First, we will create addTodo action which will take title as argument. Then we will create a todo payload by adding unique id. I am using uuid module for that but you can however you like. Additionally, we are also adding a isCompleted property which is false by default. We will use isCompleted property to track whether the todo is completed or not.

Then we will create two more action. toggleIsCompleted is for marking todo completed or not and deleteTodo is to delete a todo.

Apart from those actions we will also add two computed action that will give us incompleteTodos and completedTodos. You can also do this directly in the component wherever you are rendering todos but I just wanted to demonstrate the computed example in Mobx.

Now, our todoStore.ts should look something like this.

Basically, our store setup is done. Now lets use the todoStore inside component. You can import todoStore just like you would import any file. For this tutorial, I have created a TodoItems component to render all our todos. Additionally, I have created a single TodoItem to render a single todo.

You can access todos state, computed state and actions just like you would access anything else from object.

This is how App.tsx looks like.

and, this is how TodoItems.tsx looks like.

and TodoItem.tsx

Did you notice in App.tsx and TodoItems.tsx I am wrapping the whole item inside a observer? Observer comes from mobx-react and this is what tracks any state changes in our Mobx store.

And that’s it! Now you have fully working state management in your React app.

You can extend this by creating more stores and you can import multiple store inside any component the same way we are importing todoStore.

There are more stuffs in mobx such as Reaction, Autorun etc. These are side effects used if you want to run any action in certain state changes.

If you enjoyed going through this article, give me few claps and consider following me. If you have any comments start a discussion. Thank you for reading this ❤️