這篇文章主要介紹如何實(shí)現(xiàn)重置Redux狀態(tài)數(shù)據(jù)的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站制作、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元崇明做網(wǎng)站,已為上家服務(wù),為崇明各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

在 Redux 使用過程中，通常需要重置 store 的狀態(tài)，比如應(yīng)用初始化的時(shí)候、用戶退出登錄的時(shí)候，這樣能夠避免數(shù)據(jù)殘留，避免 UI 顯示了上一個(gè)用戶的數(shù)據(jù)，容易造成用戶數(shù)據(jù)泄露。

最簡單的實(shí)現(xiàn)方法就是為每個(gè)獨(dú)立的 store 添加RESET_APP 的 action，每次需要 reset 的時(shí)候，dispatch 這個(gè) action 即可，如下代碼

const usersDefaultState = [];

const users = (state = usersDefaultState, { type, payload }) => {
 switch (type) {
  case "ADD_USER":
   return [...state, payload];
  default:
   return state;
 }
};

添加 reset action 后：

const usersDefaultState = []

const users = (state = usersDefaultState, { type, payload }) => {
 switch (type) {
  case "RESET_APP":
   return usersDefaultState;
  case "ADD_USER":
   return [...state, payload];
  default:
   return state;
 }
};

這樣雖然簡單，但是當(dāng)獨(dú)立的 store 較多時(shí)，需要添加很多 action，而且需要很多個(gè) dispatch 語句去觸發(fā)，比如：

dispatch({ type: RESET_USER });
dispatch({ type: RESET_ARTICLE });
dispatch({ type: RESET_COMMENT });

當(dāng)然你可以封裝一下代碼，讓一個(gè)RESET_DATA 的 action 去觸發(fā)多個(gè) reset 的 action，避免業(yè)務(wù)代碼看上去太亂。

不過本文介紹一種更優(yōu)雅的實(shí)現(xiàn)，需要用到一個(gè)小技巧，看下面代碼：

const usersDefaultState = []
const users = (state = usersDefaultState, { type, payload }) => {...}

當(dāng)函數(shù)參數(shù) state 為 undefined 時(shí)，state 就會(huì)去 usersDefaultState 這個(gè)默認(rèn)值，利用這個(gè)技巧，我們可以在 rootReducers 中檢測 RESET_DATA action，直接賦值 undefined 就完成了所有 store 的數(shù)據(jù)重置。實(shí)現(xiàn)代碼如下：

我們通常這樣導(dǎo)出所有的 reducers

// reducers.js
const rootReducer = combineReducers({
 /* your app's top-level reducers */
})

 
export default rootReducer;

先封裝一層，combineReducers 返回 reducer 函數(shù)，不影響功能

// reducers.js
const appReducer = combineReducers({
 /* your app's top-level reducers */
})

const rootReducer = (state, action) => {
 return appReducer(state, action)
}

export default rootReducer;

檢測到特定重置數(shù)據(jù)的 action 后利用 undefined 技巧 (完整代碼)

// reducers.js
const appReducer = combineReducers({
 /* your app's top-level reducers */
})

const rootReducer = (state, action) => {
 if (action.type === 'RESET_DATA') {
  state = undefined
 }

 return appReducer(state, action)
}

以上是“如何實(shí)現(xiàn)重置Redux狀態(tài)數(shù)據(jù)的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！