We-Mobx 从小程序状态管理到如何优雅地实现一个工具库
发布于 5 年前 作者 sxie 4934 次浏览 来自 分享

起因

在使用现成的小程序状态管理方案时踩了个小坑，遂考虑能否在小程序引入前端生态中较为成熟的状态管理方案。出于易用性和可拓展性的考量，这里选择使用 mobx。

MobX 是一个简单、可扩展的状态管理方案。关于 MobX 的介绍与使用请移步 MobX

如果只是想在小程序中使用 mobx，可以直接参考 文档 食用。

过程

本次设计与实现除了完成基本的 mobx 与小程序之间的绑定功能，还希望能遵循几个要点（痛点）：

  • 简洁、灵活、完善的 API
  • 函数式的实现与调用
  • 完善的类型支持

📚 API 设计

mobx 起源于 react 生态，但由于 react 和小程序本身的差异，照搬 mobx-react 中的调用方式是不可行的。这里希望能够尽可能地保留 react 中的调用风格，同时兼顾小程序本身的特性，其中的取舍也可以自行定夺。最终确定的 API 格式如下。

// App.ts

const App = provider<Stores>(stores)

App<AppOptions>({
  ...
})

  
// index.ts
inject<Stores>('storeA', 'storeB')(({ storeA, storeB }) =>
  observer.page<Data, Custom>({
    onLoad() {
      this.data.storeA.count
      storeA.add()
    },
  })
)

这样我们主要暴露三个函数：provider、 observer 和 inject。provider 用于向全局绑定 stores，observer 创建页面或组件，并通过 inject 向 observer 中注入需被监听的 store。如果对这种调用方式尚有疑问，可以先看下文。

🎨 内部实现

整体的实现原理很简单。使用 mobx 提供的 autorun 函数，autorun 会在其内部引用的 store 中 observable 属性发生变化时触发回调，那么在其回调中去主动触发小程序的状态更新即可。

由于小程序本身没有暴露 render 相关的接口，加上 wxml 中只能引用 data 中的数据，唯一的选择就是将被监听的数据映射至页面或组件的 data 中，并在 autorun 触发时主动调用 setData 触发状态更新。

需要做的工作就是在页面（或组件）声明时将初始 store 数据与 data 一并作为参数传入声明函数中，页面挂载时调用 autorun 函数以监听数据变化并触发更新，最后在卸载时销毁 autorun 释放监听。

实现细节如下。

provider.ts

provider 用于接收一个 stores 对象并将其绑定到 App 中，stores 对象即为项目中引用的 stores 的集合，格式为 { storeA, storeB }，同时 App() 的调用可以在 provider 的内部进行。实现很简单，将 stores 添加为 App 的参数属性即可。

type AppOptions<T> = WechatMiniprogram.App.Options<T>

const provider = <TStores extends AnyObject>(stores: TStores) => <TAppOptions extends AnyObject>(
  options: AppOptions<TAppOptions>
) => App({ ...options, stores })

export default provider

observer.ts

observer 是实现监听函数的核心。小程序中的声明函数有两个，分别为 Page() 和 Component()，对应页面和组件。这里以 Page() 为例。

observer 的职责为接收需要被监听的 stores 对象，并将其映射至页面 data 中。同时观测 stores 中属性的变化，当观测属性发生变化时调用 setData() 更新页面的状态，触发视图更新。

借助 mobx 提供的 autorun 函数，我们可以在 autorun 回调触发时进行 setData 操作。

那么思路大致为，首先将 stores 与 data 合并一同作为 options 传入 Page 中，并在页面 onLoad 时调用 autorun，当其回调函数触发时立即调用 setData 将状态更新至页面中。同时需要在页面 onUnload 时销毁 autorun。

observer 调用后需要返回一个 observe 函数以接收 observedStores 对象，即需要在当前页面注入并监听的 stores。observedStores 一般需要由 inject 内部根据外界指定 storeNames 计算并传入，但亦可以在外界直接传入 store 对象的引用。在 observe 中传入 observedStores 并调用会进行页面声明。

最终的调用格式为 observer.page(options)({ storeA, storeB })

实现如下。

import { autorun, IReactionDisposer } from 'mobx'
import { is, toData } from './utils'
import diff from './diff'

const observer = {
  page: <TData extends DataOption, TCustom extends CustomOption>(
    options: PageOptions<TData, TCustom>
  ) => {
    let dispose: IReactionDisposer

    const { data = {}, onLoad, onUnload } = options

    return (observedStores: AnyObject = {}) =>
      Page({
        ...options,
        data: { ...data, ...toData(observedStores) },

        onLoad(query) {
          dispose = autorun(() => {
            if (this.data) {
              const diffs: AnyObject = diff({ ...this.data, ...toData(observedStores) }, this.data)

              this.setData(diffs)
            }
          })

          if (is.fun(onLoad)) onLoad.call(this, query)
        },

        onUnload() {
          if (dispose) dispose()

          if (is.fun(onUnload)) onUnload.call(this)
        },
      })
  }
}

export default observer

注：每一次触发更新时都将 stores 中全部属性都更新至 data 中显然是不可取的，这里使用 diff 对两次状态比对并进行最小状态更新以优化性能。diff 函数参考 westore 中的实现，diff 后的结果可以直接作为 setData 的参数传入。

toData 的作用为将 mobx 中的 observable 对象，深度拷贝为一个符合小程序 data 格式的 JS 对象，具体实现可参照源码中 utils.ts 文件。

Inject.ts

最后确定 inject 的实现思路。inject 负责两个工作，一是接收被调用时传入的 storeNames，即需被监听的 store 的名称列表，计算出对应的 observedStores 对象，并将其传递给 observer 以供监听。二是将 provider 绑定的 stores 的直接引用通过其返回函数的调用传递到外界以供使用。

结合上文的调用来看，首先 inject（'storeA', 'storeB') 接收两个 storeName，返回一个函数，这个函数接收另一个函数 createObserver 作为参数，createObserver 的参数即是 stores 对象，在这里便得到了 stores 的引用。同时 createObserver 的返回值就是 observer 调用产生的返回值。inject 内部拿到 observer 返回的函数后即可在内部调用并将 observedStores 作为参数传入以供监听。

最终的调用格式为 inject('storeA', 'storeB')(({ storeA, storeB }) =&gt; observer.page(options)

实现如下。

const mapStores = <TStores extends AnyObject>(names: (keyof TStores)[]) => (source: TStores) => {
  const target: TStores = {} as TStores

  names.forEach(key => {
    if (source && source[key]) {
      target[key] = source[key]
    }
  })

  return target
}

const inject = <TStores extends AnyObject>(...storeNames: (keyof TStores)[]) => (
  createObserver: (stores: TStores) => (observedStores: AnyObject) => void | string
) => {
  const stores = getApp().stores ?? {}
  const observedStores = mapStores(storeNames)(stores)

  return createObserver(stores)(observedStores)
}

export default inject

这里通过 getApp() 拿到 stores 的引用，将其作为参数传递到 createObserver 中。并将 storeNames 和 stores 通过 mapStores 计算得到监听目标对象 observedStores。传入 observer 产生的 observe 函数并调用即完成状态注入与页面声明。

结束

感谢您的阅读。

项目源码 & 文档

回到顶部