mobx模块化

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 9 天，点击查看活动详情

实现步骤

1. 拆分模块js文件，每个模块中定义自己独立的state/action
2. 在store/index.js中导入拆分之后的模块，进行模块组合
3. 利用React的context的机制导出统一的useStore方法，给业务组件使用 首先mobx使用是创建一个store目录，然后创建一个counter.Store.js

import { computed, makeAutoObservable } from 'mobx'


class CounterStore {
  count = 0
  list = [1, 2, 3, 4, 5, 6]
  constructor() {
    makeAutoObservable(this,{
      filterList:computed
    })
  }
  // 定义计算属性
  get filterList () {
    return this.list.filter(item => item > 2)
  }
  action = () => {
    this.count++
  }
  addList=(i)=>{
    this.list.push(i)
  }
}

export default CounterStore

再创建一个list.Store.js

import { makeAutoObservable } from "mobx"


class ListStore{
  list=['vue','react']
  constructor(){
    makeAutoObservable(this)
  }
  addList=()=>{
    this.list.push('angular')
  }
}

export default ListStore

同级目录再创建一个index.js,这个index.js就是store的入口， 将来实例化这个类的时候，分别实例化两个store模块， 使用react context机制，完成统一方法的封装 利用useContext() hook ，直接将store暴露出去，直接供给组件使用

// 组合子模块

import ListStore from "./list.Store";
import CounterStore from "./counter.Store";

import React from "react";
class RootStore{
  constructor(){
    this.counterStore=new CounterStore();
    this.listStore=new ListStore();
  }
}

const store=new RootStore();
const context=React.createContext(store);
const useStore=()=>React.useContext(context);
export default useStore

mobx无疑是轻量的，他轻松的实现的数据的响应式

总结

MobX 是状态管理库中侵入性最小的之一。这使得 MobX的方法不但简单，而且可扩展性也非常好: MobX 使用原生 javascript 。由于它的侵入性不强，它可以和绝大部分 javascript 库共同使用，而不需要特定的 MobX 风格库。

所以你可以继续使用你的路由，数据获取和工具库，比如react-router、 director、 superagent、 lodash，等等。

出于同样的原因，你可以在服务器端和客户端使用它，也可以在 react-native 这样的同构应用中使用。

结论就是: 相比其它状态管理解决方案，当使用 MobX 时通常只需学习更少的新概念。