MobX入门 TodoList

one more time one more chance. 一歩重头学前端, MobX入门。

MobX用于简单、可扩展的状态管理。通常搭配 React 使用，但不只限于 React。如何你厌烦了 Redux 繁杂的模板代码和 API，那么可以尝试下 MobX。网上好像流传： Redux 是谁用谁加班?。

状态管理库的区别

网上某位大牛的 ppt, 链接有机会再补上。此处的自己为库的开发者，别人是指库的使用者，也就是我等码农。

1. MobX恶心自己，成全别人
2. Redux成全自己，恶心别人
3. Rxjs恶心自己，也恶心别人

用一句话概括 MobX: 追踪你的改变，并为之做出响应。

开发环境搭建

Step 1: npx create-react-app mobx-todo-list创建项目

Step 2: npm install -S mobx mobx-react安装 mobx 的相关依赖

Step 3: 使create-react-app 创建的项目支持装饰器语法

npm run eject
npm install --save-dev babel-plugin-transform-decorators-legacy

Step 4: 修改配置文件package.json

"babel": {
    "plugins": [
        "transform-decorators-legacy"
    ],
    "presets": [
        "react-app"
    ]
}

创建 App 的 store

Mobx 中创建 store 的常见关键字如下： observable computed action。
observable用来声明可观察的数据、computed是声明可观察数据的演变数据，和 observable 具有同等地位，action 用来改变observable数据，但是 action 不是必须的，可以认为其是较好的约定，最好遵循。在 mobx 程序中使用class、装饰器是最佳实践，因此我们的代码也使用装饰器实现。

import {observable, computed, action} from 'mobx';

class Todo {
    // 定义一个 TODO 项目的类，id 是随机数，没有使用@observable 装饰可以理解为是只读的
    id = Math.random();
    // todo 的 title 及完成状态 finished 是可被观察及更新的，同时 finished 的初始状态为 false
    @observable title;
    @observable finished = false;
    // 构造函数接收tile
    constructor(title) {
        this.title = title;
    }
}

// TODO List 类
class TodoList {
    // 可被观察的待办项 todos
    @observable todos = [];
    // 计算属性，重可观察属性 todos 衍生出来，返回没有完成的待办项的个数
    @computed get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.finished).length;
    }
    // 动作用来更新 todos 属性的值，添加待办项
    @action
    addTodo = title => {
        if (!title) return;
        this.todos.push(new Todo(title));
    }
}

// 我们创建TodoList 对象，在手动的添加两个待办项，此处的 store 对象可以理解为是一个单例，在将其引用暴露出去
const store = new TodoList();
store.todos.push(new Todo('Get Coffee'), new Todo('Write blog'));
store.todos[0].finished = true;

export default store;

实现监听数据的组件

Provider、observer、inject均为是mobx-react提供。
Provider以组件的形式存在，用来包裹最外层组件节点，并且传入 store（通过）context 传递给后代组件。
使用@observer装饰的react组件将转换成一个监听者，当@observable 修饰的数据变化，react组件就会重新渲染。
@inject为了使被装饰的组件以 props 的形式获取到 Provider 传递过来的数据。

import {observer, inject} from 'mobx-react';
const TodoView = ({todo}) => (
    <li>
        <input
            type="checkbox"
            checked={todo.finished}
            // 此处的 onChange 并未遵循 action 的约定，进一步证明了直接更新 store 的数据也是可行的
            onChange={() => {todo.finished = !todo.finished;}}
        />
        {todo.title}
    </li>
)

@inject('todolist')
@observer
export default class TodoListView extends Component {
    state = {
        title: ''
    }
    changeTitle = e => {
        let title = e.target.value;
        this.setState({title});
    }
    // 调用 store 中的 addTodoaction 更新 store 里面的数据
    submit = () => {
        this.props.todolist.addTodo(this.state.title);
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.title} onChange={this.changeTitle} />
                <button onClick={this.submit}>submit</button>
                <ul>
                    {this.props.todolist.todos.map(todo => (
                        <TodoView todo={todo} key={todo.id} />
                    ))}
                </ul>
                Tasks left: {this.props.todolist.unfinishedTodoCount}
            </div>
        );
    }
}

通过 Provider 将数据传递给组件树

import TodoListView from './TodoListView';
import store from './store';
import {Provider} from 'mobx-react';

export default class App extends Component {
  // 将 store 传给 Provider
  render() {
    return (
      <Provider todolist={store}>
        <TodoListView />
      </Provider>
    );
  }
};

项目完整代码mobx-todo-list

Other

Todo list 实现完成，理论讲解，逐步更新。欢迎大家批评指正。

前端学习QQ群: 538631558

【开发环境推荐】 Cloud Studio 是基于浏览器的集成式开发环境，支持绝大部分编程语言，包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，无需下载安装程序，一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境，并且支持自定义域名指向，动态计算资源调整，可以完成各种应用的开发编译与部署。