iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 17
0
Modern Web

Zero to hero with React.js系列 第 17

【Day17 React】Flux to-do text

  • 分享至 

  • xImage
  •  

新增 dispatcher.js 檔案,並在 TodoStore.js 裡註冊 dispatcher

import { Dispatcher } from "flux";

export default new Dispatcher;

TodoStore.js 裡,可以使用 .dispatch 來觸發 action,在這邊我們要使用 .register 來註冊

dispatcher.register(todoStore.handleActions.bind(todoStore));

我們需要一個 handle actions 來幫我們監聽所有的一舉一動,撰寫 handleActions function

  handleActions(action) {
    switch(action.type) {
      case "CREATE_TODO": {
        this.createTodo(action.text);
        break;
      }
      case "RECEIVE_TODOS": {
        this.todos = action.todos;
        this.emit("change");
        break;
      }
    }
  }
  

依樣可以透過 switch...case 來定義不同的 action.type 對應不同的結果。以上程式表示,當 action type 等於 CREATE_TODO 的時候 .createTodo;當 action type 等於 RECEIVE_TODOS 的時候 .emit


上一篇
【Day 16 React】React Flux 架構—— Store Event
下一篇
【Day18 React】React Flux 架構——Action
系列文
Zero to hero with React.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言