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…