Mobx6 基本使用

MobX 是一个简单的可扩展的状态管理库，无样板代码风格简约。

核心概念

• observable：被 MobX 跟踪的状态。

• action：允许修改状态的方法，在严格模式下只有 action 方法被允许修改状态。

• computed：根据现有状态衍生出来的状态。

• flow：执行副作用，它是 generator 函数。可以更改状态值。

准备

• mobx：MobX 核心库

• mobx-react-lite：仅支持函数组件

• mobx-react：既支持函数组件也支持类组件

yarn add mobx@6.3.1 mobx-react-lite@3.2.0

ok ,Talk is cheap show me the code 

// 注意，counter Store 只能用类创建

// store/counter.js

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

export default class CounterStore {
  constructor() {
    this.count = 0
    makeObservable(this, {
      count: observable,
      increment: action.bound,    // bound 改变 组件中 this 指向
      decrement: action.bound
    })
  }
  increment() {
    this.count += 1
  }
  decrement() {
    this.count -= 1
  }
}

// rootStore.js 整合各个分散的 store

// store/index.js
import { createContext, useContext } from "react"
import CounterStore from "./Counter"

class RootStore {
  constructor() {
    this.counterStore = new CounterStore()
  }
}
const rootStore = new RootStore()
const RootStoreContext = createContext()

export const RootStoreProvider = ({ children }) => {
  return (
    <RootStoreContext.Provider value={rootStore}>
      {children}
    </RootStoreContext.Provider>
  )
}

export const useRootStore = () => {
  return useContext(RootStoreContext)
}

// app.js

// App.js
import { RootStoreProvider } from "../store"
import Counter from "./Counter"

function App() {
  return (
    <RootStoreProvider>
      <Counter />
    </RootStoreProvider>
  )
}

export default App

// components/Home.js  

import { observer } from "mobx-react-lite"
import { useRootStore } from "../store"

function Counter() {
  const { counterStore } = useRootStore()
 // counterStore 里面 action.bound,就是为了 使用以下解构属性时 可以正常使用 
  const { count, increment, decrement } = counterStore  
  return (
    <Container>
      <Button onClick={increment}>
        INCREMENT
      </Button>
      <Button>{count}</Button>
      <Button onClick={decrement}>
        DECREMENT
      </Button>
    </Container>
  )
}

export default observer(Counter)

OK，用简洁易懂的语言和代码，说清楚前端知识，加油！！！

如有不正确，欢迎指出。。。。