Use of React Mobx State Management Tool

The difference between Mobx and redux

mobxWriting bias andoop
A copy of data can be modified directly, without always returning a new data
Not singlestore, can be multiple
reduxUsed by defaultjsNative objects store data, andmobxUse observable objects

use

Install

npm i mobx@5

Use strict mode

configure({
    enforceActions:'always'
})

observable&&autorun

autorunUsed to listen for changes in values
observableUsed to define

import React,{Component} from 'react';
import {observable,autorun} from 'mobx';
/**
  * Basic Type
  */
// Listening for normal type of datalet observableNumber=(66)
let observableDesc=("Learning is endless...")
//The first time is executed, and then the changes are changed and related to it will be executed againautorun(()=&gt;{
  (())
})
setTimeout(() =&gt; {
  (11)
  ("Love to study.")
}, 2000);
/**
  * Objects use map
  */
let myobj=({
  name:"Crash",
  age:9999
})
autorun(()=&gt;{
  ("Object name attribute changed"+("name"))
})
class Zhuye extends Component{
  render() {
    return (  
      &lt;div&gt;
        Mobx
      &lt;/div&gt;
    );
  };
};
export default Zhuye;

action

Specially modify observable value

import {observable,autorun,action} from 'mobx'
const store=observable({
    isTabbarShow:true,
    list:[],
    cityName:"Beijing",
    changeShow(){
        =true
    },
    changeHide(){
        =false
    }
},{
    changeHide:action,
    changeShow:action//Tag two methods are action, specifically modify the observable value})
export default store

Then change it if you needisTabbarShowJust call the method in the place...

Writing with a decorator

import {observable,autorun,action} from 'mobx'
class Store{
    @observable isTabbarShow=true
    @observable list=[]
    @action changeShow(){
        =true
    }
    @action changeHide(){
        =false
    }
}
const store=new Store()
export default store

Since decorator writing is not supported, it needs to be supported

1. Installation dependencies:

npm i @babel/core @babel/plugin-proposal-decorators @babel/preset-env

2. Create .babelrc{

"presets": [
"@babel/preset-env"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
}

3. Create

const path = require('path')
const { override, addDecoratorsLegacy } = require('customize-cra')
function resolve(dir) {
    return (__dirname, dir)
}
const customize = () => (config, env) => {
    ['@'] = resolve('src')
    if (env === 'production') {
         = {
            'react': 'React',
            'react-dom': 'ReactDOM'
        }
    }
    return config
};
 = override(addDecoratorsLegacy(), customize())

4. Installation dependencies

npm i customize-cra react-app-rewired

5. Modify

----...
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test":  "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
----....

vscode needs to be configured

File—Preferences—--Settings—--Search experimentalDecorators—--Tick this setting

Finally re-run...

runInAction(Asynchronous)

Need for asynchronous requests, in strict mode

import axios from 'axios'
import {observable,autorun,action,runInAction, configure} from 'mobx'
configure({
    enforceActions:'always'
})
class Store{
    @observable isTabbarShow=true
    @observable list=[]
    @action changeShow(){
        =true
    }
    @action changeHide(){
        =false
    }
    @action getList(){
        axios({
            method:'GET',
            url:"/gateway?cityId=440300&ticketFlag=1&k=2005318",
            headers:{
                "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.2.0","e":"1654433035923688551579649"}',
                "X-Host": ""
            }    
        }).then(res=>{
            runInAction(()=>{
                =
            })
        })
    }
}
const store=new Store()
export default store

This way it can be modified

The basic use of Mobx is done

This is the end of this article about the use of JavaScript Mobx state management tool. For more related JS Mobx content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!