上篇文章 create-react-app + webpack + antd + less + mobx 的demo入門配置 簡單介紹了一個(gè)筆者使用的最基本的react配置，簡單引入了mobx。 現(xiàn)在問題是 如果store越來越多，會(huì)導(dǎo)致引用混亂，非常不便于開發(fā)。因此在閱讀了幾篇文章之后，我嘗試給出一個(gè)相對(duì)較好的使用方法。 參考文章； 保有對(duì)子store的引用
provider，inject引入react
官方文檔

統(tǒng)一管理 Store

針對(duì)越來越多的store, 可以考慮使用 一個(gè)總 Store，保持對(duì)每個(gè)子 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() 復(fù)制代碼

實(shí)踐一

如上，簡單創(chuàng)建的兩個(gè)子Store。在需要使用數(shù)據(jù)的地方，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; 復(fù)制代碼

ChangeNameStore如下：

import {observable, action} from 'mobx'class ChangeNameStore {@observable name = "sun"@actionchangeName() {if (this.name === "sun") {this.name = "wen"} else {this.name = "sun"}} }export default ChangeNameStore; 復(fù)制代碼

運(yùn)行程序，點(diǎn)擊按鈕可以看到name改變。

這種方式引用方便，哪里用到store就哪里import。弊端就是如果store的層級(jí)越來越多，會(huì)導(dǎo)致代碼難以編寫。

實(shí)踐二

官方參考redux，給出了Provider和inject組件，推薦使用DI方式去管理store，這也是我覺得最好的方式。 首先也是由一個(gè)stores保持有對(duì)所有子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; 復(fù)制代碼

如上，下面是怎么使用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; 復(fù)制代碼

推薦使用無狀態(tài)組件，將需要的store直接傳入組件，其他使用方法與之前無區(qū)別。 如此以來，無論store的層級(jí)有多少，針對(duì)單一功能組件原則， 可以將最小的store引入，方便管理。

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

總結(jié)

以上是生活随笔為你收集整理的react+mobx：如何组织store之最佳实践的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。