Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

mobx

What is state in MobX?

Sarvech Qadir

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

MobX is a scalable, battle-tested state management system. It is a standalone library that can be combined with JS React for better, more enhanced features.

States in MobX

States are quite significant in applications. Many state management platforms need to produce unmanageable and buggy applications, which can only be done by producing an inconsistent or out-of-sync state. Many state management solutions restrict how you can create an immutable state to prevent it from being modified. However, this might create problems like:

  • A need for data normalization
  • Inability to guarantee referential integrity

In short, MobX treats the application as a simple spreadsheet; therefore, the terms data normalization and referential integrity are common.

widget
  1. State refers to the application state. They are graphs of objects, arrays, primitives, and references that form the model of your application.

  2. Derivations refer to any formulas, computed values, or charts that can be automatically computed from the state of our application.

  3. Reactions work in a similar fashion to derivation. However, instead of producing any value, they run automatically to perform some task.

  4. Actions are used to alter the state. MobX will ensure that changes to any applicable state are processed automatically.

Example

State in MobX is represented by any observable object. An object is made observable by specifying an annotation per property with makeObservable. Here are some of the important features:

observable defines a trackable field that stores the state.

action marks a method as an action that will modify the state.

computed marks a getter that will derive new facts from the state and cache its output.

import { makeObservable, observable, computed, action } from "mobx"

class CreateState {
    value

    constructor(value) {
        makeObservable(this, {
            value: observable,
            double: computed,
            increment: action
        })
        this.value = value
    }

    get double() {
        return (this.value + this.value)
    }

    increment() {
        this.value+=1
    }
}

RELATED TAGS

mobx

CONTRIBUTOR

Sarvech Qadir
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring