如何在使用者登出時重置 Redux Store 狀態？

重置 Redux 儲存狀態以進行使用者會話管理

Redux 為應用程式中的狀態管理提供了一個強大的框架。為了確保資料完整性，可能需要在使用者登出時將儲存空間重設為其初始狀態。這可以防止與前一個用戶關聯的資料被快取並可能影響下一個用戶的體驗。

自訂根減速器

重置儲存的一種方法是建立一個自訂根減速器，將處理委託給各個減速器。但是，它會覆寫 USER_LOGOUT 操作的預設行為並傳回初始狀態。

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

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

  return appReducer(state, action)
}

使用 Redux-Persist 進行儲存清理

如果使用 redux-persist，需要執行額外的步驟才能從儲存中清除快取狀態。這涉及導入適當的儲存引擎並解析狀態，然後將其設為未定義，然後清除每個儲存狀態鍵。

const rootReducer = (state, action) => {
    if (action.type === SIGNOUT_REQUEST) {
        // for all keys defined in your persistConfig(s)
        storage.removeItem('persist:root')
        // storage.removeItem('persist:otherKey')

        return appReducer(undefined, action);
    }
    return appReducer(state, action);
};

透過實施這些策略，您可以在以下情況下有效地將 Redux 儲存重設為其初始狀態：使用者登出，確保資料完整性並為後續使用者提供無縫的使用者體驗。

以上是如何在使用者登出時重置 Redux Store 狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！