Mastering Large-Scale React State Management with MobX
When building complex React applications, it’s essential to have a well-structured and clearly defined app state. In this article, we’ll explore how to leverage MobX for large-scale applications, focusing on structuring app state, defining relationships between data, making network calls, and loading data in stores.
Getting Started
To begin, create a TypeScript React app using create-react-app. Install the necessary dependencies, including MobX, and delete unnecessary files. We’ll build a simple blog app with three entities: users, posts, and comments.
Defining Entity Types
Create types for each entity in a types folder under src. For example, user.ts would contain the user type definition. Next, create types for posts and comments.
The App Store
Create a folder called stores under src and define the app store in app.ts. This file will contain all the stores of the app. For now, make it an empty class.
Creating Models
Create a folder called models under src and implement the models for each entity. Each model will implement the corresponding type and define relationships with other entities. For example, the user model will have a constructor that takes two parameters: the AppStore and the user type.
Creating Stores in MobX
Create stores for each entity, starting with the user store. Define a load method to load data into the store and a getter property to return all user records. Make the store observable by using observable.map from MobX and decorating the load method with action.
Defining Relationships
Define relationships between models. For example, the user model will have many posts, which can be coded as a computed property derived from the post store.
Coding the Network Layer
Create an AppApi class to handle network calls and load data into stores. Separate the network layer from the stores, so the store doesn’t know where the data is loaded from. Create API clients for each resource, such as users, posts, and comments.
App Context
Use React Context to provide the store and API to components. Create a type for the context, which has two properties: store and api. Then, create a React Context called AppContext to provide the store and API to the app.
Using Components with MobX
Create components for each page, such as the home page, post page, and user page. Use the useAppContext hook to get the store and API, and wrap components with observer from mobx-react to observe changes to observables from the store.
Building Pages
Create pages for the app, such as the home page, post page, and user page. Use the useAppContext hook to get the store and API, and load data into the store using the API clients.
The Root App Component
Create the root app component, App.tsx, to instantiate the store and API, and provide it to the app through AppContext.Provider. Use BrowserRouter from react-router-dom to render pages.
With this, we’ve successfully built a large-scale React app using MobX for state management!