redux的基本概念

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

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

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

相關文章