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: Time Travel
slug: time-travel-in-mobx-state-tree
description: Time traveling in MobX State Tree
role: "LESSON"
isPublicLesson: false
---

# Time traveling in MobX State Tree

Time traveling is the ability to reproduce a point in time at a specified moment when it's needed. In MobX State Tree, this can easily be achieved by using all the concepts we have already seen in previous lessons and modules.

The first thing we would need to do is to take a snapshot of our state and the moment we would like to do. As we have already seen, this can easily be achievable by using the helper methods; `getSnapshot` and `applySnapshot`.

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

// Here we will store our time traveling snapshots
const timeMachine = []; // 1
// Here we will store our current time traveling index
let timeMachineIndex = -1; // 2

export const Post = types
  .model("Post", {
    identifier: types.identifier,
    content: types.string,
    createdAt: types.Date,
    updatedAt: types.Date,
    likes: types.number,
    comments: types.array(types.string),
  })
  .actions((self) => ({
    savePointInTime() {
      // 3
      // Here we will perform the save of the current state
      timeMachine.push(getSnapshot(self)); // We push the current state snapshot
      // We set the index to the latest of the time machine
      timeMachineIndex = timeMachine.length - 1;
    },
    travelBack() {
      // 4
      // Here we will perform the back time traveling
      if (timeMachineIndex <= 0) {
        // We cannot perform a travel back when we're at the begining of history
        throw new Error("Cannot travel further back in time!");
      }
      // We now apply the snapshot to the store to see how it looked at that moment
      // when we took the snapshot
      timeMachineIndex -= 1;
      applySnapshot(self, timeMachine[timeMachineIndex]);
    },
    travelForward() {
      // 5
      // Here we will perform the forward time traveling
      if (timeMachineIndex >= timeMachine.length - 1) {
        // We cannot perform a travel forwards when we're at the end of history
        throw new Error("Cannot travel further ahead in time!");
      }
      // We now apply the snapshot to the store to see how it looked at that moment
      // when we took the snapshot
      timeMachineIndex += 1;
      applySnapshot(self, timeMachine[timeMachineIndex]);
    },
  }))
  .actions((self) => ({
    // This life-cycle method is called after the instance of the store is
    // created and initial values are applied.
    afterCreate() {
      // 6
      self.savePointInTime(); // Store our initial state!
    },
    updateContent(content) {
      self.content = content;
      self.savePointInTime(); // 7
    },
  }));
```

Now we're going to go through the key points of the above code:

1.  Within the `timeMachine` array, we're going to store all of the snapshots that we take of this store.
2.  The `timeMachineIndex` variable will be used to determine which point (index) of the `timeMachine` array variable we are currently at.
3.  The `savePointInTime` action takes a snapshot of the current state of the model and pushes it into the `timeMachine` array and then updates the `timeMachineIndex` to the amount of snapshots that we currently have stored.
4.  The `travelBack` action is the one responsible for traveling back in time based on the `timeMachineIndex` and applying the snapshot at that point in time if possible. We won't allow traveling back further than the initial snapshot taken. If it's allowed to travel back in time, meaning that our `timeMachineIndex > 0`, we will subtract 1 from the index and apply the appropriate snapshot based on this index.
5.  The `travelForward` action is the one resposible for traveling forward in time based on the `timeMachineIndex` and applying the snapshot at that point in time if possible. We won't allow traveling ahead further than the latest snapshot taken. If it's allowed to travel ahead in time, meaning that our `timeMachineIndex < timeMachine.length - 1`, we will add 1 to the index and apply the appropriate snapshot based on this index.
6.  The `afterCreate` action is a life-cycle method that is called after the instance of the store is created and initial values are applied.
7.  Within the `updateContent` action, we call the `savePointInTime` action to take a snapshot the moment we perform an update to the model. We can later time travel to a previous state with our time traveling actions.

Let's predicate with this example:

```js { actualFilename=src/time-travel-example.js endChar=1260 endLine=52 startChar=0 startLine=1 statedFilename=src/time-travel-example.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.05/src/time-travel-example.js }
import { Post } from "./posts.store";

const myPost = Post.create({
  identifier: "1",
  content: "Hi mate",
  createdAt: new Date(),
  updatedAt: new Date(),
  likes: 0,
});

console.log(getSnapshot(myPost));
// outputs ->
// { identifier: "1", content: "Hi mate", createdAt: 27/06/2022 , updatedAt: 27/06/2022, likes: 0 }

try {
  Post.travelBack(); // Throws!
} catch (error) {
  console.error(error); // Cannot travel further back in time!
}

Post.updateContent("Hello there");

console.log(getSnapshot(Post));
// outputs ->
// { identifier: "1", content: "Hello there", createdAt: 27/06/2022 , updatedAt: 27/06/2022, likes: 0 }

try {
  Post.travelBack(); // Successful!
} catch (error) {
  console.error(error); // undefined
}

console.log(getSnapshot(Post));
// outputs ->
// { identifier: "1", content: "Hi mate", createdAt: 27/06/2022 , updatedAt: 27/06/2022, likes: 0 }

try {
  Post.travelForward(); // Successful!
} catch (error) {
  console.error(error); // undefined
}

console.log(getSnapshot(Post));
// outputs ->
// { identifier: "1", content: "Hello there", createdAt: 27/06/2022 , updatedAt: 27/06/2022, likes: 0 }

try {
  Post.travelForward(); // Throws!
} catch (error) {
  console.error(error); // Cannot travel further ahead in time!
}
```

As you can see, time traveling with MobX State Tree can be achieved in a very straightforward way; but bear in mind that this implementation can be improved in different ways and should not be used lightly in production, and of course, you should conduct many tests to make sure that the history is correct at all times.
