MobX入门示例

在相当长的一段时间内，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 应用模型了。