在相当长的一段时间内，Redux 都是前端开发人员作为状态管理的首先框架，如果不会 Redux，你都不好意思跟别人说自己是搞前端的。
没过多久，开发者们开始意识到，这东西虽说盛行，但它并没有传说中的那么好用，代码写起来过于繁重，开发效率低下。MobX 出现之后，越来越多的人开始放弃 Redux，转投 MobX 的怀抱。
MobX 以一种更为优雅的方式组织状态，完全解放了开发者，使我们不再做代码的奴隶，而是真正翻身做了主人，轻松自由地管理状态。
今天，我们就来了解一下如何使用 MobX，这里不讲解它的原理和细节，只演示在项目中如何应用。
我们假设有一个 Todo 模块，那么与之对应的，应该创建一个 TodoStore 类，代码如下：
// src/stores/todo.js
// `mobx`中的三个API
import { action, observable, computed } from 'mobx';
// Todo组件对应的store
class TodoStore {
// todoList是一个被观察的数据对象
@observable todoList = [
{
name: 'doing',
}
];
// loadMore是一个用于操作数据的方法
@action loadMore() {
// 模拟异步请求
setTimeout(() => {
this.todoList = [
...this.todoList,
{
name: 'new schedule',
}
];
}, 300);
}
// 数据发生变化时自动更新total的值
@computed get total() {
return this.todoList.length;
}
}
export default new TodoStore();
一般来说，一个应用中有多个模块，所以我们需要一个 store 的入口文件，将众多模块的 store 组织起来：
// src/stores/index.js
import todoStore from './todo';
// 组织各个模块对应的store
export default {
todoStore,
};
最后，在我们应用的入口文件中，引入 stores 入口文件：
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
// `mobx-react`中的三个API
import { inject, observer, Provider } from 'mobx-react';
import stores from './stores';
// 注入需要的store 并将Todo组件定义为数据的观察者
// 注意顺序 inject在先 observer靠后
@inject('todoStore')
@observer
class Todo extends React.Component {
loadMore = () => {
// 被注入的store可以通过props访问
this.props.todoStore.loadMore();
};
render() {
const { todoStore } = this.props;
return (
<div>
<div>{ `${todoStore.total} loaded:` }</div>
{
todoStore.todoList.map((item, index) => {
return <div key={index}>{ item.name }</div>;
})
}
<div onClick={this.loadMore}>-Load More-</div>
</div>
);
}
}
ReactDOM.render(
<Provider {...stores}>
<Todo />
</Provider>,
document.getElementById('root')
);
这就是一个最简单的 MobX 应用模型了。