The introduction of Mobx

Mobx is a powerful, easy-to-use state management tool. Redux has also been recommended by its authors, and Mobx can be used instead of Redux in many cases.

The flow chart of Mobx

Mobx uses processes

Create a project

npx create-react-app mobxCopy the code

Into the project

cd mobxCopy the code

Project out of

yarn ejectCopy the code

Install mobx mobx – react

yarn add mobx mobx-reactCopy the code
Note: If Git conflictsGit add. Git commit -m 'install mobx mobx-react

Configure the decorator (decorator ES6) Babel

yarn add babel-plugin-transform-decorators-legacy -D
yarn add @babel/preset-env -D
yarn add babel-plugin-transform-class-properties -D
yarn add @babel/plugin-proposal-decorators -DCopy the code

Configuration package. Json

"babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      "transform-class-properties"
    ],
    "presets": [
      "react-app",
      "@babel/preset-env"
    ]
    },
Copy the code

Note: The following two configuration orders cannot be changed

[
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      "transform-class-properties"Copy the code

How should MOBx be used in a project?

Creating a Store directory

Set up under the SRC

src
     store
       home
         index.js
       car 
         index.js
       index.js

Create files and directories with this structure

Use the Provider in the main entry file

import store from './store'

import { Provider } from 'mobx-react'

ReactDOM.render(
  <Provider store = { store }>
    <App />
  </Provider>
, document.getElementById('root'));Copy the code

Build mobx packages

Import {observable, computed,action} from 'mobx' class Home {@observable // listen on age age = 18 @computed // When age changes Trigger automatically get doubleAge () {return this. The age * = 2} @ the action / / the user action event called increment () {this. Props. Store. Home. The age + + The console. The log (enclosing props. Store. Home. The age) / / data request the fetch ('/data/data. Json). Then (res = > res. Json ()). Then (result = > console.log( result )) .catch( error => console.log( error )) } } const home = new Home() export default homeCopy the code

To create the store

store/index.js

Import home from './home' const store = {// instance home} export default storeCopy the code

Use data within the component

This.props. Store. XXX can get the data

Note:

  1. The @Action decorator method is not found in this.porps, but can be used directly.
  2. This will be lost this. Props. Store. Home. The increment. The bind (this)

Make observations on the components you want to use store

import React,{ Component,Fragment } from 'react' import { inject,observer } from 'mobx-react' @inject('store') @observer  class Count extends Component { constructor ( props ) { super( props ) props.store.count.change = Props. Store. Count. Change. Bind the solution of the (this) / / this lost} increment () = = > {the console. The log () 'mine' This. Props. Store. Count. Change ()} render () {return (the < Fragment > < button onClick = {this. Increment} > point I + < / button > <p>count:{ this.props.store.count.count} </p> </Fragment> ) } } export default CountCopy the code