关于如何在Mobx中组织Stores
Stores(存储)
Store 可以在任何 Flux 系架构中找到，可以与 MVC 模式中的控制器进行比较。 Store 的主要职责是将逻辑和状态从组件中移至一个独立的，可测试的单元，这个单元在 JavaScript 前端和后端中都可以使用。
单一Stores
RootStore
import { observable, action, configure } from 'mobx';
// configure({ enforceActions: 'always' });
class RootStore {
@observable
name = '123';
@action('name')
updateCount() {
this.name = '456';
}
}
export default new RootStore();
Stores注入
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import RootStore from './mobx/rootStore';
ReactDOM.render(
...
,
document.getElementById('root')
);
页面引入
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
@inject('rootStore')
@observer
class Index extends Component {
constructor(props) {
super(props);
}
render() {
return (
<>
);
}
}
export default Index;
优点：
- 好理解，容易入手，经典的 MVC 模式。
缺点：
- 如果Store越来越大，那么非常不好维护。
单一Stores进阶版
RootStore
import { observable, action } from 'mobx';
import { configure } from 'mobx';
configure({ enforceActions: 'always' });
class RootStore {
@observable
test = '123';
@action('test')
updateCount() {
this.test = '456';
}
}
export default new RootStore();
页面Store
import { observable, action } from 'mobx';
class DashBoardStore extends BasicStore {
@observable
name = 'Faker';
@action
updateName() {
this.name = 'Jiang';
}
}
export default DashBoardStore;
注入RootStore
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import RootStore from './mobx/rootStore';
ReactDOM.render(
...
,
document.getElementById('root')
);
页面引入
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import DashboardStore from '../../mobx/Dashboard/store';
@inject('rootStore')
@observer
class Index extends Component {
constructor(props) {
super(props);
this.dashboardStore = new DashboardStore();
}
componentDidMount() {
this.dashboardStore.updateName();
}
render() {
return (
<>
);
}
}
export default Index;
优点：
-
每个页面对应一个Store，Store不会非常庞大
-
各个Store相对独立
-
不同页面需要共享的数据存入RootStore
-
在进入页面，会对Store初始化
缺点：
-
组件侵入性，需要改变 React 组件原本的结构，例如所有需要响应数据变动的组件都需要使用 observer装饰，组件本地状态也需要 observable 装饰，以及数据操作方式等等，对 Mobx 耦合较深， 日后切换框架或重构的成本很高
-
状态可以被随意修改，通过
configure({ enforceActions: 'always' });杜绝在Action以外对Store的修改
多Store组合
RootStore
import UserStore from './User/store';
import StatisticalCenterStore from './StatisticalCenter/store';
import AccountSettingStore from './AccountSetting/store';
import CallRecordStore from './CallRecord/store';
class RootStore {
constructor() {
this.userStore = new UserStore();
this.statisticalCenterStore = new StatisticalCenterStore();
this.accountSettingStore = new AccountSettingStore();
this.callRecordStore = new CallRecordStore();
}
}
export default new RootStore();
Stores注入
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import RootStore from './mobx/rootStore';
ReactDOM.render(
...
,
document.getElementById('root')
);
页面引入
import React from 'react';
import { inject, observer } from 'mobx-react';
@inject('userStore')
@inject('statisticalCenterStore')
@observer
class Index extends React.PureComponent {
constructor(props) {
super(props);
this.state = { };
}
render() {
return (
<>
);
}
}
export default Index;
优点：
-
每个页面对应一个Store，Store不会非常庞大
-
各个Store相对独立
-
那个页面需要那个Store，引入即可
-
不刷新游览器，页面状态一直保持着
缺点：
-
组件侵入性，需要改变 React 组件原本的结构，例如所有需要响应数据变动的组件都需要使用 observer装饰，组件本地状态也需要 observable 装饰，以及数据操作方式等等，对 Mobx 耦合较深， 日后切换框架或重构的成本很高
-
无数据快照，如果要重置Store，那么得写
reset action，一个个变量还原，当然也可以通过mobx-state-tree实现
中性：
状态可以被随意修改：
-
直接在视图层给状态赋值，比如我有A，B两个页面，都要修改C页面，那么，我在A和B页面修改C的Store，很方便，但是，如果不制定一套规范，如果数据改变，要追踪来源，很困难，而且很容易产生意想不到的情况。
-
通过
configure({ enforceActions: 'always' });杜绝在Action以外对Store的修改