MobX State Tree (MST) — State Management

KPITENG — MOBEX STATE TREE — STATE MANAGEMENT
  • What is MobX-State-Tree?
  • Why should I use MobX-State-Tree?
  • MobX-State-Tree Installation
  • Getting Started — MobX Entity
  • Creating Model
  • Creating Model Instance
  • Meeting Types
  • Modifying Data
  • Snapshot
  • Snapshot to Model
  • Getting to the UI
  • Improving Render Performance
  • Computed Properties
  • References

What is MobX-State-Tree?

Why should I use MobX-State-Tree?

  • MST offers great compatibility with React Native, ReactJS, VueJS, AngularJS and more JavaScript apps.
  • Instead of messy code everywhere in the app, MST gives centralized stores to quick access and exchange data.
  • Encapsulation — Your data can’t be modified by outside, It can be modified in “actions”. So it’s easy to access but secure from outside access.
  • Runtime type checking — help you to write clean code and prevent users from assigning wrong data to a tree.
  • Whatever you change in the State is tracked and you can create a snapshot of your state at any time.

MobX-State-Tree Installation

Getting Started — MobX Entity

  • taskName
  • taskStatus
  • userID
  • userName

Creating Model

Creating Model Instance

Meeting Types

Modifying Data

Snapshot

Snapshot to Model

Getting to the UI

Improving Render Performance

Computed Properties

References

--

--

--

Founder & CEO at KPITENG

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Using amplify subscribe in Typescript.

Day 50 Back in the Saddle

7 Useful Free Resources for Front-End Developers

Desk setup.

How I created my first three.js project

How to implement Netflix slider with React and hooks

Setting up the Development Environment to mess with JS/TS/RxJS

How to enable Reader Mode in Google Chrome Desktop

React Contact Manager Application Part 2

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
KPITENG

KPITENG

Founder & CEO at KPITENG

More from Medium

8 Things We Learned at React Conf 2021

Add Eslint & Prettier to React App

Removing repetitions from Array using the class Set

React The Next Big Thing