Create ToDo App using React, TypeScript and Mobx

In this story, we are creating simple app using Mobx and React. We will explore how Mobx can simplify updates at multiple places as well as how it can be used as dependency injection.

Let us create React app using CRA using npm as package manager:

npx create-react-app todoapp --template typescript --use-npm

Install Mobx

npm i mobx mobx-react mobx-utils

We will be creating simple ToDo Application for this story.

Mobx is state management library that makes state management simple, scalable and transparent. Mobx provide mechanism to synchronize application state and React Component as and only when required.

Mobx identifies if there are updates in application state by adding Observable capability. As we build application, we able to understand more on this. The sample code for this example is available at GitHub — ChiragRupani/MobxToDoAppDemo

There are 3 important steps:

1. Build ToDo Store
2. Initialize Store and make store available to any child components using ‘Provider’ component
3. Access Store using ‘Inject’ and optional props

Build Store

Lets build ToDoStore, add file ToDoStore.ts

ToDoModel

We have marked the state data ToDos with @observable decorator , it allows Mobx to track any changes in the state. To enable decorator support in TypeScript set experimentalDecoratorsto true in CompilerOptions of tsconfig.json file. The state can be any data structure like arrays, JS Map, objects, etc.

For this example, we are created sample server side app using .NET 5.0, the code for this is present at GitHub — ChiragRupani/MobxToDoAppDemo. Though you can write your sample that will return list of ToDos.

We have defined init method, that will load all todos from server. We have decorated the method with action, the actions are anything that modify the state. With bound with action, Mobx will make this in method bound to the class.Using Actions is mandatory when we are making state changes, “enforce actions” that we have configured at top enforces the same.

The action wrapper / decorator only affects the currently executing function, not functions that are scheduled from it. This means any callbacks in setTimeOut , Promises then and async constructor need to be wrapped in action as well. That’s reason we have created separate function addToDoToStore. Note, we are updating/mutating the state ToDos. You can use runInAction or flow if you don’t want to use separate callback functions. Refer Writing asynchronous actions for that. Also, the logic to call API should be placed in separate ToDoService, but for simplicity we have inlined in store itself.

Initialize and Provider Component

We have to initialize and provide store in top level component, in this example we are doing in App.tsx

We have created object of ToDoStore just like any class instance in TypeScript constructor. However, in componentDidMount lifecycle method, we have called init to fetch todos. The mobx-react package provides the Provider component to pass down stores using React's context mechanism. We can pass multiple stores using different attributes. In this example, the ToDoStore would be available in ToDoComponent and ToDoSummary and their childrens wherever we have injected store that we would look into next step

Injecting Store and observing state changes

Lets create ToDoSummary React Component

The inject connect list of store names to those stores, which will be made available as props. The names should match with one specified in Provider

We have declared optional ToDoStore as props. By marking it optional, the ToDoSummary Component can be used anywhere without requiring to pass the value for ToDoStore props, while store would be made available at runtime by Mobx. We can access state like normal JS array/objects from store.

We have added @observer decorator to the component. Now, Mobx will automatically update the view whenever the state in the store changes. Similarly, it can be added in ToDoComponent

Now, whenever new ToDo is added, both ToDoList and ToDoSummary reflect the updates, the updates are taken care by Mobx. We have used reactstrap the react version of bootstrap for styling purpose.

Last but not least, testing component injected with store. Just pass new store instance as props, to remove dependency on http calls, moving that logic to separate service allows it to mock it.

Thanks for the reading!