快捷導(dǎo)航

redux副作用處理之redux-thunk使用

更新時間：2024年01月25日 09:26:35 作者：Shi Jian Xin

這篇文章主要介紹了redux副作用處理之redux-thunk使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、安裝

yarn add redux-thunk
// 或
npm install --save redux-thunk

二、使用

import { createStore, applyMiddleware } from "redux";
import * as loginActions from "./action/login";
import reducer from "./reducer";
import logger from "redux-logger";
import thunk from "redux-thunk";

// 創(chuàng)建倉庫
const store = applyMiddleware(thunk, logger)(createStore)(reducer);

三、為什么要使用redux-thunk?

redux中的action都必須要是一個平面對象，所以就不能有任何的副作用，redux-thunk就是為了解決這一問題，使用redux-thunk中間件后，允許action返回一個函數(shù)，這個函數(shù)是允許有副作用的

例如：

寫一個帶有副作用的action：

export function setTime(payload) {
  return function () {
    setTimeout(() => {
      console.log("定時器");
    }, 1000);
  };
}

如果沒有使用redux-thunk會直接報錯顯示action必須是一個平面對象

import { createStore, applyMiddleware } from "redux";
import * as loginActions from "./action/login";
import reducer from "./reducer";
import logger from "redux-logger";
import thunk from "redux-thunk";

// 創(chuàng)建倉庫
const store = applyMiddleware(logger)(createStore)(reducer);
store.dispatch(loginActions.setTime());

使用了redux-thunk中間件后正常運(yùn)行

四、redux-thunk運(yùn)行原理

redux-thunk中間件一般放在第一個，因為它在接收action時如果發(fā)現(xiàn)action不是一個平面對象

那么它就不會傳遞給下一個中間件

它會直接將這個函數(shù)運(yùn)行

如果action是一個平面對象它才會往后傳遞

五、redux-thunk原理

redux-thunk會返回給action3個參數(shù)

1.dispatch：store的dispatch
2.getState：store的getState
3.extraArgument：用戶傳入的參數(shù)

源碼：

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    // 如果當(dāng)前的action是一個函數(shù)直接調(diào)用該函數(shù)
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    // 如果當(dāng)前的action是一個平面對象，傳遞個下一個中間件
    return next(action);
  };
}

const thunk = createThunkMiddleware();
// 可以使用withExtraArgument傳入一個參數(shù)
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;