Redux中間件及中間件的執行原理（redux-thunk）

1、Redux-thunk中間件

第一步 安裝redux-thunk中間件

npm install redux-thunk

第二步 在store中引入thunk組件

import {createStore,applyMiddleware } from 'redux';
import Reducer from './Reducer';
import thunk from 'redux-thunk';

const store = createStore(Reducer,applyMiddleware(thunk));

export default store;

第三步 封裝異步請求方法

在TodoList.js組件中，封裝異步獲取請求的方法：

import React, { Component } from 'react'
import Store from './Store'
import axios from 'axios'

export class TodoList extends Component {

    constructor(props){
        super(props);
        this.state = Store.getState();
        this.handleStoreChange = this.handleStoreChange.bind(this);
        Store.subscribe(this.handleStoreChange);
    }

    //在生命週期函數中調用異步方法
    componentDidMount(){
        Store.dispatch(this.getTodoListDatas());
    }

    //異步獲取請求的方法
    getTodoListDatas(){
        return (dispatch)=>{
            axios.get("/data.json")
            .then(resp => {
                const action = {
                    type:'axios_getdata',
                    data:resp.data
                }
                dispatch(action)
            })
        }
    }

    handleStoreChange(){
        this.setState(Store.getState());
    }

    render() {
        return (
            <div>
                <input type='text' value={this.state.inputValue}></input>
                <button>添加</button>
                <hr></hr>
                <ul>
                    {this.state.list.map((item,index)=>{
                        return (
                            <li key={index}>{item}</li>
                        );
                    })}
                </ul>
            </div>
        )
    }
}

export default TodoList

第四步 在reducer中接收action信息

const defaultState = {
    inputValue:'',
    list:[]
}

export default (state = defaultState,action) => {
    if(action.type === 'axios_getdata'){
        const newState = state;
        newState.list = action.data;
        return newState;
    }

    return state
}

2、Redux中間件執行原理

redux-thunk這個中間件可以使我們把這樣的異步請求或者說複雜的邏輯可以放到action裏面去處理，redux-thunk使redux的一箇中間件，爲什麼叫做中間件

我們說中間件，那麼肯定是誰和誰的中間，那麼redux的中間件指的是誰和誰的中間呢？

如圖。view在redux中會派發一個action，action通過store的dispatch方法派發給store,store接收到action，連同之前到state，一起傳給reducer，reducer返回一個新到數據給store,store去改變自己到state。這是redux的一個標準流程，那麼我們說redux的中間件指的是誰和誰的之間，大家一定要記住， redux的中間件指的是action和store之間。之前我們說action只能是一個對象，所以action是一個對象直接派發給了store。 但是現在，當我們使用了redux-thunk之後，action可以是函數了。

爲什麼可以是函數呢，看這張圖。action通過dispatch方法被傳遞給store，那麼action和store之間是誰，是不是就是dispatch這個方法， 實際上我們指的中間件指的是什麼呢，就是對dispatch方法的一個封裝，或者說是dispatch方法的一個升級，最原始的dispatch方法，他接收到一個對象之後，會把這個對象傳遞給store，這就是view中間件的一個情況。 當我們對dispath做了一個升級之後，比如說我們使用了redux-thunk這個中間件，對dispath做了一個升級，這個時候當你調用dispatch方法，給dispatch傳遞的參數是一個對象的話，那麼這個dispatch就會把這個對象直接傳給store。跟之前寫一個對象，調用dispatch傳給store沒有任何的區別。但是這個時候假設傳給dispatch方法是一個函數的話，這個時候dispatch方法已經升級了。他知道如果你傳遞過來是一個函數的話，他就不會把這個函數直接傳遞給store。他會怎麼辦呢？

他會讓你這個函數先執行，然後執行完了之後，需要調用store的時候，這個函數再去調用store。所以dispatch做了一個事情，他會根據參數的不同，執行不同的事情，如果你參數是對象，那我直接傳給store。如果你參數是函數，那就把這個函數執行結束。所以講到這大家應該知道

redux中間件，他的原理是非常簡單的，他就是對store對dispatch方法做一個升級，之前這個dispatch方法只能接收一個對象，現在升級之後，就可以接收對象，也可以接收函數了。 當然這裏用什麼對他進行一個升級呢？用redux-thunk對他進行了升級。當然中間件不只redux-thunk這一個，實際上redux中間件非常多，比如說我們說的redux-log，可以記錄action每次派發的日誌，那他怎麼記錄呢？其實也很簡單，每次調用 action的時候，都會通過dispatch把這個action傳遞給store，那麼我可以對dispatch做一個升級，dispatch不僅僅把action傳遞給store，而且在每次傳遞之前呢，還通過console.log，把這個action打印出來。這樣就寫了一個redux-log的中間件。他可以在每次派發action的時候，把這個action打印在控制檯裏面。

最近用的比較火的redux中間件，除了redux-thunk,redux-log這樣的東西，還有一箇中間件，叫做redux-saga。他的應用範圍也非常廣，redux-saga也是解決redux中間異步問題的中間件。不同於redux-thunk。redux-thunk是把異步操作放在action裏面操作。而redux-saga採用的設計思想是，單獨的把一個異步邏輯拆分出來，放在一個異步文件裏面管理，基本上掌握了redux-thunk和redux-saga這兩者的設計思路之後呢，再去做redux裏面的異步邏輯，或者說複雜的邏輯，如何去拆分，就比較明白了。