Application Overview

State Management

What is MobX State Tree?

What will you learn in this course?

Will this course be for you?

Introduction

The Tree in MobX State Tree

The Store Model

Types

Model Actions

Model Views

Snapshots

Identifiers and References

Asynchronous Actions

Lifecycle Hooks

Concepts

Arrays in MobX State Tree

Maps

Nesting Stores

Optimistic Updates

Time Travel

Advanced Concepts

Overview of React and MobX State Tree

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: Identifiers and References
slug: identifiers-and-references-in-mobx-state-tree
description: Identifiers and references of MobX State Tree
role: "LESSON"
isPublicLesson: false
---

# Identifiers and references of MobX State Tree

Identifiers and references are one of the angular stones in the MobX State Tree environment. Identifiers and references make it possible to declare references between type properties and models and keep the data normalized in the background while you work with it in a de-normalized manner.

Let's take a look at a simple example that uses an identifier and reference:

```js { actualFilename=src/example.js endChar=857 endLine=46 startChar=0 startLine=1 statedFilename=src/example.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_01/lesson_01.07/src/example.js }
import { types } from "mobx-state-tree";

const User = types
  .model("User", {
    id: types.identifier,
    name: types.string,
    lastName: types.string,
    age: types.number,
  })
  .views((self) => ({
    get fullName() {
      return `${self.name} ${self.lastName}`;
    },
  }))
  .actions((self) => ({
    updateName(name) {
      self.name = name;
    },
    updateLastName(name) {
      self.lastName = name;
    },
    updateAge(age) {
      self.age = age;
    },
  }));

const RootStore = types.model("RootStore", {
  users: types.array(User),
  selectedUser: types.reference(User),
});

const storeInstance = RootStore.create({
  users: [
    {
      id: "20",
      name: "Alex",
      lastName: "Casillas",
      age: 31,
    },
  ],
  selectedUser: "20",
});

console.log(storeInstance.selectedUser.fullName);
// outputs: 'Alex Casillas'
```

Because `selectedUser` is declared as a reference, it returns the actual `User` node with the matching identifier. This way, we can avoid data duplication and if we were to call `storeInstance.selectedUser.updateName('Nate')`, the referenced model would be updated as if we were calling it directly from the store model itself.

### Considerations

There are some things that need to be considered when using identifiers and references:

-   Each model can define **zero** to **one** `identifier` properties.
-   The identifier property of a model cannot be modified after initialization.
-   Every identifier should be unique within the entire state tree.
-   Identifiers are used to reconcile items inside arrays and maps when applying snapshots.
-   The main goal of identifiers is not validation but reconciliation and reference resolving. This is why identifiers cannot be updated after creation, because MobX State Tree uses them internally to keep things organized.

### Customizing references

Though MobX State Tree will deal with references and identifier matching for you, you can also customize its behavior if you'd like to. Though we encourage you not to do it, let's take a look at an example on how to customize a reference:

```js { actualFilename=src/customize-references.js endChar=1258 endLine=57 startChar=0 startLine=1 statedFilename=src/customize-references.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_01/lesson_01.07/src/customize-references.js }
import { types } from "mobx-state-tree";

const User = types
  .model("User", {
    id: types.identifier,
    name: types.string,
    lastName: types.string,
    age: types.number,
  })
  .views((self) => ({
    get fullName() {
      return `${self.name} ${self.lastName}`;
    },
  }))
  .actions((self) => ({
    updateName(name) {
      self.name = name;
    },
    updateLastName(name) {
      self.lastName = name;
    },
    updateAge(age) {
      self.age = age;
    },
  }));

const RootStore = types.model("RootStore", {
  users: types.array(User),
  selectedUser: types.maybeNull(
    types.reference(User, {
      // Given an identifier, let's find the appropriate user on the parent store
      get(identifier /* string */, parent /* Store */) {
        return parent.users.find((user) => user.name === identifier) || null;
      },
      // Given a user, let's produce the identifier that should be store
      set(value /* User */) {
        return value.name;
      },
    })
  ),
});

const storeInstance = RootStore.create({
  users: [
    {
      id: "20",
      name: "Alex",
      lastName: "Casillas",
      age: 31,
    },
  ],
  selectedUser: "Alex",
});

console.log(storeInstance.selectedUser.fullName);
// outputs: 'Alex Casillas'
```

As we can see per the example above, customizing a reference is not a big deal but we encourage you to let MobX State Tree handle this by itself instead of creating your own references.


Identifiers and references of MobX State Tree

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

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

Module 1: Introduction

Introduction:

Start Here

Introduction: (0:42)

Application Overview

Introduction:

State Management

Introduction:

What is MobX State Tree?

Introduction:

What will you learn in this course?

Introduction:

Will this course be for you?

Module 2: Concepts

Lesson 1:

The Tree in MobX State Tree

Lesson 2: (1:44)

The Store Model

Lesson 3:

Types

Lesson 4: (2:38)

Model Actions

Lesson 5:

Model Views

Lesson 6:

Snapshots

Lesson 7:

Identifiers and References

Lesson 8:

Asynchronous Actions

Lesson 9:

Lifecycle Hooks

Module 3: Advanced Concepts

Lesson 1:

Arrays in MobX State Tree

Lesson 2:

Maps

Lesson 3:

Nesting Stores

Lesson 4:

Optimistic Updates

Lesson 5:

Time Travel

Module 4: React

Lesson 1:

Overview of React and MobX State Tree

Lesson 2:

Context and Hooks

Lesson 3:

Observable

Module 5: Building Voyager

Lesson 1:

Overview

Identifiers and References