重置 Redux 的狀態數據

在 Redux 使用過程當中，一般須要重置 store 的狀態，好比應用初始化的時候、用戶退出登陸的時候，這樣可以避免數據殘留，避免 UI 顯示了上一個用戶的數據，容易形成用戶數據泄露。

最簡單的實現方法就是爲每一個獨立的 store 添加RESET_APP 的 action，每次須要 reset 的時候，dispatch 這個 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;
  }
};

這樣雖然簡單，可是當獨立的 store 較多時，須要添加不少 action，並且須要不少個 dispatch 語句去觸發，好比：

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

固然你能夠封裝一下代碼，讓一個RESET_DATA 的 action 去觸發多個 reset 的 action，避免業務代碼看上去太亂。

不過本文介紹一種更優雅的實現，須要用到一個小技巧，看下面代碼：

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

當函數參數 state 爲 undefined 時，state 就會去 usersDefaultState 這個默認值，利用這個技巧，咱們能夠在 rootReducers 中檢測 RESET_DATA action，直接賦值 undefined 就完成了全部 store 的數據重置。實現代碼以下：

咱們一般這樣導出全部的 reducers

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

export default rootReducer;

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

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

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

export default rootReducer;

檢測到特定重置數據的 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?