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 环境，并且支持自定义域名指向，动态计算资源调整，可以完成各种应用的开发编译与部署。