Redux簡介

通常來講，當須要根據角色判斷使用方式、與服務器大量交互 (例如使用 WebSocket)、視圖須要從多個來源獲取數據，也就是說在交互複雜、多數據源時；或者從組件的角度考慮，若是須要組件的狀態廣播等時須要使用。

Redux 的設計思想

A) Web 應用是一個狀態機，視圖與狀態是一一對應；B) 全部的狀態，保存在一個對象裏面。

能夠簡單將 Redux 理解爲是 JavaScript 的狀態容器：

• 應用中全部的狀態都是以一個對象樹的形式存儲在一個單一的 store 中；
• 當你想要改變應用的中的狀態時，你就要 dispatch 一個 action，這也是惟一的改變 state 的方法；
• 經過編寫 reducer 來維護狀態，返回新的 state，不直接修改原來數據；

Redux的工做流

首先由view dispatch攔截action，而後執行對應reducer並更新到store中，最終views會根據store數據的改變執行界面的刷新渲染操做。

同時，做爲一款應用狀態管理框架，爲了讓應用的狀態管理再也不錯綜複雜，使用Redux時應遵循三大基本原則，不然應用程序很容易出現難以察覺的問題。這三大原則包括：

• 單一數據源

整個應用的State被存儲在一個狀態樹中，且只存在於惟一的Store中。

• State是隻讀的

對於Redux來講，任什麼時候候都不能直接修改state，惟一改變state的方法就是經過觸發action來間接的修改。而這一看似繁瑣的狀態修改方式實際上反映了Rudux狀態管理流程的核心思想，並所以保證了大型應用中狀態的有效管理。

• 應用狀態的改變經過純函數來完成

Redux使用純函數方式來執行狀態的修改，Action代表了修改狀態值的意圖，而真正執行狀態修改的則是Reducer。且Reducer必須是一個純函數，當Reducer接收到Action時，Action並不能直接修改State的值，而是經過建立一個新的狀態對象來返回修改的狀態。

Redux中的基本概念

1.Store

Store 就是保存數據的地方，能夠把它當作一個容器，整個應用只能有一個 Store ； Redux 經過提供的 createStore() 這個函數來生成 Store 。

import { createStore } from 'redux';
const store = createStore(fn);

其中 createStore() 函數接受另外一個函數做爲參數，返回新生成的 Store 對象。

2.State

Store 對象包含全部數據，若是想獲得某個時點的數據，就要對 Store 生成快照，這種時點的數據集合，就叫作 State 。

當前時刻的 State 能夠經過 store.getState() 拿到

import { createStore } from 'redux';
const store = createStore(fn);

const state = store.getState();

Redux 規定，state 和 view 一一對應，一個 State 對應一個 View，只要 State 相同，View 就相同；反之亦然。

3.Action

如上所述，State 的變化，會致使 View 的變化；可是，用戶接觸不到 State，只能接觸到 View 。因此，State 的變化必須是 View 致使的，Action 就是 View 發出的通知，表示 State 應該要發生變化了。

Action 是一個對象，其中的 type 屬性是必須的，表示 Action 的名稱，其它屬性能夠自由設置，社區有一個 規範 能夠參考。

const action = {
    type: 'ADD_TODO',
    payload: 'Learn Redux'
};

上面代碼中，Action 的名稱是 ADD_TODO，它攜帶的信息是字符串 Learn Redux 。

能夠這樣理解，Action 描述當前發生的事情，改變 State 的惟一辦法，就是使用 Action，它會運送數據到 Store 。

4. Action Creator

View 要發送多少種消息，就會有多少種 Action，若是都手寫，會很麻煩。能夠定義一個函數來生成 Action，這個函數就叫 Action Creator。

const ADD_TODO = '添加 TODO';

function addTodo(text) {
    return {
        type: ADD_TODO,
        text
    }
}

const action = addTodo('Learn Redux');

上面代碼中，addTodo() 函數就是一個 Action Creator 。

5. store.dispatch()

store.dispatch() 是 View 發出 Action 的惟一方法。

import { createStore } from 'redux';
const store = createStore(fn);

store.dispatch({
    type: 'ADD_TODO',
    payload: 'Learn Redux'
});

上面代碼中，store.dispatch 接受一個 Action 對象做爲參數，將它發送出去。

6. Reducer

Store 收到 Action 之後，必須給出一個新的 State，這樣 View 纔會發生變化，這種 State 的計算過程就叫作 Reducer 。

Reducer 是一個函數，它接受 Action 和當前 State 做爲參數，返回一個新的 State 。

const defaultState = 0;
const reducer = (state = defaultState, action) => {
    switch (action.type) {
    case 'ADD':
        return state + action.payload;
    default:
        return state;
    }
};

const state = reducer(1, {
    type: 'ADD',
    payload: 2
});

最後結合一個demo實戰一下：
https://github.com/huangche00...