第3章 從Flux到Redux

3.1 Flux

單向資料流，React是用來替換Jquery的，Flux是以替換Backbone.js、Ember.js等MVC框架為主的。

一個Flux應用包含四個部分：

Dispatcher，處理動作分發，維持Stror之間的關係；

Store，負責儲存資料和處理資料相關邏輯；

Action，驅動dispatcher和JavaScript物件；

View，檢視部分，負責顯示使用者介面。

如果非要把Flux 和MVC 做一個結構對比，那麼， Flux 的Dispatcher 相當於MVC 的Controller, Flux 的Store 相當於MVC 的Model, Flux 的View 當然就對應MVC 的View了，至於多出來的這個Action ，可以理解為對應給MVC 框架的使用者請求。

Flux應用例項：

1、Dispatcher

　　首先創造一個Dispatcher，Dispatcher的作用就是派發action，幾乎所有應用都只需擁有一個Dispathcer，在src下創造一個唯一的Dispatcher物件

import {Dispatcher} from 'flux'

export default new Dispacther()

2、Action

　　代表一個動作，一個純粹的資料物件。

　　action物件必須有一個名為type的欄位，代表這個action物件的型別，為了記錄日誌和debug方便，這個type應該是字串型別。

　　定義action通常需要兩個檔案，一個定義action型別，一個定義actio的建構函式（也稱為action creator）。原因是store會根據action不同型別做不同操作。

　　在src/Actiontypes.js中，定義action的型別

//兩個action型別 INCREMENT和DECREMENT，一個是點選+按扭，一個是點選-按扭
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

　　在src/Action.js中，定義action的建構函式，這裡邊定義的並不是action物件本身，而是能夠產生並派發action物件的函式。

//引入ActionTypes和AppDispatcher，直接使用Dispatcher
import * as ActionTypes from './ActionTypes'
import AppDispatcher from './AppDispatcher'

//Action.js匯出了兩個action的建構函式increment和decrement，當這兩個建構函式被呼叫的時候，創造了物件的action物件，並立即通過AppDispatcher.dispatch函式派發出去。
export const increment = (counterCaption) => {
    AppDispatcher.dispatch({
        type: ActionTypes.INCREMENT,
        counterCaption: counterCaption
    })
}

export const decrement = (counterCaption) => {
    AppDispatcher.dispatch({
        type: ActionTypes.DECREMENT,
        counterCaption: counterCaption
    })
}

3、Store

　　一個Store也是一個物件，這個物件儲存應用狀態，同時還要接受Dispatcher派發的動作，根據動作來決定是否要更新應用狀態。