Redux 是 JavaScript 狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理。

• action 是純聲明式的數(shù)據(jù)結(jié)構(gòu)，只提供事件的所有要素，不提供邏輯。
• reducer 是一個(gè)匹配函數(shù)，action 的發(fā)送是全局的：所有的 reducer 都可以捕捉到并匹配與自己相關(guān)與否，相關(guān)則拿走 action 中的要素進(jìn)行邏輯處理，修改 store 中的狀態(tài)，不相關(guān)則不對(duì) state 進(jìn)行處理并原樣返回。
• store 負(fù)責(zé)存儲(chǔ)狀態(tài)并可以被 react api 回調(diào)，發(fā)布 action。

要點(diǎn)：

1. 應(yīng)用中所有的 state 都以一個(gè)對(duì)象樹(shù)的形式儲(chǔ)存在一個(gè)單一的 store 中。
2. 惟一改變 state 的辦法是觸發(fā) action，一個(gè)描述發(fā)生什么的對(duì)象。

即：不直接修改 state，編寫專門的函數(shù)來(lái)決定每個(gè) action 如何改變應(yīng)用的 state，這個(gè)函數(shù)被叫做 reducer。

Action

是把數(shù)據(jù)從應(yīng)用傳到 store 的有效載荷。是 store 數(shù)據(jù)的唯一來(lái)源。通過(guò) store.dispatch() 將 action 傳到 store。

const action = {
  type: 'ADD_TODO',  // 一定有 type 字段
  payload: 'Learn Redux'
};

Reducer

(previousState, action) => {newState 的純函數(shù)}

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}
//注意點(diǎn)：
//1\. 不要修改 state 值。如果符合條件，則新建一個(gè)副本返回（第一個(gè)參數(shù)為{}而不是 state）;
//2\. 在 default 情況下返回舊的 state。

Store（單一）

1. 維持應(yīng)用的 state；

2. 提供 getState() 方法獲取 state；

3. 提供 dispatch(action) 方法更新 state；

4. 通過(guò) subscribe(listener) 注冊(cè)監(jiān)聽(tīng)器;

5. 通過(guò)unsubscribe(listener) 返回的函數(shù)注銷監(jiān)聽(tīng)器。

import { createStore } from 'redux';
import todoApp from './reducers';
let store = createStore(todoApp); //第二個(gè)參數(shù)可選，設(shè)置 state 的初始狀態(tài)
combineReducers({ counter: counter, todos: todos}); //將兩個(gè)reducer 合并在一起

數(shù)據(jù)流

1. 調(diào)用store.dispatch(action)。

2. Redux store 調(diào)用傳入的 reducer 函數(shù)。

3. 根 reducer 應(yīng)該把多個(gè)子 reducer 輸出合并成一個(gè)單一的 state 樹(shù)。

4. Redux store 保存了根 reducer 返回的完整 state 樹(shù)。

流程.png

參考文檔：http://cn.redux.js.org/index.html