Mobx learning path - powerful "state management tool"

First episode :CSDN Bump , knowledge has no limit

---

Fine 33°

---

happy birthday to me.

---

2022/6/25

---

Mobx

A powerful state management tool

Mobx And redux The difference between

• mobx Writing bias and oop
• You can modify a piece of data directly , There is no need to always return a new data
• Not a single store, Can be more
• redux By default js Native objects store data , and mobx Use observable objects

Use

install

npm i [email protected]

Using strict mode

configure({
    
    enforceActions:'always'
})

observable&&autorun

• autorun Used to listen for changes in values
• observable Used for definition

import React,{
    Component} from 'react';
import {
    observable,autorun} from 'mobx';

/** *  Basic types  */
// Listening for common types of data 
let observableNumber=observable.box(66)
let observableDesc=observable.box(" knowledge has no limit ...")
// Execute once for the first time , Then the changes related to it will be executed again 
autorun(()=>{
    
  console.log(observableNumber.get())
})
setTimeout(() => {
    
  observableNumber.set(11)
  observableDesc.set(" Love learning .")
}, 2000);

/** *  Object use map */
let myobj=observable.map({
    
  name:" Bump ",
  age:9999
})
autorun(()=>{
    
  console.log(" object name Attributes changed "+myobj.get("name"))
})
class Zhuye extends Component{
    
  render() {
    
    return (  
      <div>
        Mobx
      </div>
    );
  };
};
export default Zhuye;

action

Specially modify observable value

import {
    observable,autorun,action} from 'mobx'
const store=observable({
    
    isTabbarShow:true,
    list:[],
    cityName:" Beijing ",
    changeShow(){
    
        this.isTabbarShow=true
    },
    changeHide(){
    
        this.isTabbarShow=false
    }
},{
    
    changeHide:action,
    changeShow:action// The two methods of marking are action, Specially modify observable value
})
export default store

Then you need to change isTabbarShow You can call the method in the place of …

Use decorator to write

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

Because the decorator writing method is not supported , It needs to support

• 1. Installation dependency :

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

• 2. establish .babelrc

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

• 3. establish config-overrides.js

const path = require('path')
const {
     override, addDecoratorsLegacy } = require('customize-cra')

function resolve(dir) {
    
    return path.join(__dirname, dir)
}

const customize = () => (config, env) => {
    
    config.resolve.alias['@'] = resolve('src')
    if (env === 'production') {
    
        config.externals = {
    
            'react': 'React',
            'react-dom': 'ReactDOM'
        }
    }

    return config
};
module.exports = override(addDecoratorsLegacy(), customize())

• 4. Installation dependency

npm i customize-cra react-app-rewired

• 5. modify package.json

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

vscode Need configuration

file — Preferences ---- Set up ----- Search for experimentalDecorators---- Tick this setting

Finally, re run it …

runInAction( asynchronous )

Asynchronous requests require , 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(){
    
        this.isTabbarShow=true
    }
    @action changeHide(){
    
        this.isTabbarShow=false
    }
    @action getList(){
    
        axios({
    
            method:'GET',
            url:"https://m.maizuo.com/gateway?cityId=440300&ticketFlag=1&k=2005318",
            headers:{
    
                "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.2.0","e":"1654433035923688551579649"}',
                "X-Host": "mall.film-ticket.cinema.list"
            }    
        }).then(res=>{
    
            runInAction(()=>{
    
                this.list=res.data.data.cinemas
            })
        })
    }
}
const store=new Store()
export default store

So that it can be modified this.list Of course. ~

Mobx The basic use of is complete ~ Happy birthday, to me🤭