快捷導(dǎo)航

重置Redux的狀態(tài)數(shù)據(jù)的方法實(shí)現(xiàn)

更新時(shí)間：2019年11月18日 09:56:21 作者：Sdbybyd

這篇文章主要介紹了重置Redux的狀態(tài)數(shù)據(jù)的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

最簡(jiǎn)單的實(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;
 }
};

這樣雖然簡(jiǎn)單，但是當(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 中檢測(cè) 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;

檢測(cè)到特定重置數(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)
}

參考：

Resetting Redux State with a Root Reducer
How to reset the state of a Redux store?

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: