Reactを学ぶ4(flex)

May 31, 2020

以下を参考に。

作業時間：3時間経過時間：16時間

最初に「dispathcerのregisterとdispatchがそれぞれいつ実行されるか」が分からなくてもやもやした。読み勧めていく中、コールバック関数ということでおおよその流れは理解できた。

Fluxについて

出典元：facebook/flux この図の以下はまだイメージ,理解ができていない。

Change Events + Store Queries
Action Creators
Web API Utils
Web API APIが絡んでいる流れがイメージできていない。

前提として、Actionは、{type:'hoge',data}というのデータ構造を期待している。

Fluxのあらまし

StoreのデータをActionのtypeによって、更新処理のパターンを切り分けておく。また更新処理はdispatcherのregisterで登録する。(TodoStore.js)
ユーザー操作によって呼ばれるハンドラに応じて、dispatchするactionを切り分けておく(TodoActions.js)
ユーザーが何かしら操作した場合に、ハンドラが呼ばれる。(Todo.js)
上記により、(2)が呼ばれる。そして、登録したコールバック関数が実行される。
コールバック関数には、(2)で定義したデータが渡されて更新の処理がされる。

TodoStore.js

例えば、新規作成によるデータの更新は以下。

class TodoStore extends EventEmitter {
  constructor() {
    super();
    //更新されるデータ
    this.todos = [];
  }
  //実行する更新処理
  createTodo(text){
    const id = Date.now();
    this.todos.push({
      id,
      text,
      complete:false
    });
    this.emit('change');
  }

  //更新処理の切り分け
  handleActions(action){
    switch(action.type){
      case 'CREATE_TODO': {
        this.createTodo(action.text);
      }
      ...
    }
  }
}

const todoStore = new TodoStore;
//dispatcherにコールバック関数の登録
dispatcher.register(todoStore.handleActions.bind(todoStore));
export default todoStore;

TodoActions.js

例えば、新規作成するActionは以下。

import dispatcher from '../dispatcher';

export function createTodo(text){
  dispatcher.dispatch({
    type: 'CREATE_TODO',
    text
  })
}
...

Todo.js

例えば、ボタンをクリックした場合、新規作成するユースケースは以下。

export default class Todos extends React.Component {
  ...
  //ハンドラとして呼び出される。Actionsの関数を呼び出す。
  createTodo() {
    TodoActions.createTodo("New Todo");
  }  
  render() {
    return(
      <div>
        //ハンドラを呼び出す
        <button onClick={this.createTodo.bind(this)}>Create!</button>
      </div>
    );
  }
}

Fluxの理解

dispatcherを理解することが、fluxの理解に結構つながっている。 dispatcherは処理担当よりも、データの受け渡しに使用されている。 registerでコールバック関数の登録し、dispatchでコールバック関数を呼び出してactionを渡す。コールバック関数が実際の処理をしている。呼ばれるまでは、パターンの受け渡しに集中している。

EventEmitter

Storeで何をしているか調べた。Node.jsとしてのイベントの管理を司っている。 JavaScriptのaddEventListtenerと同じ役割。ここでは、Storeの更新処理の時に、イベントが発火している。 Storeの更新が流れとしては最後になるのだが、何のために発火しているのだろうか？

Node.js Class: EventEmitter

Blog.