我在react中使用mobx做状态管理实现了简单计数器demo,如果该页面今后需要添加新的功能,我希望不同功能存放在不同的store,请问这要如何实现
countStore.js
import { observable,action, computed } from 'mobx';
class CountStore{
@observable num = 0;
@computed get displayResult(){
return this.num;
}
}
export default CountStore;
app.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import Count from './count';
import Display from './display';
import CountStore from "../store/countStore";
const CountStores = new CountStore();
class Countapp extends Component{
constructor(props){
super(props)
}
render(){
return <div>
<Count store={CountStores}/>
<Display store={CountStores}/>
</div>
}
}
export default Countapp;
Mobx类似于Redux,也是有Provider
方法,可以把Store
挂载到整个应用上,至于多个Store
实现起来也是简单的,给个例子:
storeA.js
import {observable, action} from 'mobx';
class AStore {
//……
}
const aStore = new AStore()
export {aStore}
storeB.js
import {observable, action} from 'mobx';
class BStore {
//……
}
const bStore = new BStore()
export {bStore}
index.js
import {bStore} from './storeA'
import {bStore} from './storeB'
export {bStore, bStore}
具体可以看看我的项目>>react-mobx-demo
顺便再给个Redux的项目>>react-redux-demo