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: Arrays in MobX State Tree
slug: arrays-in-mobx-state-tree
description: Working with arrays in MobX State Tree
role: "LESSON"
isPublicLesson: false
---

# Working with `Arrays` in MobX State Tree

In MobX State Tree, we could use arrays to create collections whose children are all of a uniformly declared type.

Let's take a look at an example. If you find it daunting, no worries. It's not really complex and you will eventually get used to doing this on a daily basis.

```js { actualFilename=src/arrays.js endChar=1708 endLine=78 startChar=0 startLine=1 statedFilename=src/arrays.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.01/src/arrays.js }
import { types, flow } 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), // 1
    selectedUser: types.safeReference(User), // 2
    state: "idle",
  })
  .views((self) => ({
    findUserById(id) {
      // 3
      self.users.find((user) => user.id === id);
    },
    findUserByIndex(index) {
      return self.users[index] || null; // 3
    },
    get firstUser() {
      return self.users[0] || null; // 3
    },
    get lastUser() {
      return [...self.users].pop() || null; // 3
    },
  }))
  .actions((self) => ({
    fetchUsers: flow(function* () {
      self.state = "fetching";
      let users;
      try {
        const data = yield fetchUsersFromBackend();
        users = yield data.json();
        self.state = "done";
      } catch (error) {
        console.error("Failed to fetch users", error);
        self.state = "error";
      }
      self.users = users; // 4
    }),
    addUsers(users) {
      self.users.push(users); // 5
    },
    addUser(user) {
      self.users.push(user);
    },
    removeUser(user) {
      self.users.remove(user); // 6
    },
    selectUser(user) {
      self.selectedUser = user; // 7
    },
    removeAllUsers() {
      self.users.clear(); // 8
    },
  }));
```

Now that you took a look at the example, let's analyze the key points:

1.  `types.array(User)` is how we are defining our collection of `User` type. Each of these `users` will contain all of the `properties`, `views`, and `actions` that are associated with its corresponding model.
2.  `types.safeReference(User)` is how we set a reference to a particular user that is going to be contained in the `users` collection. If we remove this `user` from the collection, the reference will be automatically removed for you.
3.  These are all different ways to access data from an array. It is standard JavaScript as you can see; nothing specific or magic from MobX State Tree.
4.  Setting an array is also a simple task and it's the standard JavaScript way of setting a variable. Again, nothing specific or magic from MobX State Tree.
5.  Adding elements to an array is also done via standard JavaScript, and when the element gets "pushed" to the collection, a model of type `User` will be created automatically for you.
6.  Removing elements is easy with `array.remove(element)`, and this method does contain some magic behind the scenes to make it easier to remove elements from you. Remember that MobX State Tree keeps track of the elements in the collection and just by passing the object you want to remove, it's smart enough to know which element has to be removed.
7.  For setting MobX State Tree references, only an assignment is required. Standard JavaScript again.
8.  When it comes to clearing a collection, you can safely do it via the `array.clear()` method that is available to you thanks to MobX State Tree. By using this method, you make sure that no references remain lost in your store and that you're not accessing stale or outdated data as could happen if you just `self.users = []`.

Whenever you retrieve an element from an array or the full collection of elements that are contained within, you will get them all with their respective full models; meaning that they will come with their `views`, and `actions` and other things that you might have added to them. If you would like to retrieve a standard JavaScript array with standard JavaScript primitives within it, you can do so by calling the `array.slice()` method or by importing the helper method, `toJS`, from `mobx-state-tree` library and using it like `toJS(array)`. This will remove all MobX State Tree related things to the array. A good use case for this will be when you want to send data to the backend, or via websocket; in those cases, you'd like to have the data as lean as possible. Lets take a look at a quick example:

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

const User = types
  .model("User", {
    id: types.identifier,
    name: types.string,
    lastName: types.string,
    age: types.number,
  })
  .views((self) => ({
    // ...
  }))
  .actions((self) => ({
    // ...
  }));

const RootStore = types
  .model("RootStore", {
    users: types.array(User),
  })
  .views((self) => ({
    // ...
    get leanArrayWithToJS() {
      return toJS(self.users);
    },
    get leanArrayWithSlice() {
      return self.users.slice();
    },
  }))
  .actions((self) => ({
    // ...
  }));
```

Both options in the example above will behave exactly the same way and as expected, and maybe you could say that using `toJS` is way more convenient due to the fact that it's more obvious what is happening than using the `.slice()` method.


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

Arrays in MobX State Tree