react+mobx：如何組織store之最佳實踐

上篇文章 create-react-app + webpack + antd + less + mobx 的demo入門配置 簡單介紹了一個筆者使用的最基本的react配置，簡單引入了mobx。 如今問題是 若是store愈來愈多，會致使引用混亂，很是不便於開發。所以在閱讀了幾篇文章以後，我嘗試給出一個相對較好的使用方法。 參考文章； 保有對子store的引用
provider，inject引入react
官方文檔

統一管理 Store

針對愈來愈多的store, 能夠考慮使用 一個總 Store，保持對每一個子 Store的引用。若有必要，能夠在子Store中傳入父Store，讓子Store也能夠訪問到父Store。

import CountStore from './CountStore'
import ChangeNameStore from './ChangeNameStore'
class Store {
    constructor() {
        this.countStore = new CountStore()
        this.changeNameStore = new ChangeNameStore()
    }
}
export default new Store()
複製代碼

實踐一

如上，簡單建立的兩個子Store。在須要使用數據的地方，import store便可， 看下面例子：

const ChangeName = (observer( ( {} ) => {
    return (
        <div className='Change'>
            <div>{store.changeNameStore.name}</div>
            <div className="buttons">
                <Button type="primary" className="btn" onClick={() =>
                    store.changeNameStore.changeName()
                }>change</Button>
            </div>
        </div>
    );
}))
export default ChangeName;
複製代碼

ChangeNameStore以下：

import {observable, action} from 'mobx'

class ChangeNameStore {

    @observable name = "sun"

    @action
    changeName() {
        if (this.name === "sun") {
            this.name = "wen"
        } else {
            this.name = "sun"
        }
    }
}

export default ChangeNameStore;
複製代碼

運行程序，點擊按鈕能夠看到name改變。

這種方式引用方便，哪裏用到store就哪裏import。弊端就是若是store的層級愈來愈多，會致使代碼難以編寫。

實踐二

官方參考redux，給出了Provider和inject組件，推薦使用DI方式去管理store，這也是我以爲最好的方式。 首先也是由一個stores保持有對全部子store的引用,接着使用Provider組件將stores傳遞給父組件。

import CountStore from './mobx/CountStore'
import ChangeNameStore from './mobx/ChangeNameStore'

const countStore = new CountStore();
const changeNameStore = new ChangeNameStore();

const stores = {
    countStore,
    changeNameStore,
}

class App extends Component {
    render() {
        return (
            <Provider {...stores}>
                <Home/>
            </Provider>
        );
    }
}

export default App;
複製代碼

如上，下面是怎麼使用inject是自組件能夠訪問store。

const ChangeName = inject("changeNameStore")(observer( ( {changeNameStore} ) => {
    return (
        <div className='Change'>
            <div>{changeNameStore.name}</div>
            <div className="buttons">
                <Button type="primary" className="btn" onClick={() =>
                    changeNameStore.changeName()
                }>change</Button>
            </div>
        </div>
    );
}))

export default ChangeName;
複製代碼

推薦使用無狀態組件，將須要的store直接傳入組件，其餘使用方法與以前無區別。 如此以來，不管store的層級有多少，針對單一功能組件原則， 能夠將最小的store引入，方便管理。

最佳實踐的代碼見,保持不斷更新。
github：github.com/yunshuipiao…