flux

今天开始做MERN，这个stack机遇redux，而redux基于flux，所以开始得学flux。

需要的教材有：

1.  http://www.ruanyifeng.com/blog/2015/03/react.html?bsh_bid=744520715

阮一峰的react入门，清晰易懂。

2. http://www.ruanyifeng.com/blog/2016/01/flux.html?utm_source=tuicool&utm_medium=referral

阮一峰的flux入门，清晰易懂。

3. http://blog.andrewray.me/flux-for-stupid-people/

老外的flux介绍，清晰易懂。

4. MERN.io自带的例子

5. http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html

如其名。

这么多，肯定没看完啦，先记下理解：

react是管UI的，功能跟angular一样，但是结构不太一样，react有component，props，jsx的render，储存用的state，以及各种mount。

flux是个结构：有ACTION（click，foucs等events），VIEW（前端UI）， DISPATCHER（一个event注册器，关联action跟store），STORE（存数据的地方）

比如说：

AppDispatcher.register(function (action) {
  switch(action.actionType) {
    case 'ADD_NEW_ITEM':
      ListStore.addNewItemHandler(action.text);
      ListStore.emitChange();
      break;
    default:
      // no op
  }
})

在前端button那里定义好action.addNewItem('new item'),在action jsx里面定义好addNewItem这个事件的类型（名字也行）以及内容。

上面说明当一个action被触发的时候，针对不同的actionType，定义Store的行为。

然后在前端加个：

componentDidMount: function() {
    ListStore.addChangeListener(this._onChange);
  },

来监听emit事件，完成重新渲染。