ReactMobx Hooks
Hameed Damee
MobX Hooks
In the first part of this series, we learned the basics of MobX and went on to build a blog app with react and MobX. MobX is a state management library, and in this article, we will be introducing the MobX hook APIs.
What is a MobX hook?
MobX hook gives us the ability to use MobX with the functional programming paradigm. They enable us to keep the functionality of MobX without having to use classes.
Fundamentally, using Mobx hooks within React components requires 2 APIs:
- useLocalObservable - We use this to create the MobX store. It holds information about the state and actions used by the state.
useLocalObservableis the replacement for themakeObservablemobX API we used in the first part of this series. - Observer - As demonstrated in the first part of this series, the
observerallows a React component to keep watch on the state in real-time.
Building a blog app with Mobx Hook
We have a blog app in the starter file and we will add MobX hook APIs to the blog app. In doing this, we set up MobX to manage the state within our component, and with the help of React Context, we would manage the app state globally.
Setting up the Local Store
Starting with the local state management, we would dive straight into component/Post/index.tsx. This page renders the form for creating posts and the lists of posts in the state. The component should look something 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
...
export const Posts = ()=>{
const blogPosts = [
{ id: 3433, title: "title 3433", content: "content 3433" },
{ id: 3434, title: "title 3434", content: "content 3434" }
]
const handleOnSubmit = (e: any, data: any, resetForm: any )=>{
e.preventDefault()
if (data.title !== "") {
// Submit actions goes here
resetForm()
}
}
return <div>
<h1>All post</h1>
<BlogForm handleOnSubmit={handleOnSubmit} />
<div>
{blogPosts.map(blog => <BlogCard key={blog.id} blog={blog}/>)}
</div>
</div>
}Next, we run the command npm i mobx-react or yarn add mobx-reactto install mobx-react. Then, we import the useLocalObservable hook and include the store in the component. Our post also needs an IBlogPost Interface
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { useLocalObservable } from "mobx-react"
export interface IBlogPost {
id: string;
title: string;
content: string;
}
...
const store = useLocalObservable(() => ({
posts: [] as IBlogPost[],
}))
...1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { v4 as uuidv4 } from 'uuid';
...
const store = useLocalObservable(() => ({
posts: [] as IBlogPost[],
createPost(title: string, content: string) {
const post: IBlogPost = {
id: uuidv4(),
title,
content
}
this.posts.push(post)
},
deletePost(id: string | undefined) {
const index = this.posts.findIndex(post => post.id === id)
if (index > -1) this.posts.splice(index, 1)
}
}))
...Now we can use the store variable to interact with our component. We proceed to update the handleSubmit to create a post with the createPost action.
1
2
3
4
5
6
7
8
9
10
11
12
...
const handleOnSubmit = (e: any, data: IFormData, resetForm: any) => {
e.preventDefault()
if (data.title !== "") {
store.createPost(data.title, data.content)
resetForm()
}
}
...When you start up the app, and create a post, you notice that the page does not update. However, if you log the posts within the createPost method, you would notice the post is updated but does not reflect in the UI.
To fix this, we would import Observer from mobx-react. The Observer takes in one value, a function that returns the HTML to be rendered on the page.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
...
return (
<Observer>
{() => (
<div>
<h1>All post</h1>
<BlogForm handleOnSubmit={handleOnSubmit} />
<div>
{store.posts.map(blog => (
<div key={blog.id}>
<h3>{blog.title}</h3>
<p>{blog.content}</p>
<div>
<button onClick={() => store.deletePost(blog.id)}>delete</button>
</div>
</div>))}
</div>
</div>
)}
</Observer>
)
...Now that the Observer is added to watch the component for changes, our app will work as expected. You can find the complete file for the MobX local strategy setup here.
Making MobX Store Available Globally in React
Though not a good practice, we will make the store available to all components in our app just to help us see MobX in action. First, we will create a folder within the components folder called the store. The store will house two files, this includes the BlogStore.ts and the BlogStoreContext. We will be updating the BlogStore.ts file first, and with it, we would return only the object properties that describe the state. We would also add a couple of methods that could be useful for our blog app.
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
import { v4 as uuidv4 } from 'uuid';
export interface IBlogPost {
id: string;
title: string;
content: string;
likes: number;
}
export const createStore = () => ({
posts: [] as IBlogPost[],
getIndex(id: string | undefined) {
return this.posts.findIndex(post => post.id === id)
},
createPost(title: string, content: string) {
const post: IBlogPost = {
id: uuidv4(),
title,
content,
likes: 0
}
this.posts.push(post)
},
updatePost(id: string, title: string, content: string) {
const index = this.getIndex(id)
if (index > -1) {
this.posts[index].title = title
this.posts[index].content = content
}
},
deletePost(id: string | undefined) {
const index = this.getIndex(id)
if (index > -1) this.posts.splice(index, 1)
},
likePost(id: string | undefined) {
if (id === undefined) return null
const post = this.posts.find(item => item.id === id)
if (post) post.likes += 1
},
findPostById(id: string | undefined) {
if (id === undefined) return null
return this.posts.find(item => item.id === id)
},
get totalLikes() {
let totalLikes = this.posts.reduce((count, post) => count + post.likes, 0);
return totalLikes;
},
get allPosts() {
return this.posts
}
});
export type Store = ReturnType<typeof createStore>;To enable us use this store globally in the app, we would wrap our useLocalObservable in a React context Provider. This also has to be done since a react hook can only be called in a React functional component. So in our BlogStoreContext, we would have
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react';
import { useLocalObservable } from 'mobx-react';
import { createStore, Store } from './BlogStore';
const StoreContext = React.createContext<Store | null>(null);
export const BlogStoreProvider = ({ children }: any) => {
const store = useLocalObservable(createStore);
return <StoreContext.Provider value={ store }>{ children }</StoreContext.Provider>;
};
export const useBlogStore = () => {
const store = React.useContext(StoreContext);
if (!store) throw new Error('store not defined');
return store;
};Above, we are exporting the BlogStoreProvider and the useBlogStore. The BlogStoreProvider creates a store with the useLocalObservable and returns the store in a React context. The useBlogStore is basically for a cleaner code, so we don’t repeat its content everywhere the store is needed.
Now that the store and context are set, we can integrate our store with our app components. This means that we can replace the local store with the useBlogStore hook. Let’s start with the component/Posts/index.
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
import React from 'react'
import { BlogCard } from './components/BlogCard'
import { BlogForm, IFormData } from './components/BlogForm'
import { Observer } from "mobx-react"
import { useBlogStore } from '../../store/BlogStoreContext';
export const Posts = () => {
const store = useBlogStore()
const handleOnSubmit = (e: any, data: IFormData, resetForm: any) => {
e.preventDefault()
if (data.title !== "") {
store.createPost(data.title, data.content)
resetForm()
}
}
return (
<
Observer
>
{() => (
<div>
<h1>All post</h1>
<BlogForm handleOnSubmit={handleOnSubmit} />
<div>
{store.allPosts.map(blog => <BlogCard key={blog.id} blog={blog} />)}
</div>
</div>
)}
</Observer>
)
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...
import { BlogStoreProvider } from './components/store/BlogStoreContext';
function App() {
return (
<BlogStoreProvider>
<BrowserRouter>
<Routes>
<Route path="/" element={<Posts/>}/>
<Route path="/blog/:id" element={<Blog />} />
<Route path="/update/:id" element={<UpdatePost />} />
</Routes>
</BrowserRouter>
</BlogStoreProvider>
);
}
export default App;A link to the finished app can be found at the end of the article. If we start up the app now, the app should work as expected. Let's proceed to add one more state action to show mobX in action.
This calls the totalLikes method in our state and returns the number of likes our blog posts has gotten in total. There is also a like button already created in the BlogCard Component to update the likes. So we can add this under the list of posts
1
2
3
4
5
6
7
...
<div>
<h5>Our blog posts have accumulated a total of { store.totalLikes } likes.</h5>
</div>
...Now when we click the like button on any created post, the total likes increase. Also, when we delete a post, the number of likes accumulated by that post is deducted from the total likes and is updated in the UI automatically. Here is a link to the finished code
In this article, we covered the MobX hooks. We talked about the two major APIs, useLocalObservable and the Observer. We also covered how to manage application states locally and then globally with the React context. Then we applied MobX hooks in a blog application. The next part of this series will focus on performing asynchronous actions with MobX. Our blog app will be making requests to an external API, hence the need for async actions. See you soon 😉