react狀態管理之flux
阿新 • • 發佈:2019-02-15
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}
/>;
}