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中間件后正常運行
四、redux-thunk運行原理
redux-thunk中間件一般放在第一個，因為它在接收action時如果發(fā)現(xiàn)action不是一個平面對象
那么它就不會傳遞給下一個中間件
它會直接將這個函數(shù)運行
如果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;
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React Hook中useState更新延遲問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
React+ResizeObserver實現(xiàn)自適應(yīng)ECharts圖表
ResizeObserver是JavaScript的一個API,用于監(jiān)測元素的大小變化,本文主要為大家介紹了React如何利用ResizeObserver實現(xiàn)自適應(yīng)ECharts圖表,需要的可以參考下2024-01-01
本文主要介紹了React創(chuàng)建配置項目的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-06-06
React實現(xiàn)一個高度自適應(yīng)的虛擬列表
這篇文章主要介紹了React如何實現(xiàn)一個高度自適應(yīng)的虛擬列表，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
本文主要介紹了react實現(xiàn)組件狀態(tài)緩存的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了react之umi配置國際化語言locale的踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
在React中寫一個Animation組件為組件進(jìn)入和離開加上動畫/過度效果
這篇文章主要介紹了在React中寫一個Animation組件為組件進(jìn)入和離開加上動畫/過度效果,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
這篇文章主要為大家介紹了React并發(fā)更新與性能優(yōu)化解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
React項目中服務(wù)器端渲染SSR的實現(xiàn)與優(yōu)化詳解
在傳統(tǒng)的 React 項目里,頁面的渲染工作是在瀏覽器里完成的,而服務(wù)器端渲染（SSR）則是讓服務(wù)器先把 React 組件渲染成 HTML 字符串,再把這個 HTML 字符串發(fā)送給瀏覽器,下面我們就來看看具體實現(xiàn)方法吧2025-03-03
這篇文章主要為大家詳細(xì)介紹了React如何實現(xiàn)視頻旋轉(zhuǎn)縮放功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11