react状态管理之flux

flux逻辑理解

1.创建Actions
包括所有的动作，比如点击按钮添加列表项，这就是一个action，在action文件中直接用dispatcher方法来分配这个动作
action是用来暴露给外部进行调用

addNewItem: function (text) {
  AppDispatcher.dispatch({
    actionType: 'ADD_NEW_ITEM',
    text: text
  });
},

2.创建store
store里面包含了应用的状态和逻辑，用来管理应用中不同的状态和逻辑
store中可以用数组来存储应用中所需要的数据，然后外部通过调用strore中的方法来获取到数据放到state中。

items: [],

getAll: function () {
  return this.items;
},

3.创建dispacher
在dispatcher中通过register来给每个action注册对应的store中的方法

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

4.在view层通过调用action中的方法来调用这个动作

  createNewItem: function (event) {
    ButtonActions.addNewItem('new item');
  },

  render: function() {
    return <MyButton
      items={this.state.items}
      onClick={this.createNewItem}
    />;
  }