Introduction to the newline guide to building a React App with MobX State Tree

Application Overview

State Management on the JavaScript ecosystem

State Management

What is MobX State Tree?

What will you learn in this course?

Will this course be for you?

Introduction

Introduction to the mental model of MobX State Tree

The Tree in MobX State Tree

Introduction to the store model of MobX State Tree

The Store Model

Introduction to the types in MobX State Tree

Types

Introduction to the model actions of MobX State Tree

Model Actions

Introduction to the model views of MobX State Tree

Model Views

Introduction to the store snapshots of MobX State Tree

Snapshots

Identifiers and references of MobX State Tree

Identifiers and References

Asynchronous Actions

Lifecycle Hooks

Concepts

Arrays in MobX State Tree

Maps

Working with nested stores in MobX State Tree

Nesting Stores

Optimistic Updates

Time Travel

Advanced Concepts

Overview of React and MobX State Tree

Combining MobX State Tree with React via Context and a custom Hook

Context and Hooks

Observable

React

Overview

Building Voyager

mobx-state-tree

In this course, we will create a complete React Application with the state management handled by MobX State Tree, a state container system that is built on MobX, a functional reactive state library.

MobX State Tree will give your application a solid structure and foundation for large-scale applications and for small applications that are expected to scale rapidly. In comparison to Redux, MobX State Tree outstands it in performance with much less boilerplate. MobX is one of the most popular Redux alternatives and it's used by companies all over the world, including Netflix, Grow, IBM, DAZN, Baidu, and more.

During this course, you'll learn:

* Types in MobX State Tree.
* How to create the architecture of a centralized store.
* How to mutate the state via actions that could be asynchronous or not, depending on if we need to perform network requests to persist data into a database via GraphQL.
* Understanding snapshots and how we can benefit from them to time-travel if a network request fails.
* Understanding how MobX State Tree makes use of observable properties and observers.
* Leveraging re-renders in your React Application to MobX observers for better performance optimizations.

By the end of this course, you will have the knowledge and skills that it takes to build a real-world, production-level React Application with a State Management with top-notch performance that can scale with ease.

In this course, we'll show you how to build a React App with MobX State Tree.

The newline Guide to Building a React App with MobX State Tree

How to integrate MobX State Tree within your React App

Dealing with asynchronous flows and time travel to preserve state on networking errors

How to create a scalable store using MobX State Tree

---
title: Nesting Stores
slug: nesting-stores-in-mobx-state-tree
description: Working with nested stores in MobX State Tree
role: "LESSON"
isPublicLesson: false
---

# Working with nested stores in MobX State Tree

Nesting stores in MobX State Tree is a key feature that you will constantly use. As we already know, MobX State Tree follows a structured tree concept like we saw in the first module of this course.

![Mental model of a MobX State Tree store](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.03/public/concept-of-store.jpg)

By looking at the example above, we're going to construct the resulting MobX State Tree store based on the following criteria:

1.  We need to have a root store which is used as the main accessor for the state tree.
2.  We're going to have a `User` store where we will store user data along with:

-   Notes taken by the given user which could be marked as completed (like if it was a TODO)
-   Publications made (like tweets) by the given user.

Let's start by defining our data shapes beginning with our `User` model:

```js { actualFilename=src/step0/user-store.js endChar=334 endLine=16 startChar=0 startLine=1 statedFilename=src/step0/user-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.03/src/step0/user-store.js }
import { types } from "mobx-state-tree";

export const User = types
  .model("User", {
    identifier: types.identifier,
    name: types.string,
    lastName: types.string,
    email: types.string,
    username: types.string,
  })
  .views((self) => ({
    get fullName() {
      return `${self.name} ${self.lastName}`;
    },
  }));
```

For the sake of the example, we're going to keep this store as simple as possible, because we would like to focus more on the store nesting and composition than other minor details that are not related to the subject.

Now we will proceed to define the data shape of our `Notes` model:

```js { actualFilename=src/step0/notes-store.js endChar=341 endLine=16 startChar=0 startLine=1 statedFilename=src/step0/notes-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.03/src/step0/notes-store.js }
import { types } from "mobx-state-tree";

export const Notes = types
  .model("Notes", {
    identifier: types.identifier,
    content: types.string,
    completed: types.boolean,
    createdAt: types.Date,
    updatedAt: types.Date,
  })
  .actions((self) => ({
    toggleCompleted() {
      self.completed = !self.completed;
    },
  }));
```

Again, we will keep things as simple as possible for the sake of the example.

Next up is going to be the data shape of our `Publications` model:

```js { actualFilename=src/step0/publications-store.js endChar=273 endLine=11 startChar=0 startLine=1 statedFilename=src/step0/publications-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.03/src/step0/publications-store.js }
import { types } from "mobx-state-tree";

export const Publications = types.model("Publications", {
  identifier: types.identifier,
  content: types.string,
  createdAt: types.Date,
  updatedAt: types.Date,
  likes: types.number,
  comments: types.array(types.string),
});
```

At this point, we have all the stores defined but one; our `Root Store`, which we will define now and connect pieces from top (root in the schema) to bottom (leafs in the schema).

For the `Root Store`, it will be like the following:

```js { actualFilename=src/step0/root-store.js endChar=398 endLine=15 startChar=0 startLine=1 statedFilename=src/step0/root-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.03/src/step0/root-store.js }
import { types } from "mobx-state-tree";

import { User } from "./user-store";

export const Root = types.model("Root", {
  users: types.array(User),
});

// Here we create a Root Store instance
const rootStore = Root.create();

// From this point on, we will have access
// to the `users` property within `rootStore`
console.log(rootStore.users); // [] <- Empty array because we have no data yet!
```

Now let's connect `User` with `Notes` and `Publications`:

```js { actualFilename=src/step1/user-store.js endChar=889 endLine=33 startChar=0 startLine=1 statedFilename=src/step1/user-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.03/src/step1/user-store.js }
import { types } from "mobx-state-tree";

import { Notes } from "./notes-store";
import { Publications } from "publications-store";

export const User = types
  .model("User", {
    identifier: types.identifier,
    name: types.string,
    lastName: types.string,
    email: types.string,
    username: types.string,
    notes: types.array(Notes),
    publications: types.array(Publications),
  })
  .views((self) => ({
    get fullName() {
      return `${self.name} ${self.lastName}`;
    },
  }))
  .actions((self) => ({
    addNote(note) {
      // By simply pushing the data and it will be
      // automatically converted to the appropriate model
      self.notes.push(note);
    },
    addPublication(publication) {
      // By simply pushing the data and it will be
      // automatically converted to the appropriate model
      self.publications.push(publication);
    },
  }));
```

From this point on, we will be able to access `publications` and `notes` from the `User` model.

```js { actualFilename=src/step1/access-the-store.js endChar=898 endLine=41 startChar=0 startLine=1 statedFilename=src/step1/access-the-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.03/src/step1/access-the-store.js }
import { Root } from "./root-store";

/**
 * We will create a store with some dummy data
 * for the sake of the example :)
 */
const rootStore = Root.create({
  users: [
    {
      identifier: "123",
      name: "Alex",
      lastName: "Casillas",
      email: "hi@alexvcasillas.com",
      username: "alexvcasillas",
    },
  ],
});

/**
 * We are manually accessing the first element from
 * the `users` array of `User` models.
 */
const me = rootStore.users[0]; // Let's create a variable for quick access :)

console.log(me.fullName);
// output: 'Alex Casillas'

/**
 * Now we try accessing the notes
 * from this user
 */
console.log(me.notes);
// output: [] -> Because we havent created any notes on the model yet!

/**
 * Now we try accessing the publications
 * from this user
 */
console.log(me.publications);
// output: [] -> Because we havent created any publications on the model yet!
```

Let's create some actions on the `User` model to populate `Notes` and `Publications`:

```js { actualFilename=src/step1/user-store.js endChar=889 endLine=33 startChar=0 startLine=1 statedFilename=src/step1/user-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.03/src/step1/user-store.js }
import { types } from "mobx-state-tree";

import { Notes } from "./notes-store";
import { Publications } from "publications-store";

export const User = types
  .model("User", {
    identifier: types.identifier,
    name: types.string,
    lastName: types.string,
    email: types.string,
    username: types.string,
    notes: types.array(Notes),
    publications: types.array(Publications),
  })
  .views((self) => ({
    get fullName() {
      return `${self.name} ${self.lastName}`;
    },
  }))
  .actions((self) => ({
    addNote(note) {
      // By simply pushing the data and it will be
      // automatically converted to the appropriate model
      self.notes.push(note);
    },
    addPublication(publication) {
      // By simply pushing the data and it will be
      // automatically converted to the appropriate model
      self.publications.push(publication);
    },
  }));
```

Now let's populate the notes and see how we can retrieve them.

```js { actualFilename=src/step1/populate-the-notes-store.js endChar=1090 endLine=47 startChar=0 startLine=1 statedFilename=src/step1/populate-the-notes-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.03/src/step1/populate-the-notes-store.js }
import { Root } from "./root-store";

/**
 * We will create a store with some dummy data
 * for the sake of the example :)
 */
const rootStore = Root.create({
  users: [
    {
      identifier: "123",
      name: "Alex",
      lastName: "Casillas",
      email: "hi@alexvcasillas.com",
      username: "alexvcasillas",
    },
  ],
});

/**
 * We are manually accessing the first element from
 * the `users` array of `User` models.
 */
const me = rootStore.users[0]; // Let's create a variable for quick access :)

/**
 * addNote action expectecs and object with the shape of:
 *  identifier: types.identifier,
 *  content: types.string,
 *  completed: types.boolean,
 *  createdAt: types.Date,
 *  updatedAt: types.Date,
 */
me.addNote({
  identifier: "note-1",
  content: "This is a demo note",
  completed: false,
  createdAt: new Date(),
  updatedAt: new Date(),
});

/**
 * Now we can ask for the notes on the user model
 */
console.log(me.notes);
// outputs:
// [{ identifier: 'note-1', content: 'This is a demo note', completed: false, createdAt: 2022-06-06, updatedAt: 2022-06-06 }]
```

It's time to also populate the publications and see how we can retrieve them. Spoiler alert: the same way!

```js { actualFilename=src/step1/populate-the-publications-store.js endChar=1293 endLine=47 startChar=0 startLine=1 statedFilename=src/step1/populate-the-publications-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.03/src/step1/populate-the-publications-store.js }
import { Root } from "./root-store";

/**
 * We will create a store with some dummy data
 * for the sake of the example :)
 */
const rootStore = Root.create({
  users: [
    {
      identifier: "123",
      name: "Alex",
      lastName: "Casillas",
      email: "hi@alexvcasillas.com",
      username: "alexvcasillas",
    },
  ],
});

/**
 * We are manually accessing the first element from
 * the `users` array of `User` models.
 */
const me = rootStore.users[0]; // Let's create a variable for quick access :)

/**
 * addPublication action expectecs and object with the shape of:
 *  identifier: types.identifier,
 *  content: types.string,
 *  createdAt: types.Date,
 *  updatedAt: types.Date,
 *  likes: types.optional(types.number, 0) <- If we skip this it will be 0 (zero) by default
 *  comments: types.array(types.string) <- If we skip this it will be [] (empty array) by default
 */
me.addPublication({
  identifier: "publication-1",
  content: "This is a demo publication",
  createdAt: new Date(),
  updatedAt: new Date(),
});

/**
 * Now we can ask for the publications on the user model
 */
console.log(me.publications);
// outputs:
// [{ identifier: 'publication-1', content: 'This is a demo publication', createdAt: 2022-06-06, updatedAt: 2022-06-06, likes: 0, comments: [] }]
```

How simple that was! MobX State Tree handles data processing so you can pass a snapshot with matching properties, and MobX State Tree will convert them automatically for you. If something is odd, MobX State Tree will throw you an error saying that the data provided doesn't match the model properties and its types.

Now let's take a look at how we can access models from bottom (leaf in the schema) to top (root in the schema).

First, let me introduce you to a new friend from the MobX State Tree utilty belt: `getParent(target: IAnyStateTreeNode, depth: number)`.

Let's break the `getParent` utility definition:

1.  `target` arguments expect a `Store Model` (under the hook, this is called `IAnyStateTreeNode`). Usually, you will pass `self` as a value to this parameter.
2.  `depth` arguments mean how "up" in the tree we would like to look. You always have to consider that when you're using `getParent(self)` from a model that's going to be within an array. You need to specify `2` because the `array` will count as a parent model as it works as a model on its own. In our examples, you will see we will use `getParent(self, 2)`.

Let's update the `Notes` model to retrieve the `User` model that it's nested in:

```js { actualFilename=src/step2/notes-store.js endChar=573 endLine=23 startChar=0 startLine=1 statedFilename=src/step2/notes-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.03/src/step2/notes-store.js }
import { types, getParent } from "mobx-state-tree";

export const Notes = types
  .model("Notes", {
    identifier: types.identifier,
    content: types.string,
    completed: types.boolean,
    createdAt: types.Date,
    updatedAt: types.Date,
  })
  .views((self) => ({
    get user() {
      // Returns `User` model that contains this `Notes` model
      return getParent(self, 2);
      // Note the `2` as the "depth" argument to skip the parent `Array`
    },
  }))
  .actions((self) => ({
    toggleCompleted() {
      self.completed = !self.completed;
    },
  }));
```

Now let's update the `Publications` model to retrieve the `User` model that it's nested in:

```js { actualFilename=src/step2/publications-store.js endChar=548 endLine=19 startChar=0 startLine=1 statedFilename=src/step2/publications-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.03/src/step2/publications-store.js }
import { types, getParent } from "mobx-state-tree";

export const Publications = types
  .model("Publications", {
    identifier: types.identifier,
    content: types.string,
    createdAt: types.Date,
    updatedAt: types.Date,
    likes: types.optional(types.number, 0),
    comments: types.array(types.string),
  })
  .views((self) => ({
    get user() {
      // Returns `User` model that contains this `Publications` model
      return getParent(self, 2);
      // Note the `2` as the "depth" argument to skip the parent `Array`
    },
  }));
```

After everything is set up, we can very easily retrieve the `user` model from the `notes` and the `publications` that are contained within it.

```js { actualFilename=src/step2/get-user-from-notes.js endChar=1239 endLine=49 startChar=0 startLine=1 statedFilename=src/step2/get-user-from-notes.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.03/src/step2/get-user-from-notes.js }
import { Root } from "./root-store";

/**
 * We will create a store with some dummy data
 * for the sake of the example :)
 */
const rootStore = Root.create({
  users: [
    {
      identifier: "123",
      name: "Alex",
      lastName: "Casillas",
      email: "hi@alexvcasillas.com",
      username: "alexvcasillas",
    },
  ],
});

/**
 * We are manually accessing the first element from
 * the `users` array of `User` models.
 */
const me = rootStore.users[0]; // Let's create a variable for quick access :)

/**
 * addNote action expectecs and object with the shape of:
 *  identifier: types.identifier,
 *  content: types.string,
 *  completed: types.boolean,
 *  createdAt: types.Date,
 *  updatedAt: types.Date,
 */
me.addNote({
  identifier: "note-1",
  content: "This is a demo note",
  completed: false,
  createdAt: new Date(),
  updatedAt: new Date(),
});

const note = me.notes[0]; // Let's create a variable for quick access :)

/**
 * Now we can ask for the user that owns this note
 */
console.log(note.user);
// output: { identifier: '123', name: 'Alex', lastName: 'Casillas', email: 'hi@alexvcasillas.com', username: 'alexvcasillas' }
// Along with all the related `views` and `actions` that are attached to this model
```

```js { actualFilename=src/step2/get-user-from-publications.js endChar=1436 endLine=49 startChar=0 startLine=1 statedFilename=src/step2/get-user-from-publications.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.03/src/step2/get-user-from-publications.js }
import { Root } from "./root-store";

/**
 * We will create a store with some dummy data
 * for the sake of the example :)
 */
const rootStore = Root.create({
  users: [
    {
      identifier: "123",
      name: "Alex",
      lastName: "Casillas",
      email: "hi@alexvcasillas.com",
      username: "alexvcasillas",
    },
  ],
});

/**
 * We are manually accessing the first element from
 * the `users` array of `User` models.
 */
const me = rootStore.users[0]; // Let's create a variable for quick access :)

/**
 * addPublication action expectecs and object with the shape of:
 *  identifier: types.identifier,
 *  content: types.string,
 *  createdAt: types.Date,
 *  updatedAt: types.Date,
 *  likes: types.optional(types.number, 0) <- If we skip this it will be 0 (zero) by default
 *  comments: types.array(types.string) <- If we skip this it will be [] (empty array) by default
 */
me.addPublication({
  identifier: "publication-1",
  content: "This is a demo publication",
  createdAt: new Date(),
  updatedAt: new Date(),
});

const publication = me.publications[0]; // Let's create a variable for quick access :)

/**
 * Now we can ask for the user that owns this publication
 */
console.log(publication.user);
// output: { identifier: '123', name: 'Alex', lastName: 'Casillas', email: 'hi@alexvcasillas.com', username: 'alexvcasillas' }
// Along with all the related `views` and `actions` that are attached to this model
```
