react系列（四）Redux基本概念和使用
Redux基本概念和使用
先從Flux開始
先放一個 ofollow,noindex" target="_blank">Flux官網 的連結。需要fq。
Flux是Facebook提出的一種構建客戶端網頁應用的應用架構，它是一種抽象程度很高的設計模式，鼓勵單向資料流。
在之前的MVC架構中，在小型應用中，Model和View較少時，關係不復雜，維護輕鬆。但是一旦功能越來越複雜，將難以維護，多個Model和多個View之間存在著多對多的關係，在開發時，需要花費很多時間去處理Modal間的關係。
Flux架構的關鍵在於單向資料流，他由三部分構成——
- dispatcher
- stores
- views（React components）
從一次Action觸發，Dispatcher將它dispatch到store，更新store，store的變化同步更新到對應的view層。等待下一次的Action觸發。
這個過程中，資料始終是單向流動的。
社群基於Flux有多種實現，其中Dan大神的Redux最受推崇，已經成為事實標準。
Redux
前面的文章提到了元件間通訊的幾種方式，context API在小規模共享應用時值得一試。今天主要講解react全家桶中的Redux。
概念
在說概念之前，先看一張圖：
| 圖片來源 https://css-tricks.com/learning-react-redux/
根據上面的圖片，可以發現Redux相當於一個全域性的Provider。各個子元件是Consumer。
當然，Redux不只是簡單的提供一個全域性Provider。
它有以下幾個特點：
1.唯一資料來源
不同於Flux的實現，Redux只有一個唯一的資料來源，它提供一個深層巢狀的物件來存放所有資料。
2.狀態只讀
在Redux中，所有的狀態都是隻讀的，如果要修改state，則需要dispatch一個action，reducer通過action的type，選擇執行不同的操作，返回新的狀態。
3.通過純函式改變狀態
純函式的概念很簡單，一個函式，給定輸入，則確定輸出，不受其他因素影響，也不會影響原來的引用。
由於Redux提倡純函式對狀態進行處理，不會更改之前的物件，對於操作
fn(x) = y;
只要x給定，則y一定是確認值。這樣不論是之後進行很方便來追蹤資料的更改，debug，時間回溯，都非常方便。
使用
Redux的API非常簡單，這裡是 Redux API文件 。
我們只需要使用兩個API就能使用到Redux。
// 建立一個Reducer
let countReducer = (state = 0, action) => {
if (action.type === 'ADD') {
state++;
}
return state;
}
// 建立一個Store
var store = Redux.createStore(countReducer);
// dispatch一個action
store.dispatch({
type: 'ADD'
});
如果有多個State，比如，count和user，則需要使用combineReducers方法。
import { createStore, combineReducers } from 'redux';
// The User Reducer
const userReducer = (state = {}, action) => {
return state;
}
// The Widget Reducer
const countReducer = (state = {}, action) => {
return state;
}
// Combine Reducers
const reducers = combineReducers({
userState: userReducer,
countState: countState,
});
const store = createStore(reducers);
在實際使用時，有ActionCreateor的概念，其實並不複雜，就是一個函式，返回響應的Action。可以在這個函式中對Action做一些邏輯的判斷處理。
CountActionCreators.js
export function plus() {
return {
type: 'PLUS'
};
}
export function minus() {
return {
type: 'MINUS'
};
}
接下來需要呼叫bindActionCreators。
let one = bindActionCreators({ plusOne, minusOne }, store.dispatch);
store.subscribe(() => console.log(store.getState()));
one.plusOne();
one.minusOne();
這裡是一個完整的 例子-codesandbox 。
下一篇講解在React中使用Redux。
感謝閱讀。