mobx 上手

如果对Redux的API感到繁琐，试试mobx吧。
说实话，初读Redux的文档，脑海中总是充斥着晦涩的概念。但读mobx的文档感觉比较亲切，简单直接。简单来说，一个Observable，被观察的数据。一个Reactions，对状态变化的时候做出的反映。一个Actions，改变状态变化。

数据流动

mobx有两个特点印象很深，一是装饰器，装饰器是ES7的语法，对有些写js的可能有点陌生，但对于python应该是很亲切了，比如flask就用这种简洁语法写路由（不知道以后node也会不会出现装饰器写法的web框架）。
装饰器简单来说就是传入一个函数，返回一个被包装的函数，对js来说不新鲜，新鲜的只是语法而已：

function warp(fn)  { 
    function inner() { 
        console.log(fn.name); 
          return fn();
    }
   return inner;
}
function foo() { 
      console.log('fn')
 }
warp(foo)()

另一个mobx是面向对象的特点，在它的todo范例，store的文件夹叫models，
todolist的model代码如下

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

import TodoModel from "./TodoModel";

export default class TodoListModel {
  @observable todos = [];

  @computed
  get unfinishedTodoCount() {
    return this.todos.filter(todo => !todo.finished).length;
  }

  @action
  addTodo(title) {
    this.todos.push(new TodoModel(title));
  }
}

这个store的定义非常具有面向对象的味道，在我看来也比函数式编程更清晰。