ReactReact State Management with MobX
Hameed Damee
React State Management with MobX
As a frontend application grows, the need to have centralized state management without having to pass props down at every level arises. Several tools cater to this need and among them, we have the React Context API, Redux, and MobX.
This article is the first part of a series of articles in which I will demonstrate how a frontend application can be set up using MobX as the state management tool. In this part, we will cover the basics required to get MobX up and running, so grab your coat, cos we’re about to go on a MobX ride 😉
Why MobX?
MobX is a state management library that leverages functional reactive programming for simple and scalable state management in applications. There are several advantages MobX has over Redux, and in this article, we explore one of those - the simplicity of setup.
MobX, unlike Redux, is very easy to set up. You only require 4 MobX APIs to set up MobX in your application. These APIs are:
makeObservableobservableactionscomputed
To demonstrate these APIs, we will create a blog application. Within our blog app, we will be able to create, read, update and delete a blog post. In order to make it concise, and focused on MobX, we would exclude styling, error handling, as well as a connection to a backend API service.
Setting up the Project
Here is a link to the starter file, which is a basic react app, with a homepage listing blog posts, and a page to view a single blog post, and also update the blog post. An additional package, uuid has been included for the generation of unique ids. To get started with the app, we run npm install to install all the dependencies.
At this point, starting the server using the command npm start, should lead us to a page that looks like this 👇🏽
Now that we’re all set, we proceed with MobX by installing it as a dependency:
1
npm install mobxCreating a MobX Store with makeObservable
The first step is to create aBlogStore.ts file in the src/storedirectory which will contain a BlogModel class. Then we import makeObservable. makeObservable takes two arguments, the class in which makeObservable is called (using thiskeyword) and an object. In this object, we “describe the role of the class properties”.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { makeObservable } from "mobx"
export interface IBlogPost {
id: number;
title: string;
content: string;
}
export class
Blog
Model {
posts: BlogPost[] = []
constructor(){
makeObservable(this, {})
}
}
export const blogStore = new
BlogModel()For example, we would need to “describe” the class property, posts , as an observable. This ensures our components can “react” to changes made to posts. To do so, we will import observable from MobX.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { makeObservable, observable } from "mobx"
...
export class BlogModel {
posts: BlogPost[] = []
constructor(){
makeObservable(this, {
posts: observable
})
}
}
...Adding Actions to a MobX Store with actions
We need actions to mutate the store state. And yes, you read it right, mutate. Unlike Redux, which kicks against state mutation, MobX allows it. However, it efficiently handles the impact of state mutation under the hood. Before proceeding we will need to import the action type from the mobx library.
We will add the `createPost`, `updatePost`, and `deletePost` methods to our store setup like so:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import { v4 as uuidv4 } from 'uuid';
import { makeObservable, observable, action } from "mobx"
export class BlogModel {
posts: BlogPost[] = []
constructor(){
makeObservable(this, {
posts: observable
})
}
private getPost(id:string | undefined) {
return this.posts.find(post => post.id === id)
}
createPost(title: string, content: string){
const post: BlogPost = {
id: uuidv4(),
title,
content,
likes: 0
}
this.posts.push(post)
}
updatePost(id: string, title: string, content:string){
const post = getPost(id)
if(post){
post.title = title
post.content = content
}
}
deletePost(id:string | undefined){
const index = this.posts.findIndex(post => post.id === id)
if(index > -1) this.posts.splice(index,1)
}
findPostById(id: string | undefined ){
return getPost(id)
}
}
export const blogStore = new BlogModel()Having defined these methods, we would need MobX to recognize them as actions. To achieve this, they have to be included in the makeObservable that describes our store. Once included, the constructor would look like this:
1
2
3
4
5
6
7
8
9
constructor(){
makeObservable(this, {
posts: observable,
createPost: action,
updatePost: action,
deletePost: action,
findPostById: action
})
}Getting State Derived Values with computed
Imagine we want to get the total likes our blog posts have garnered. How can we ensure that we receive the accurate figure from our store at all times? computed is the key. With the computed API, we can “compute” the values of the state and can rest, assured that MobX will return the most recent, accurate value. To demonstrate this, let’s introduce another prop to our blog post like so:
1
2
3
4
export interface IBlogPost {
...
likes: number;
}Then we define a getter method in our store to calculate the total likes on all our posts:
1
2
3
4
5
get totalLikes() {
let totalLikes = this.posts.reduce((count, post) => count + post.likes, 0);
return totalLikes;
}Wait a minute! something does seem to be missing. Yes, you guessed right, an action hasn’t been created for liking posts. We create it thus:
1
2
3
4
5
6
7
8
...
likePost(id: string | undefined){
const post = getPost(id)
if(post) post.likes += 1
}
...And we further include it in the makeObservable as an action
1
2
3
4
5
6
constructor(){
makeObservable(this, {
...
likePost: action
}
}Finally, we would need to mark totalLikes as a computed value like so:
1
2
3
4
5
6
constructor(){
makeObservable(this, {
...
totalLikes: computed,
})
}With this done, we have successfully set up all that we need in our store and we should have our store looking like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import { v4 as uuidv4 } from 'uuid';
import { makeObservable, observable, action, computed } from "mobx"
export interface IBlogPost {
id: string;
title: string;
content: string;
likes: number;
}
export class BlogModel {
posts: BlogPost[] = []
constructor(){
makeObservable(this, {
posts: observable,
createPost: action,
updatePost: action,
deletePost: action,
findPostById: action,
totalLikes: computed,
})
}
private getPost(id:string | undefined) {
return this.posts.find(post => post.id === id)
}
createPost(title: string, content: string){
const post: BlogPost = {
id: uuidv4(),
title,
content,
likes: 0
}
this.posts.push(post)
}
updatePost(id: string, title: string, content:string){
const post = getPost(id)
if(post){
post.title = title
post.content = content
}
}
deletePost(id:string | undefined){
const index = this.posts.findIndex(post => post.id === id)
if(index > -1) this.posts.splice(index,1)
}
findPostById(id: string | undefined ){
return getPost(id)
}
likePost(id: string | undefined){
const post = getPost(id)
if(post) post.likes += 1
}
get totalLikes() {
let totalLikes = this.posts.reduce((count, post) => count + post.likes, 0);
return totalLikes;
}
}
export const blogStore = new BlogModel()MobX setup with React
Next, we will need to connect our store to our react component. In the Posts/index.tsx, we will import our store like so:
import { blogStore } from '../../store/BlogStore'
Because we are importing an instance of the BlogModel, we can use the instance right away in our component. Then we modify our handleForm to call the createPost method:
1
2
3
4
5
const handleOnSubmit = (e: any, data: any, resetForm: any )=>{
e.preventDefault()
blogStore.createPost(data.title, data.content)
resetForm()
}Next, we iterate over the posts like so:
1
2
3
4
5
6
7
8
9
10
11
{blogStore.posts.map(
blog
=> <BlogCard
key
={
blog
.id}
blog
={
blog
}/>)}And add our `totalLikes` as well:
1
<h5>Our blogs post is liked {blogStore.totalLikes} times</h5>With all this set, we can try creating a blog post and submitting it via the form. We would notice the DOM will not be updated when we create a blog post. The latest div would remain empty, the reason being that the component is not looking out for changes in the MobX store. With the help of mobx-react, this can be fixed. First, we install mobx-react with the command npm install mobx-react. Then from mobx-react, we can import an observer within which the component will be wrapped.
import {observer} from 'mobx-react'
The Posts component should look like this once updated:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from 'react'
import { blogStore } from '../../store/BlogStore'
import { BlogCard } from './components/BlogCard'
import { BlogForm } from './components/BlogForm'
import { observer } from 'mobx-react'
export const AllPosts:React.FC = observer(()=>{
const handleOnSubmit = (e: any, data: any, resetForm: any )=>{
e.preventDefault()
blogStore.createPost(data.title, data.content)
resetForm()
}
return <div>
<h1>All post</h1>
<BlogForm handleOnSubmit={handleOnSubmit} />
<div>
{blogStore.posts.map(blog => <BlogCard key={blog.id} blog={blog}/>)}
</div>
<h5>Our blog posts have been liked {blogStore.totalLikes} times</h5>
</div>
})Summary
In this article, we have introduced MobX and covered the four core APIs required to set up MobX in a react application. We have gone ahead to create a simple blog app within which we enabled the ‘create’, ‘update’, and ‘delete’ actions on a blog post, you can find the code of this tutorial here. Coming up in the next part is an introduction to MobX hooks and as with this article, we will create a simple blog app, using MobX hooks. For now, you can add unlike blog post feature to our blog as an exercise. See you soon 😉