Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
flux-utilsについて

flux-utils

facebook/flux 2.0.32.1.0で追加されたflux/utilsについて

see also 2015-08-17のJS: redux 1.0.0、flux-utils、Firefox 40 - JSer.info

はてなブックマーク検索を作りながらFlux Utilsについて学ぶ | Web Scratchにもっと具体的な解説を書きました


flux-utils


flux-utilsの中身

  • Store
    • Base Class
  • ReduceStore
  • MapStore
  • Container

  • MapStore extends ReduceStore extends Store
  • ReduceSTtore
  • MapStore
    • Stateをimmutable mapとして扱う
    • Immutable.jsに依存している

Container

  • mixinsの代わり
  • 一番上のReact ComponentラップするContainerのComponent
    • const container = Container.create(CounterContainer);
    • FluxStoreGroupというのが中にいる
  • Storeを登録しておいて、Storeの変更を元にViewへ通知する

import {Component} from 'react';
import {Container} from 'flux/utils';

class CounterContainer extends Component {
  static getStores() {
    return [CounterStore];
  }

  static calculateState(prevState) {
    return {
      counter: CounterStore.getState(),
    };
  }

  render() {
    return <CounterUI counter={this.state.counter} />;
  }
}

const container = Container.create(CounterContainer);

FluxStoreGroup

  • それぞれのStoreからdispatcherを取り出して通知をまとめる

ファイルサイズ

Before

before

After

after


gif


ファイルサイズ

  • デフォルトのdistにはutils.jsは含まれてないの12KB程度
  • MapStoreを使うとImmutable.jsが入るので200KB弱程度
    • どちらも圧縮せずの場合

Flux Utils TodoMVC Example


シングルトン

// Export a singleton instance of the store, could do this some other way if
// you want to avoid singletons.
const instance = new TodoStore(TodoDispatcher);
export default instance;

Dispatcher

import type {Action} from './TodoActions';

import {Dispatcher} from 'flux';

const instance: Dispatcher<Action> = new Dispatcher();
export default instance;

// So we can conveniently do, `import {dispatch} from './TodoDispatcher';`
export const dispatch = instance.dispatch.bind(instance);

ActionCreator?

  • ActionCreator自体はなくてもよい
  • Action == payloadオブジェクト
  • dispatchで直接Actionを投げてる
dispatch({
    type: 'todo/complete',
    id: todo.id,
});

Store

  • ReduceStoreでstateを持つ
  • stateの変更がFluxStoreGroup経由で通知される
  • => Viewのアップデート

View

  • React Component + Container

まとめ

  • FBJSfacebook/emitterImmutable.jsを使ってる
  • なぜ? => Flowで書くため
    • TypeScriptで書くのにd.tsが必要なようにFlowTypeで書くために自分でライブラリを作ってる

類似研究:

@sairion

This comment has been minimized.

Copy link

@sairion sairion commented Aug 17, 2015

Thanks for まとめ! 👍

@khirayama

This comment has been minimized.

Copy link

@khirayama khirayama commented Aug 17, 2015

とてもわかりやすい。感謝

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment