如何组织Mobx中的Store之一：构建State、拆分Acti

在之前第一篇^[1]中，主要描述在使用Redux中碰到的两个问题以及由Mobx最佳实践中自己的对于组织Store的自己的看法，之后也有尝试过几种不同的Mobx的Store的组织方案，在这里和大家分享一下自己的经验

前言

关于不按照页面来区分store是这系列文章的前提。第一篇想首先就Store的构建和Action的拆分给出一些建议，后期还会介绍Mobx的后端渲染和持久化、序列化的一些方案。

关于常见的store和action的组织方案

在第一篇里，一个简单的瀑布流+详情的页面中，我将获取详情的action直接放到了详情的对象里（store）。

class Detail {
    id: string
    // ...其他属性 
    constructor(item: any) {
        extendObservable(this, item)
    }
    @action('获取详情') async fetch() {
        const data = await requestFromServer(this.id)
        extendObservable(this, data)
    }
    @action('保存编辑') async save(data) {
        extendObservable(this, data)
        await submitToServer(data)
        await this.fetch()
    } 
}

并且在大多数的事例的Mobx的项目中，都是这样组织action和store的，例如：

• koa-mobx-react-starter
• 等等

这种组织方式的好处是，在action和store一一对应的系统中，我们可以很容易找到操作该store的所有action，代码结构比较直观。

遇到的问题

首先说会遇到的问题：store实例与实例之间过于耦合了，在上面首页feed流（HomeStore）的store对象中的action里，我们会需要操作一个详情map的store的实例。同理，推荐列表的store也一样。

如此，整个store和action就会被耦合成一个整体，当我们需要时，我们只能够一次性生成整个store。当我们要改动任意一个，可能就会触发这个整体的问题，不够灵活。

所以，store和action应当是分离的，只要对外提供的接口相同，内部实现可以随意变化。并且不同store之间的数据应当也是互相分离的，不会有实例间的互相引用，不同的action类别也可以拆分出来，对单个或者多个state（store的实例）进行操作。

重新组织action和store

首先明确store和action的概念，store是指在应用中唯一存储数据的地方，而action则是所有触发store数据变化的地方（在Mobx中没有reducer和dispatch的概念，action直接触发store改动并且同步的响应在页面中）。

根据这个概念，将action拆分出来。

还是以上一篇文章的例子来说：

一个首页（文章的feed流）、各个文章详情页、推荐列表页。

Stores

Store中只存数据

export class HomeStore {
    @observable feed: string[] = []
}

class MapStore<T> {
    @observable data = asMap<T>({})
    // 获取，可以在该方法中做各种容错
    get(id: string) { return this.data.get(id) }
    // 设置
    set(id: string, value: T) { this.data.set(id, value) }
    // 判断
    has(id: string) { return this.data.has(id) }
    // 合并数据，可以在该方法中做各种容错
    merge(id: string, value: T) { /*...*/ }
}

export class Detail {
    id: string = null
    @observable title: string = null
    // ...other properties
}

export class DetailStore extends MapStore<Detail> {}

export class Recommend {
    id: string = null
    @observable list: any[] = []
}

export class RecommendStore extends MapStore<Recommend> {}

Actions

只在Action中操作数据

export HomeActions {
    private home: HomeStore
    private details: DetailStore
    constructor({ home, details } as any) {
        this.home = home
        this.details = details
    }
    @action async fetch(pn: number = 1) {
        this.home.feed = await fetch(url).then(res => res.json()).map(item => {
            this.details.merge(item.id, item)
            return item.id
        })
    }
}

export DetailActions {
    private details: DetailStore
    constructor({ details } as any) {
        this.details = details
    }
    @action async fetch(id: string) {
        this.details.merge(id, await fetch(url))
    }
    @action async save(data: any) {
        /* ... */
    }
}

export RecommendActions {
    private recommend: RecommendStore
    private details: DetailStore
    constructor({ home, details } as any) {
        this.home = home
        this.details = details
    }
    @action async fetch(pn: number = 1) {
        this.recommend.list = await fetch(url).then(res => res.json()).map(item => {
            this.details.merge(item.id, item)
            return item.id
        })
    }
}

Components

组建或者页面中的store都是由注入的方式提供的。

import * as React from 'react'
import { observer } from 'mobx-react/native'


@observer(['home', 'details'])
export class Home
    extends React.Component<{ home: HomeStore, details: DetailStore}, {}> {
}

效果

实际上在我们的stores和actions中，我们只是声明了他们，而并没有生成实例，当我们的app启动时，我们首先需要新建store和action。

import {
    HomeStore,
    DetailStore,
    RecommendStore
} from './stores'
import {
    HomeActions,
    DetailActions,
    RecommendActions
} from './store'

const mobxStates = {
    home: new HomeStore,
    details: new DetailStore,
    recommends: new RecommendStore,
}
const actions = {
    home: new HomeActions(mobxStates),
    detail: new DetailActions(mobxStates),
    recommend: new RecommendActions(mobxStates)
}

export function App(props: any) {
    return <Provider
        {...mobxStates}
        actions={actions}
    >{routes}</Provider>
}

还是以一个首页为例子吧

import * as React from 'react'
import { View, Text, ListView } from 'react-native'
import { observer } from 'mobx-react/native'

const ds = new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2
})

interface HomeProps {
    home: HomeStore
    details: DetailStore
}

@observer['home', 'details']
export class Home extends React.Component<HomeProps, {}> {
    render () {
        const { home, details } = this.props
        const list = home.feed.map(id => details.get(id))
    
        return <ListView
            dataSource={ds.cloneWithRows(list)}
            renderRow={(item) => <Text>{item.content}</Text>}
        />
    }
}

1. 如何组织Mobx/Redux中的Store ↩