1.Mobx Introduction and Installation:

React and MobX are a powerful duo.

React is a consumer that renders application state as a tree of components.

🚀 Mobx is a provider for storing and updating state states

🌵 installation:

yarn add mobx 
yarn add mobx-react
Copy the code

2. Small examples of +1 and -1 using Mobx

  1. throughobservableTo create aObservable objects
  2. toObserver objectAdd some methods and export them
  3. It needs to be introduced during useobserverTo establish theObservable Object (appState)And thisObserver object (listener)The contact –observer(Mobxtest)
  4. And then at the top level of the componentindex.jsThe introduction ofObservable object -appStateAnd as apropsPass it on.

🌈 Traditional writing:

  • Take a look at the directory structure:
The SRC ├ ─ App. Js ├ ─ index. The js ├ ─ store | ├ ─ mobx | | └ index. The js ├ ─ Components | ├ ─ Mobxtest. JsCopy the code
  • Let’s move onmobx/indexThe code:
import {observable, action,} from "mobx";

// Create an observer object
const appState = observable({
    num:0
});

// Create some method for the observer
appState.increment = action(() = >{
    appState.num ++;
})
appState.decrement = action(() = >{
    appState.num --;
})

export default appState
Copy the code
  • Let’s move onMobxTestComponent code:
import React, {Component} from 'react';
import {observer} from "mobx-react";
import {Button} from "antd";
class Mobxtest extends Component {
    render() {
        return (
            <div style={{marginTop:"20px}} ">
                <p>{this.props.appState.num}</p>
                <Button type="primary" onClick={this.props.appState.increment}>Add 1</Button>
                <Button type="primary" onClick={this.props.appState.decrement}>Reduced by 1</Button>
            </div>); }}export default observer(Mobxtest); // Call the observer
Copy the code
  • Finally came toindex.jsIn the file
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MobxTest from "./Components/Mobxtest";
import appState from "./store/mobx";

function render(){
    ReactDOM.render(
            <MobxTest appState={appState}/>.document.getElementById('root')); } render();Copy the code

🌈 decoration written:

  • mobx/indexThe code:
import {observable, action,makeObservable} from "mobx";
class AppState{
    @observable num =0;
    // 🚀 constructor is really weird and must be loaded after @Observable to make num responsive
    constructor() {
        makeObservable(this)}// 🚀 it is recommended to use the arrow function definition
    @action
    increment=() = >{
        console.log(this)
        this.num++;
    }
    @action
    decrement=() = >{
        this.num--; }}export default  new AppState();
Copy the code
  • Let’s move onMobxTestComponent code :(just willexport default observer(Mobxtest)Changed to@observerThe form of
import React, {Component} from 'react';
import {observer} from "mobx-react";
import {Button} from "antd";
@observer
class Mobxtest extends Component {
    render() {
        return (
            <div style={{marginTop:"20px}} ">
                <p>{this.props.appState.num}</p>
                <Button type="primary" onClick={this.props.appState.increment}>Add 1</Button>
                <Button type="primary" onClick={this.props.appState.decrement}>Reduced by 1</Button>
            </div>); }}export default Mobxtest; // Call the observer
Copy the code
  • index.jsSame as the one above, it stays the same

Mobx vs. Redux

  • Redux > Mobx

  • Workload :redux > Mobx

  • Memory cost :redux > Mobx

  • Concentration of state management :redux > Mobx

  • Boilerplate code is necessary :redux > Mobx

🚀 verdict: Mobx is easy to get started and quick to build, but when the project is big enough, redux is still a must-have, which turns on strict mode, plus a set of state management specifications.