react項目學習筆記四（redux和redux的中間件redux-thunk的認識）

一、Action的認識

• 簡單點說Action就是一個對象，一個必須帶key爲type的對象[value是自己定義的]，其他的key就根據用戶自己喜好自己定義: 
  以下都是action的定義 
  
  • 1、{type:”ADD”}
  • 2、{type:”ADD”,key1:”“,key2:”“}

二、Reducer的認識

• 別主觀意識就是類似數組中的reduce，也不是隻能定義reducer，它僅僅是一個稱呼，純函數，函數名次自己隨便定義都可以，但是函數的參數只能是state與action,可以簡單的理解爲一個工廠函數，傳遞一箇舊的state通過加工後產出一個新的state：
• 簡單的代碼如下：

function count(state = 0, action) {
    switch (action.type) {
        case 'ADD':
            return state + 1;
        case 'REDUCER':
            return state - 1;
        default:
            return state;
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 如果當state是對象的時候上面的代碼是錯誤的: 
  
  • redux裏面規定state是不能修改的。
  • 在javascript中對象是引用數據類型，當你修改了state的時候，變化前後的兩個state將會指向同一個地址的，react-redux就會以爲這兩個相同的state，因爲不會執行渲染
  • 解決辦法，我們用Object.assign去處理，如有不清楚Object.assign，請參考Object.assign文檔

三、Store的認識

• store是一個全局對象，將action和reducer以及state聯繫在一起，主要職責: 
  
  • 維護應用的state
  • 提供getState()方法獲取state
  • 提供dispatch(action)方法更新state
  • 通過subscribe(方法)註冊監聽器

四、上面三者的使用案例

'use strict';
import {createStore} from 'redux';
function count(state = 0, action) {
    switch (action.type) {
        case 'ADD':
            return state + 1
        case 'REDUCER':
            return state - 1;
        default:
            return state
    }
}

let store = createStore(count);

let currentValue = store.getState();
console.log('當前的值:', currentValue);

//定義一個監聽的方法
let listener = () => {
    const previosValue = currentValue;
    currentValue = store.getState();
    console.log('上一個值:', previosValue, '當前值:', currentValue)
}
//創建一個監聽
store.subscribe(listener);
//分發任務
store.dispatch({type:"ADD"});
store.dispatch({type:"ADD"});
store.dispatch({type:"ADD"});
store.dispatch({type:"REDUCER"});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

五、Action創建函數

• 上面我們說的action是一個對象，只是含有type的key的對象
• action創建函數的意思就是創建一個action的函數，函數返回一個對象

function add(){
    return{
        type:"ADD",
    }
}
function reducer() {
    return{
        type:"REDUCER",
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 使用的時候直接store.dispatch(add());就可以
• action創建函數的意義: 
  
  • action創建函數表面是返回一個對象
  • 真正的意義在於邏輯的封裝

六、redux-thunk中間件的認識

• redux-thunk中間件可以讓action創建函數先不返回一個action對象，而是返回一個函數，函數傳遞兩個參數(dispatch,getState),在函數體內進行業務邏輯的封裝

function add() {
    return {
        type: 'ADD',
    }
}

function addIfOdd() {
    return (dispatch, getState) => {
        const currentValue = getState();
        if (currentValue % 2 == 0) {
            return false;
        }
        //分發一個任務
        dispatch(add())
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

七、使用方式

• 安裝:npm install redux-thunk --save-dev
• 導入thunk： import thunk from 'redux-thunk'
• 導入中間件: import {createStore,applyMiddleware} from 'redux'
• 創建store：let store = createStore(reducer函數，applyMiddleware(thunk))
• 激活redux-thunk中間件，只需要在createStore中加入applyMiddleware(thunk)就可以
• 完整代碼如下:

'use strict';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';

function count(state = 0, action) {
    switch (action.type) {
        case 'ADD':
            return state + 1;
        case 'REDUCER':
            return state - 1;
        default:
            return state;
    }
}
const store = createStore(count,applyMiddleware(thunk));
//action創建函數
function add() {
    return {
        type: 'ADD',
    }
}
function reducer() {
    return {
        type: 'REDUCER'
    }
}
function addIfOdd() {
    return (dispatch, getState) => {
        const currentValue = getState();
        if (currentValue % 2 == 0) {
            return false;
        }
        dispatch(add())
    }
}
function addAsy(delay = 2000) {
    return (dispatch, getState) => {
        setTimeout(() => {
            dispatch(add())
        }, delay)
    }
}

//獲取當前值
let currentValue = store.getState();
//創建一個監聽
store.subscribe(() => {
    const previosValue = currentValue;
    currentValue = store.getState();
    console.log('上一個值:', previosValue, '當前值:', currentValue)
});

//分發任務
store.dispatch(add());
store.dispatch(add());
store.dispatch(add());
store.dispatch(add());
store.dispatch(reducer());
store.dispatch(addIfOdd());
store.dispatch(addAsy());