MobX是否支持监听action调用？非类observable可用响应式API吗

问题1解答 #

MobX 原生的 autorun()、reaction()、when() 三个API的核心逻辑是追踪响应式状态的访问与变更，本身不提供直接监听action函数调用的能力，但是可以通过两种方式实现监听action调用的需求：

• 方法重写包装：保存原有action方法的引用，重写store上的对应方法，在执行原逻辑前后插入自定义逻辑即可，示例代码：

const originGetData = DataStore.getDataAction
DataStore.getDataAction = function(...args) {
  console.log("getDataAction was called")
  return originGetData.apply(this, args)
}

• 全局事件监听：MobX 提供了spy()方法，可以全局监听所有内部运行事件，包括action调用、状态变更、reaction执行等，不需要修改原有store代码，示例代码：

import { spy } from 'mobx'

// 注册监听
const stopListen = spy((event) => {
  // 筛选出目标action的调用事件
  if (event.type === 'action' && event.name === 'getDataAction') {
    console.log("getDataAction was called，入参为：", event.arguments)
  }
})

// 不需要监听时调用stopListen()销毁监听即可，避免内存泄漏

问题2解答 #

直接通过observable({})传入普通对象创建的store，完全可以正常搭配autorun()、reaction()、when()三个方法使用，不存在仅兼容类语法创建store的限制。
MobX的响应式追踪逻辑只判断被访问的属性是否被标记为响应式，和状态挂载在类实例还是普通包装对象上没有关系。官方文档多使用类语法作为示例，只是因为类语法更适合中大型项目做状态逻辑的组织拆分，普通对象写法是MobX从早期版本就原生支持的用法，所有API的表现和类写法完全一致，举个可直接运行的验证示例：

import { observable, autorun } from 'mobx'

const DataStore = observable({
  data: [],
  getDataAction() {
    this.data.push(Date.now())
  }
})

// 响应式逻辑正常触发
autorun(() => {
  console.log("当前data数组长度：", DataStore.data.length)
})

DataStore.getDataAction() // 触发打印：当前data数组长度：1
DataStore.getDataAction() // 触发打印：当前data数组长度：2

内容的提问来源于stack exchange，提问作者AnonymFromInternet