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 应用模型了。

巴特西

MobX入门示例

最新文章

热门文章