redux的基本概念

看風景就發表於2018-08-19
Redux

1. State 應用的資料，即狀態

2. Action 一個純物件，攜帶這個操作的型別和資料資訊，主要是用來進行傳遞資訊，如下所示：

const action = {
    type: 'ADD_TODO',
    payload: {}
}

3. Action Creater 一個函式，根據指定引數，來生成一個Action，目的是減少程式碼量

4. Reducer 一個純函式，用來修改應用的狀態，接收當前State和Action，返回一個新的State，如下所示：

const reducer = function(state,action){
    //...
    return new_state;
}

Reducer是一個純函式，有如下特徵：

1. 不得改寫引數
2. 不得呼叫系統的I/O的API
3. 不得呼叫Date.now()或者Math.random()等不純的方法，因為每次得到的結果會不一樣

Reducer不能改變State，必須返回一個新的物件，具體可以使用{...obj}運算子或者Object.assign()來操作

5. combineReducers 一個函式，將多個小的Reducer合併成一個大的Reducer

單個Reducer修改state會造成解析Action的Switch語句過長，程式碼量大，難以維護，需要將Reducer拆分為多個函式，
每個函式只修改一部分State，然後將修改的結果合併成一個State，combineReducer就做了這個事情

6. Store 資料儲存中心

Store有三大方法：

Store.getState() 獲取Store當前的狀態

Store.dispatch() 分派一個Action，用來修改Store的狀態，從View中發出Action的唯一方法

Store.subscribe() 訂閱一個監聽器，當Store的狀態發生改變的時候，執行函式

7. Middlewares 中介軟體

中介軟體實際上就是一個攔截器，本質是一個函式，攔截所有的Action，並執行特定的操作

如日誌中介軟體，攔截Action，並且列印每個Action
redux-thunk中介軟體，區分Action是否是一個函式，如果是就執行該函式，否則正常派發Action到Reducer

中介軟體執行過程如下圖所示：

相關文章