快捷導(dǎo)航

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

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

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

一、安裝

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

例如：

寫一個(gè)帶有副作用的action：

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

如果沒有使用redux-thunk會(huì)直接報(bào)錯(cuò)顯示action必須是一個(gè)平面對(duì)象

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中間件一般放在第一個(gè)，因?yàn)樗诮邮誥ction時(shí)如果發(fā)現(xiàn)action不是一個(gè)平面對(duì)象

那么它就不會(huì)傳遞給下一個(gè)中間件

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

如果action是一個(gè)平面對(duì)象它才會(huì)往后傳遞

五、redux-thunk原理

redux-thunk會(huì)返回給action3個(gè)參數(shù)

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

源碼：

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

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

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

export default thunk;