1. 程式人生 > >react狀態管理之flux

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}
    />;
  }