Redux 初見

說到redux可能咱們都先知道了react，但我發現，關於react相關的學習資料不少，也有各類各樣的種類，可是關於redux簡單易懂的資料卻比較少。

這裏記錄一下本身的學習理解，但願能夠簡潔易懂，入門redux。

一步步的走近redux，能夠先從瞭解flux出發。

Why Redux？

flux是Facebook的一個用來構建客戶端應用的應用程序架構。那麼爲何會有flux呢？咱們先看一下傳統的應用程序架構MVC架構：

1) Templates / html = View  

2) 填充視圖的數據 = Models  

3) 檢索數據的邏輯, 整合view層響應事件等一系列應用的邏輯處理 = Controller

當MVC架構的應用程序逐漸變得複雜的時候咱們想理清邏輯解決問題會變得有些挑戰。由於有可能一個View層可能跟多個Model有關，Model也有可能跟別的Model相關，這就使數據可能來自不少地方，同時可能改變了不一樣的model或view。漸漸的應用程序就變得不可控了。更多MVC模式相關的內容能夠參考：談談MVC模式

Facebook想借助flux，並結合專一於view層的react來搭建客戶端的應用程序，做爲一種新的應用程序的架構。它比MVC更加的簡單和清晰

更多flux相關的內容能夠看這裏 Flux 官方文檔 Flux架構入門教程

其實Redux也是作差很少相同的事情的。那麼爲何會有redux呢？redux的做者在使用flux的時候，發現了改進flux架構的可能，想要開發一個更好的開發者工具，同時也能享受到flux的優勢。redux的做者是這樣說的：

I didn't actually intend Redux to become a popular Flux library—I wrote it as I was working on my ReactEurope talk on hot reloading with time travel.

這裏面提到的代碼熱替換和時間旅行的功能，想要在flux中實現或許比較困難，因而就有了redux。

上面是個人理解，咱們也能夠更加直觀的看看redux的做者給出的相關回答：

http://stackoverflow.com/questions/32461229/why-use-redux-over-facebook-flux#answer-32920459

http://stackoverflow.com/questions/32021763/what-could-be-the-downsides-of-using-redux-instead-of-flux/32916602#32916602

Redux中的關鍵部件

在咱們還沒開始使用Redux構建咱們的應用程序以前，先了解一下Redux中的一些關鍵概念和部件，有助於咱們理解redux，這些部件串聯起來了redux的工做流程。

基本上有這三個關鍵概念：

Store

Redux的官方介紹是這個樣子的：

Redux is a predictable state container for JavaScript apps.（Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。）

也就是說， 一個Redex的實例就叫作store，能夠被這樣建立：

import { createStore } from 'redux'
var store = createStore(reducers)

在Redux中，應用程序只能擁有一個state，用來保存整個應用程序的state。而後經過以根Reducer爲首的Reducers們來處理應用程序中哪個部分的state須要更新。

可見，store是個靈魂人物，他作的主要事情能夠概括一下，主要有這幾個：

• 管理整個應用程序的狀態；

• 能夠經過store.getState()來獲取應用程序當前的狀態；

• 經過store.dispatch(action)來更新應用程序的狀態；

• 能夠訂閱應用程序狀態的改變，來作些view層的改變：

store.subscribe(function() {
    console.log('store has been updated. Latest store state:', store.getState());
    // Update your views here
})

Action creators

Actions是一個普通的對象，用來描述應用程序中發生的某件事情，它是應用程序中能夠用來描述數據變化的惟一角色。

actionCreator 是一個函數，用來建立一個action：

var actionCreator = function() {
    return {
        type: 'AN_ACTION'
    }
}

建立的action被store分發：

store_0.dispatch({
    type: 'AN_ACTION'
})

更多的關於action和action creator相關內容能夠參考：Reducing Boilerplate

Reducers

Actions用來告訴咱們應用程序中有某件事情發生了，可是並不會告訴store這些改變改如何響應，也不會改變store。這就是Reducers的工做。

import { createStore } from 'redux'

var reducer = function (...args) {
    console.log('Reducer was called with args', args)
}

var store = createStore(reducer)

這裏的reducer也就是根reducer，但咱們能夠有多個reducer，他們分別只處理一部分的state。而後經過combineReducers組成根reducer用來建立一個store, 好比：

var userReducer = function (state = {}, action) {
        // etc.
}
var itemsReducer = function (state = [], action) {
        // etc.
}
var reducer = combineReducers({
    user: userReducer,
    items: itemsReducer
})

Redux 的核心思想之一就是，它不直接修改整個應用的狀態樹，而是將狀態樹的每一部分進行拷貝並修改拷貝後的部分，而後將這些部分從新組合成一顆新的狀態樹。

也就是說，子 reducers 會把他們建立的副本傳回給根 reducer，而根 reducer 會把這些副本組合起來造成一顆新的狀態樹。最後根 reducer 將新的狀態樹傳回給 store，store 再將新的狀態樹設爲最終的狀態。

Redux是如何工做的

其實總結一下，Redux爲咱們所作的事情大概就是這幾個：

1) 一個存放應用程序狀態的地方;
 2）一個機制去分發actions而且修改應用程序的state;
 3) 一個能夠訂閱state更新的機制；

整個系統的流程從產生了一個action開始。用戶在咱們的應用程序中產生了交互，咱們須要對它的操做進行響應，咱們搞清楚了這時候redux中的數據流動過程就會明白它的工做流程了。

小結

固然Redux能夠跟任何庫搭檔使用，但分明跟React纔是天生一對。

至此，Redux也入了個門了。

邁入下一階段就嚴重建議觀看：Getting Started Width Redux