MobX5&6 + React Usage Guide

MobX is one of react’s state management libraries. Compared with Redux, mobx has concepts such as mutation, Action and dispatch, etc. Mobx is more concise and more consistent with the operation concept of adding, deleting, changing and checking stores. In the eACT version iteration, Mobx also went through several iterations of updates. Their version compatibility issues, as well as the use of MOBx, will cause beginners to stumble. These questions will be sorted out one by one.

The core concept

First, a quick overview of the core mobx5 concepts. Mobx5 Chinese documentation

observable

Mobx. observable turns an object’s properties into observable properties. Objects here cover objects, arrays, and class instances. There are two methods: one is to wrap stateful objects in observables. Second, use the decorator @Observable for observable properties.

observable({
    count: 0
});

class Store {
  @observable count = 0
}
Copy the code

action

Mobx. action is used to define the function that changes the state. There are two ways to write it. First, wrap the function that changes state around an action. Second, add a decorator @action to a function that changes state.

action(() = > {
  store.count++
})

@action setCount = () = > {
    this.count++ 
}
Copy the code

observer

The Observer function/decorator can be used to transform the React component into a responsive component. The Observer is provided by a separate Mox-React package. There are also two ways to write it. First, wrap the component in an Observer. Second, add a decorator @observer to the component.

Mobx. autorun wraps the component’s render function to ensure that any data used in component rendering changes and the component is forced to refresh.

observer(function Home () {
  return(...). }) @observerclass Home extends React.Component{
  render () {
    return(...). }}Copy the code

The class components

Here are some best practices for using MOBx for class components.

Mobx5

For version compatibility, Mobx5 needs to work with Act16.x. Mobx5 with Act17 will report an error.

Mobx5.x is usually written as a decorator, including @Observable, @computed, and @Action.

// store.js
import {observable, action} from 'mobx'
class Store {
  @observable count = 0

  @action setCount = () = > {
    this.count++ 
  }
}

export default new Store()

// home.js
import React from 'react'
import {observer} from 'mobx-react'
import store from './store'

@observer
class Home extends React.Component{
  render () {
    return (
      <div onClick={store.setCount}>detail{store.count}</div>)}}export default Home
Copy the code

Mobx6

Mobx6 works with Act17.

Mobx6 doesn’t need to write these decorators in store.js, just use makeObservable or makeAutoObservable. Usually used in class constructors.

makeObservable

makeObservable(target, annotations? , options?) Capture the properties of the target object and make them observable. In the class constructor, the first argument is this.

import {makeObservable, observable, action} from 'mobx'

class Store {
  constructor () {
    makeObservable(this, {
      count: observable,
      setCount: action
    })
  }

  count = 0

  setCount = () = > {
    this.count++ 
  }
}

export default new Store()
Copy the code

makeAutoObservable

makeAutoObservable(target, overrides? , options?) MakeAutoObservable is similar to makeObservables except that it inferences all properties by default and is easier to maintain than MakeObservables. Note: makeAutoObservable cannot be used for super or SubClassed classes.

import {makeAutoObservable} from 'mobx'

class Store {
  constructor () {
    makeAutoObservable(this)
  }

  count = 0

  setCount = () = > {
    this.count++ 
  }
}

export default new Store()
Copy the code

Function component

In the case of React hooks, hooks are already very powerful, why use Mobx? This article goes further. Hooks encounter Mobx and the code gets silky

Mobx5

Since the decorator approach does not support functional components, you can use the Observable and Observer functions. The general usage of mobx5 in function components is as follows.

import React from 'react'
import { observable } from 'mobx'
import { observer } from 'mobx-react'

const store = observable({
  count: 0.setCount: () = > {
    store.count++
  }
})

export default observer(function Detail () {
  return (
    <div onClick={store.setCount}>detail: {store.count}</div>)})Copy the code

Mobx6

Mobx6 provides useLocalObservable, useObserverHOC usage.

The useLocalStore is deprecated. UseLocalObservable is recommended

import React from 'react'
import {useLocalObservable, useObserver} from 'mobx-react'

export default function Home () {
  const store = useLocalObservable(() = > ({
    count: 0,
    setCount () {
      this.count++
    }
  }))
  return useObserver(() = > (
    <div onClick={store.setCount}>home{store.count}</div>))}Copy the code

In addition to using the useObserver hook function, you can also use an Observer

import React from 'react'
import {Observer, useLocalObservable} from 'mobx-react'

export default function Home () {
  const store = useLocalObservable(() = > ({
    count: 0,
    setCount () {
      this.count++
    }
  }))
  return <Observer>
    {
      () => <div onClick={store.setCount}>home{store.count}</div>
    }
  </Observer>
}
Copy the code

The last

The above. Welcome to correct any errors.