Make writing a habit together! This is the fifth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

introduce

Mobx is a state management tool that can replace Redux in many cases

Mobx-react does data sharding and data fetching

The installation

1. Remove the configuration file after creating the project

npm run eject
Copy the code

2. Install mobx mobx-React

npm i mobx mobx-react
Copy the code

3. Configure decorators (NPM is optional)

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 -D
Copy the code

4. The configuration package. Josn

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

API

computed

Function:

Combine observations to form a new observation, take a function with no arguments, must have a return value, and use the get() method to get the calculated value

Function use:

var foo=computed(function(){return store.string+'/'+store.num}); Observe (function) foo.observe(function(change){console.log(change); // Call the specified function when foo changes. }) // Can be used to observe the monitoring value, if the change to call the functionCopy the code

Note mode use:

// If you use annotations, you must define computed values in the store class @computed get mixed(){return store.string+'/'+store.num}}; // Call the autorun method, which takes a function and executes it when observable data inside the function changes. Autorun (()=>{console.log(return store.string+'/'+store.num); }); Autorun (()=>{console.log(store.mixed); })Copy the code

action

The action wrapper/decorator responds only to the currently running function, not to the functions (not included in the current function) called by the currently running function!

This means that if there are setTimeout, PROMISE then, or async statements in the action, and some state changes in the callback function, those callback functions should also be wrapped in the action. This can be resolved using the runInAction.

We must be aware that we will get an error if we call an asynchronous callback that is not **@action.bound. The callback is not in the current context, so this points to an error. You can use the action or runInAction** to wrap the code.

@action.bound: This decorator binds the function context and executes correctly in other contexts, which is useful when passing methods to callback

The decorator ensures that variables modified within it wait for the function to finish running before firing the reaction at the same time. Usage:

The action (" XXX ", () = > {... })Copy the code

observer

React is a mobx-React package. Used with React, it annotates the React component that calls functions that change the mobx state

Usage:

  1. annotations
  2. observerFunction: wraps from the outermost layer (for function components)const A = observer((props=>{return <div>1</div>}Render wrap from the Render render of the React component:return useObserver(()=><div>1</div>)
  3. <Observer>Tags: Wrapped values can only be in the corresponding state,<Observer>{()=><div>{person.name}</div>}</Observer>

Provider

The React project belongs to the Mobx-React package. If the react project needs to enable the MOBx management state, it must use the Provider tag on the root node and pass the injected object

All managed stores are aggregated in store.js

import { Provider } from "mobx-react" import stores from './store' import {configure} from 'mobx'; // Enable the strict mode. Configure ({enforceActions: Class App extends Component{render(){return(<Provider store={... store}> <ToDoApp/> </Provider> ) } }Copy the code

inject

The react component is a mobx-react package that injects store into the react component to access observable values in this.props

@inject('todoList') class ToDoApp extends Component{ render(){ return ( <div> <TodoListView todoList={this.props.todoList}/> </div> ); }}Copy the code

Example:

import { observable, action, computed } from "mobx"; class CountStore { @observable a = 1; b = 2; @action // Note that if you are using a normal function, you must say: @action.bound. This is the correct reference to add = () => {this.a++; this.b++; }; @computed get newNum() { return this.a + this.b; } } const countStore = new CountStore(); export default countStore; import { observer } from "mobx-react"; import { action } from "mobx"; import React from "react"; import "./styles.css"; @observer class App extends React.Component { add2 = action(() => { this.props.store.a += 111; this.props.store.b += 111; }); render() { console.log(this.props); return ( <div className="App"> <div>{this.props.store.a}</div> <div>{this.props.store.b}</div> <div>{this.props.store. NewNum}</div> <button onClick={this.props.store OnClick ={this.add2}> button </button> </div>); } } export default App;Copy the code

This article is only the most basic use