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的定義非常具有物件導向的味道，在我看來也比函數語言程式設計更清晰。