When an app becomes bigger and more states to manage. We can add more stores making the store specific to their usage. In this post, I am going to share my approach to how to manage states with multiple stores to your react site.
Get started
Assumed you have a React app ready, we can install the necessary dependencies to work with MobX.
npm i mobx mobx-react
Create stores
We will create 2 stores, user and note store, user store will only have a user name as observable and a set function to modify the name. Note store will be keeping an array of notes. To display communication between stores, each note will have the user name who posts the note. Afterward, we can use the store to our app using hooks.
To begin, create a new folder called stores in the src directory
/src/stores/
Create user store
Add a new file inside stores folder /src/stores/user.store.js
// src/stores/user.store.js
import { makeAutoObservable } from "mobx";
class userStore {
name = "John doe";
constructor() {
makeAutoObservable(this);
}
setUserName = (name) => {
this.name = name;
};
}
export default userStore;
the
makeAutoObservableutility function introduced in MobX version 6.0 and above, you can use makeObservable/decorate if you use the older version of MobX.
Create note store
Add a new file inside stores folder /src/stores/note.store.js
// src/stores/note.store.js
import { makeAutoObservable } from "mobx";
class noteStore {
notes = [];
constructor() {
makeAutoObservable(this);
}
addNote(note) {
let send_note = { note };
this.notes.push(send_note);
}
}
export default noteStore;
Link the stores together
We will create context hooks as the interface to connect to the stores using hooks and create a root/main store that will link all of our stores. Root store will also be used to communicate between stores
Create root store
Add an index file inside stores folder /src/stores/index.js
// src/stores/index.js
import UserStore from "./user.store";
import NoteStore from "./note.store";
class RootStore {
constructor() {
this.userStore = new UserStore(this)
this.noteStore = new NoteStore(this)
}
}
note that we are passing
thisto the stores so that every store will have access to other stores by accessing the context passed to their constructor
Communicate between stores
Modify note store /src/stores/note.store.js so that each note addition will have the user name who post it
// src/stores/note.store.js
import { makeAutoObservable } from "mobx";
class noteStore {
notes = [];
// `this` from rootstore passed to the constructor and we can
// assign it to a variable accessible in this class called
// `rootStore`. Therefore, we can access other store like
// useStore for e.g (this.rootStore.userStore)
constructor(rootStore) {
this.rootStore = rootStore;
makeAutoObservable(this);
}
addNote(note) {
let send_note = { note };
// check if name is available on userstore
if (this.rootStore.userStore.name) {
send_note.username = this.rootStore.userStore.name;
}
this.notes.push(send_note);
}
}
export default noteStore;
Expose stores from context
Modify index /src/stores/index.js to use react context on the root store
import React from "react";
import UserStore from "./user.store";
import NoteStore from "./note.store";
class RootStore {
constructor() {
this.userStore = new UserStore(this)
this.noteStore = new NoteStore(this)
}
}
const StoresContext = React.createContext(new RootStore());
// this will be the function available for the app to connect to the stores
export const useStores = () => React.useContext(StoresContext);
Use the stores in the app
All store setup is now done, Great!. now it's time to use them in our app.
We will create the component in
src/App.jsfile to access the stores, the component will have two input fields,
the first input field will be to change the name. the name changed will be reflected in a text above the input field.
the second input field will be to add a new note. note list can be found below the input field.
// src/App.js
import { useState } from "react";
import { useObserver } from "mobx-react";
// this is the hook function we have made on `stores/index.js` to access all of our stores
import { useStores } from "./stores";
export default function App() {
// here you can access all of the stores registered on the root store
const { noteStore, userStore } = useStores();
const [note, setNote] = useState("");
// tracking the name change
const handleNameChange = (e) => {
e.preventDefault();
const {
target: { value }
} = e;
// access the user store set name action
userStore.setUserName(value);
};
// tracking the note change
const handleNoteChange = (e) => {
e.preventDefault();
const {
target: { value }
} = e;
setNote(value);
};
const addNote = () => {
// access the note store action adding note to the notes array
noteStore.addNote(note);
};
// since we want to observe the change in name and list, useObserver is required, otherwise, we can straightaway return jsx
return useObserver(() => (
<div className="App">
<h1>hello {userStore.name}</h1>
<h2>Change your name here</h2>
<input type="text" value={userStore.name} onChange={handleNameChange} />
<h2>Insert note</h2>
<input type="text" value={note} onChange={handleNoteChange} />
<button type="button" onClick={addNote}>
Add note
</button>
<h2>Note list</h2>
{noteStore?.notes?.length ? (
noteStore.notes.map((note, idx) => (
<div key={idx}>
<h3>from {note.username}</h3>
<code>{note.note}</code>
</div>
))
) : (
<p>No note on the list</p>
)}
</div>
));
}
🎉 End result
End notes
There are still many improvements that can be done from here, make stores that suit your needs, add more functions, handling APIs, persistent stores by saving them to local/session storage, and many more. Let's try those in the next post 😉
Top comments (0)