react系列（四）Redux基本概念和使用

Redux基本概念和使用

先從Flux開始

先放一個Flux官網的連接。須要fq。
Flux是Facebook提出的一種構建客戶端網頁應用的應用架構，它是一種抽象程度很高的設計模式，鼓勵單向數據流。
在以前的MVC架構中，在小型應用中，Model和View較少時，關係不復雜，維護輕鬆。可是一旦功能愈來愈複雜，將難以維護，多個Model和多個View之間存在着多對多的關係，在開發時，須要花費不少時間去處理Modal間的關係。
Flux架構的關鍵在於單向數據流，他由三部分構成——

1. dispatcher
2. stores
3. 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。 感謝閱讀。