在之前第一篇^[1]中，主要描述在使用Redux中碰到的兩個問題以及由Mobx最佳實踐中自己的對于組織Store的自己的看法，之后也有嘗試過幾種不同的Mobx的Store的組織方案，在這里和大家分享一下自己的經(jīng)驗

前言

關(guān)于不按照頁面來區(qū)分store是這系列文章的前提。第一篇想首先就Store的構(gòu)建和Action的拆分給出一些建議，后期還會介紹Mobx的后端渲染和持久化、序列化的一些方案。

關(guān)于常見的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()
    } 
}

并且在大多數(shù)的事例的Mobx的項目中，都是這樣組織action和store的，例如：

• koa-mobx-react-starter
• 等等

這種組織方式的好處是，在action和store一一對應(yīng)的系統(tǒng)中，我們可以很容易找到操作該store的所有action，代碼結(jié)構(gòu)比較直觀。

遇到的問題

首先說會遇到的問題：store實例與實例之間過于耦合了，在上面首頁feed流（HomeStore）的store對象中的action里，我們會需要操作一個詳情map的store的實例。同理，推薦列表的store也一樣。

如此，整個store和action就會被耦合成一個整體，當我們需要時，我們只能夠一次性生成整個store。當我們要改動任意一個，可能就會觸發(fā)這個整體的問題，不夠靈活。

所以，store和action應(yīng)當是分離的，只要對外提供的接口相同，內(nèi)部實現(xiàn)可以隨意變化。并且不同store之間的數(shù)據(jù)應(yīng)當也是互相分離的，不會有實例間的互相引用，不同的action類別也可以拆分出來，對單個或者多個state（store的實例）進行操作。

重新組織action和store

首先明確store和action的概念，store是指在應(yīng)用中唯一存儲數(shù)據(jù)的地方，而action則是所有觸發(fā)store數(shù)據(jù)變化的地方（在Mobx中沒有reducer和dispatch的概念，action直接觸發(fā)store改動并且同步的響應(yīng)在頁面中）。

根據(jù)這個概念，將action拆分出來。

還是以上一篇文章的例子來說：

一個首頁（文章的feed流）、各個文章詳情頁、推薦列表頁。

Stores

Store中只存數(shù)據(jù)

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

class MapStore<T> {
    @observable data = asMap<T>({})
    // 獲取，可以在該方法中做各種容錯
    get(id: string) { return this.data.get(id) }
    // 設(shè)置
    set(id: string, value: T) { this.data.set(id, value) }
    // 判斷
    has(id: string) { return this.data.has(id) }
    // 合并數(shù)據(jù)，可以在該方法中做各種容錯
    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中操作數(shù)據(jù)

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 ?