Discussion on mobx

Background introduction

• be relative to redux To put it simply , It is also an extensible state management library
• MobX from Mendix, Coinbase, Facebook Open source and many individual sponsors
• React and MobX It's a powerful combination ,React Responsible for rendering the state of the application ,MobX Responsible for managing application status for React Use

Browser support

• MobX5 The version runs on any support ES6 proxy You can use any browser on , I won't support it IE11, Node.js6
• MobX4 Can run on any support ES5 On the browser
• MobX5 and MobX4 Of API It's the same

preparation

• Because the browser does not support decorator Syntax , So add configuration

 Enable decorator syntax support 

   Mode one :

      1. npm run eject
      2. npm install @babel/plugin-proposal-decorators
      3. package.json

        "babel": {
    
            "plugins": [
                [
                    "@babel/plugin-proposal-decorators",
                    {
    
                        "legacy": true
                    }
                ]
            ]
        }
            
   Mode two :

      1. npm install react-app-rewired @babel/plugin-proposal-decorators customize-cra

      2.  Create... In the project root directory  config-overrides.js

          const {
     override, addDecoratorsLegacy } = require("customize-cra");

          module.exports = override(addDecoratorsLegacy());
      
      3. package.json

          "scripts": {
    
              "start": "react-app-rewired start",
              "build": "react-app-rewired build",
              "test": "react-app-rewired test",
          }
        
 solve vscode Editor warning about decorator Syntax 

  "javascript.implicitProjectConfig.experimentalDecorators": true
            

Generating project

1. download MobX
   npm install mobx mobx-react
2. Create objects that store state

// stores/TodoStore.js
import {
     observable } from 'mobx'
class TodoStore {
    
// observable Represents observable data 
 @observable test: '';
 @observable todos = [];
 // towards todos Add data   Change observable data prefix @action .bound change this Point to 
 @action.bound todoAdd () {
    
 
 }
}
const todo = new TodoStore();
export default todo;

3. hold todo Objects are placed globally

 // stay index.js Import... Into the entry file 
 import todo from './stores/TodoStore';
 import {
     Provider } from 'mobx-react';
 ReactDOM.render(
   <Provider todo={
    todo}><App /></Provider>,
   document.getElementById('root');
 );
 
 //  Use decorators in components that need to use global state todo Injected into this component props Inside , You also need another decorator to listen for changes to update the view 
 import React, {
     Component } from 'react';
 import {
     inject, observer } from 'mobx-react';
 
 @inject('todo'); // Inject store example 
 @observer // monitor store Instance change 
 class AddTodo extends Component {
    
   render() {
    
     const {
     test } = this.props.todo;
     return (
       <header className="header">
       {
    test}
       </header> 
     )
   }
 }
export default AddTodo;