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: Snapshots
slug: snapshots-in-mobx-state-tree
description: Introduction to the store snapshots of MobX State Tree
role: "LESSON"
isPublicLesson: false
---

# Snapshots of MobX State Tree

A snapshot is an immutable serialization of a tree at a specific point in time. A snapshot does not contain any type of information (mobx-related) and are stripped from all of the actions and views, meaning that they're a perfect fit for data sharing, eg: between frontend and backend.

## Getting a Snapshot

In order to get a snapshot from a particular model state, you'd need to use the `getSnapshot(model, applyPostProcess)` method that will return a snapshot representing the current state of the model.

```js { actualFilename=src/getting-snapshot.js endLine=53 startLine=1 statedFilename=src/getting-snapshot.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_01/lesson_01.06/src/getting-snapshot.js }
import { types, getSnapshot } from "mobx-state-tree";

const User = types
  .model("User", {
    name: "Alex",
    lastName: "Casillas",
    age: 31,
  })
  .views((self) => ({
    get fullName() {
      return `${self.name} ${self.lastName}`;
    },
  }))
  .actions((self) => ({
    updateName(name) {
      self.name = name;
    },
    updateLastName(lastName) {
      self.lastName = lastName;
    },
  }));

// Take a snapshot!
const firstSnapshot = getSnapshot(User);

console.dir(firstSnapshot);
// outputs: { name: 'Alex', lastName: 'Casillas', age: 31 }

// Let's trigger an update to the user model
User.updateName("Nate");

// Let's take a new snapshot!
const secondSnapshot = getSnapshot(User);

console.dir(secondSnapshot);
// outputs: { name: 'Nate', lastName: 'Casillas', age: 31 }
```

As we can see per the code example above, we can easily take snapshots from a store at any point in time. Taking snapshots from a store is a cheap operation as MobX State Tree always maintains a snapshot of each of the nodes in the background for structural sharing purposes.

## Interesting information about Snapshots

1.  Snapshots are immutable.
2.  Snapshots are perfect for data transporting purposes.
3.  Snapshots can be used to update or restore models to a particular state.
4.  Snapshots will automatically be converted to models when needed, meaning that these two are equivalent.

    1.  `RootStore.users.push(User.create({ name: 'Alex' }))`
    2.  `RootStore.users.push({ name: 'Alex' })`

As you can see, there are a lot of benefits to using snapshots and there are some more advanced uses that we will introduce in a later lesson so you can benefit from it.

## Snapshot post-processing

You can apply some post-processing to the snapshot data with the `types.snapshotProcessor` function in case you'd need to apply, for instance, some calculations. Let's imagine that we have a store that has a list of shopping cart items for our e-commerce website. Let's also assume that our pricing comes in a Stripe-like format; in cents, and we would like to have it in dollars instead when taking the snapshot.

```js { actualFilename=src/post-processing.js endLine=53 startLine=1 statedFilename=src/post-processing.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_01/lesson_01.06/src/post-processing.js }
import { types, getSnapshot } from "mobx-state-tree";

let Item = types
  .model("Item", {
    id: types.identifier,
    name: types.string,
    price: types.number,
  })
  .views((self) => ({
    dollars() {
      return self.price / 100;
    },
  }));

// Let's redefine the item type with a snapshot processor using the Item store
Item = types.snapshotProcessor(Item, {
  postProcessor(sn) {
    return {
      ...sn,
      price: sn.price / 100,
    };
  },
});

const RootStore = types
  .model("Root Store", {
    shoppingCart: types.array(Items),
  })
  .views((self) => ({
    totalPrice() {
      return self.shoppingCart.reduce((prev, curr) => prev + curr.price, 0);
    },
  }))
  .actions((self) => ({
    addItem(item) {
      self.shoppingCart.push(item);
    },
  }));

// Let's push some items to the store's shopping cart!
RootStore.addItem({ id: 1, name: "Hoodie", price: 10000 });
RootStore.addItem({ id: 2, name: "Nice looking jeans", price: 18000 });

// Take a snapshot
const snapshotWithDollars = getSnapshot(RootStore);

console.dir(snapshotWithDollars);
// outputs:
// [
//   { id: 1, name: 'Hoodie', price: 100 },
//   { id: 2, name: 'Nice looking jeans', price: 18 }
// ]
```

Let's explain what happened on the code above. We have defined an `Item` store, we have done it as `let` because we're going to override it later with another model, but fear not and remember what we have learned before. `types.model` returns a chainable model that produces a new type, and `types.snapshotProcessor` does exactly the same. This way, we're only adding more logic on top of the `Item` store without losing anything that we have declared previously.

As we can see per the initial `Item` store declaration, we have a computed property named `dollars` that returns the price property divided by 100, to calculate the amount of dollars which is what we store in the `price` property. You might say: _"ok, when we take a snapshot, we're going to have a property called `dollars` that will also contain the price in dollars"_. But that's not the case here, as we have stated before: _"A snapshot does not contain any type of information (mobx-related) and is stripped from all of the actions and views"_, meaning that the `dollars` computed property will not appear in the resulting snapshot.

You might be wondering; how do we handle this if the views are not included in the snapshot? `types.snapshotProcessor(type, processors)` comes to the rescue!

`types.snapshotProcessor(type, processors)` will allow you to apply preprocessing and post-processing to a given type. In this case, we would like to apply some post-processing to the `Item` store.

```js { actualFilename=src/post-processing.js endLine=23 startLine=15 statedFilename=src/post-processing.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_01/lesson_01.06/src/post-processing.js#L15 }
// Let's redefine the item type with a snapshot processor using the Item store
Item = types.snapshotProcessor(Item, {
  postProcessor(sn) {
    return {
      ...sn,
      price: sn.price / 100,
    };
  },
});
```

Let's fine-grain the `snapshotProcessor` method:

1.  `types.snapshotProcessor` will return a chainable model based on the type passed as the first argument and it will require an object with `preProcessor` and `postProcessor` functions.
2.  `postProcessor` is a function that will be used to post-process a MobX State Tree instance to a snapshot. It will take the actual snapshot as the first argument so we can manipulate it and then return it.
3.  We want to return a full copy of the actual snapshot, so we can later override the properties we would like to.
4.  We would like to process the `price` property from the snapshot, as it comes in cents and we want to have it in dollars. We're saying here that the `price` property should be the actual snapshot price property divided by 100. This way, we will be returning dollars instead of cents when we take a snapshot of the store.

## Snapshot preprocessing

Let's imagine that from our backend, we receive the shopping cart items but the price is in dollars instead of cents, and we would like to have it stored in cents instead of dollars. Now that we know how to postprocess snapshots, we're going to apply the same technique but for preprocessing, which is a processing that runs when we want to convert from a snapshot to a MobX State Tree instance. Let's extend the `types.snapshotProcessor` we have used for the `Item` store.

```js { actualFilename=src/post-processing.js endLine=69 startLine=56 statedFilename=src/post-processing.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_01/lesson_01.06/src/post-processing.js#L56 }
Item = types.snapshotProcessor(Item, {
  preProcessor(sn) {
    // 1
    return {
      ...sn, // 2
      price: sn.price * 100, // 3
    };
  },
  postProcessor(sn) {
    return {
      ...sn,
      price: sn.price / 100,
    };
  },
```

1.  We have defined a preprocessing method called `preProcessor`. This way, we tell MobX State Tree to apply some preprocessing before converting a snapshot to a MobX State Tree instance. This method takes the actual snapshot that will be converted to the MobX State Tree instance.
2.  We want to return a full copy of the actual snapshot, so we can later override the properties we would like to.
3.  We would like to process the `price` property from the snapshot, as it comes in dollars and we want to have it in cents. We're saying here that the `price` property should be the actual snapshot price property multiplied by 100. This way, we will be returning cents instead of dollars when we're applying a snapshot to a store.

### Using a lifecycle method to process snapshots

There's a much more simple and clean approach to handling preprocessing and post-processing. Remember that `types.model` returned a chainable model itself? There's a method, like `actions` or `views` that we can use to declare preprocessing and post-processing logic. This is a lifecyle hook, and we will get into lifecycles in a later lesson. Let's take a look at how it will look by using the preprocessing lifecyle hook and postprocessing lifecyle hook:

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

const Item = types
  .model("Item", {
    id: types.identifier,
    name: types.string,
    price: types.number,
  })
  .views((self) => ({
    dollars() {
      return self.price / 100;
    },
  }))
  .preProcessSnapshot((snapshot) => ({
    ...snapshot,
    price: snapshot.price * 100,
  }))
  .postProcessSnapshot((snapshot) => ({
    ...snapshot,
    price: snapshot.price / 100,
  }));

const RootStore = types
  .model("Root Store", {
    shoppingCart: types.array(Items),
  })
  .views((self) => ({
    totalPrice() {
      return self.shoppingCart.reduce((prev, curr) => prev + curr.price, 0);
    },
  }))
  .actions((self) => ({
    addItem(item) {
      self.shoppingCart.push(item);
    },
  }));

// Let's push some items to the store's shopping cart!
RootStore.addItem({ id: 1, name: "Hoodie", price: 10000 });
RootStore.addItem({ id: 2, name: "Nice looking jeans", price: 18000 });

// Take a snapshot
const snapshotWithDollars = getSnapshot(RootStore);

console.dir(snapshotWithDollars);
// outputs:
// [
//   { id: 1, name: 'Hoodie', price: 100 },
//   { id: 2, name: 'Nice looking jeans', price: 18 }
// ]
```

As you can see by the code above, this approach using preprocessing, and using post-processing lifecycle hooks is cleaner and much more readable.

## Listen to changes with `onSnapshot`

There's a very handy method that you can use for debugging purposes or if you'd like to sync changes with a backend (possibilities are endless) whenever there's a change on a store. This method is `onSnapshot(model, callbackFn)`.

The `onSnapshot` method takes a model as the first argument of the function, which will be the model we would like to listen to changes on and the second argument is going to be a callback function, which will be called every time the model has changes and it will give you an actual snapshot of the store as the main argument of this callback function. If this sounded tricky to you, let's take a look at an example and you'll see it's a piece of cake:

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

const User = types
  .model("User", {
    name: "Alex",
    lastName: "Casillas",
    age: 31,
  })
  .views((self) => ({
    get fullName() {
      return `${self.name} ${self.lastName}`;
    },
  }))
  .actions((self) => ({
    updateName(name) {
      self.name = name;
    },
    updateLastName(lastName) {
      self.lastName = lastName;
    },
  }));

// Subscribe to changes!
onSnapshot(User, (snapshot) => {
  console.dir(snapshot);
});

// Now let's make some changes to the store to trigger the listener
User.updateName("Nate");
// outputs: { name: 'Nate', lastName: 'Casillas', age: 31 }
User.updateLastName("Murray");
// outputs: { name: 'Nate', lastName: 'Murray', age: 31 }
```

You can use the `onSnapshot` callback for anything you'd like to, for instance, syncing data to a Firebase realtime database, or sending push notifications, or any other thing that suits your application needs.

## Applying a Snapshot to a model

There's another handy method related to snapshots which allows you to apply a snapshot to a given model. This method is `applySnapshot(model, snapshot)`. It takes the model you'd like to apply the snapshot to as the first argument and the snapshot you'd like to apply as the second argument.

```js { actualFilename=src/apply-snapshot.js endChar=794 endLine=33 startChar=0 startLine=1 statedFilename=src/apply-snapshot.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_01/lesson_01.06/src/apply-snapshot.js }
import { types, onSnapshot, applySnapshot } from "mobx-state-tree";

const User = types
  .model("User", {
    name: "Alex",
    lastName: "Casillas",
    age: 31,
  })
  .views((self) => ({
    get fullName() {
      return `${self.name} ${self.lastName}`;
    },
  }))
  .actions((self) => ({
    updateName(name) {
      self.name = name;
    },
    updateLastName(lastName) {
      self.lastName = lastName;
    },
  }));

// Subscribe to changes!
onSnapshot(User, (snapshot) => {
  console.dir(snapshot);
});

// Now let's make some changes to the store to trigger the listener
applySnapshot(User, { name: "Nate" });
// outputs: { name: 'Nate', lastName: 'Casillas', age: 31 }
applySnapshot(User, { lastName: "Murray", age: 42 });
// outputs: { name: 'Nate', lastName: 'Murray', age: 42 }
```

As per the example above, applying snapshots is a very straightforward task and it will open a world of endless possibilities to you.


Introduction to the store snapshots 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

Snapshots