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;

第三步 封裝異步請(qǐng)求方法

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

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());
    }
    //異步獲取請(qǐng)求的方法
    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這個(gè)中間件可以使我們把這樣的異步請(qǐng)求或者說復(fù)雜的邏輯可以放到action里面去處理，redux-thunk使redux的一個(gè)中間件，為什么叫做中間件

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

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

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

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

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

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

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

最新評(píng)論