上篇文章 create-react-app + webpack + antd + less + mobx 的demo入門配置 簡單介紹了一個筆者使用的最基本的react配置植袍，簡單引入了mobx。
現(xiàn)在問題是 如果store越來越多生蚁，會導致引用混亂崩哩，非常不便于開發(fā)巡球。因此在閱讀了幾篇文章之后，我嘗試給出一個相對較好的使用方法邓嘹。
參考文章酣栈；
保有對子store的引用
provider，inject引入react
官方文檔
統(tǒng)一管理 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()
實踐一
如上，簡單創(chuàng)建的兩個子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;
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;
推薦使用無狀態(tài)組件，將需要的store直接傳入組件咱扣，其他使用方法與之前無區(qū)別绽淘。
如此以來，無論store的層級有多少闹伪，針對單一功能組件原則沪铭， 可以將最小的store引入壮池，方便管理。
最佳實踐的代碼見github：https://github.com/yunshuipiao/react-web-demo
