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);
    }
    //在生命周期函數(shù)中調(diào)用異步方法
    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中間件執(zhí)行原理

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

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

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

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

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

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

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

到此這篇關于Redux thunk中間件及執(zhí)行原理詳細分析的文章就介紹到這了,更多相關Redux thunk中間件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論