flux是一個模式而不是一個框架，所以使用flux並不會有太多新的程式碼，所以我們主要了解這個模式概念是什麼，flux到底想解決什麼問題?

react以撰寫components可重覆利用組合而成新頁面，但所有資料都是包在元件之中，元件只能透過setState來改變state狀態，元件相互溝通時只能靠著props去進行傳遞，如果多個元件互相傳遞或層級傳遞變得極為複雜，更新資料又是層層更新，flux設計模式就是為了解決這樣子的問題。

component只能透過setState改變state，但我們能透過傳遞方法到child元件來改變parent元件的state，這就是我想表達的層層傳遞，層層更新會變得很混雜。

src/Parent.js

import React, { Component } from 'react';
import Child from './Child';

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.handleFn = this.handleFn.bind(this);
    this.state = {parentval: "parent"};
  }

  handleFn(param) {
    this.setState({parentval: param});
  };

  render() {
    return (
      <div>
        <h1>{this.state.parentval}</h1>
        <Child fn={this.handleFn}/>
      </div>
    );
  }
}

export default Parent;

src/Child.js

import React, { Component } from 'react';

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {parentval: "parent"};
  }

  handleClick() {
    this.props.fn('Change-Parent-State');
  }

  render() {
    return <h1 onClick={this.handleClick}>child</h1>;
  }
}

export default Child;

Flux Parts

• Dispatcher
• Store
• Action
• View

Flux官網示意圖(單向資料流)

Dispatcher
主要用途接收action(actionType & payload資料)，再發送給所有註冊的callback。這在設計模式類似於發佈/訂閱模式(Publish/Subscribe Pattern)，而每一個應用程式只會有一個singleton dispatcher，再由這一個dispatcher統一發送。

Store
每個store都在dispatcher上註冊，提供一個callback方法，每當有action產生時相對應的callback會被呼叫使用。

Action
定義內部API，當方法觸發時發送給dispatcher，基本的flux action:

{
  type: 'ADD_TODO',
  payload: {
    text: 'Do something.'  
  }
}

View
從store接收資料將資料(props)傳遞到子元件並render

參考資料
Flux:In Depth Overview
https://facebook.github.io/flux/docs/in-depth-overview.html#content
flux-concepts
https://github.com/facebook/flux/tree/master/examples/flux-concepts
Flux Standard Action
https://github.com/acdlite/flux-standard-action