如何在使用者登出時正確重置 Redux 儲存狀態？

在使用者登出時重設 Redux 儲存狀態

在 Redux 中，儲存維護應用程式的狀態。確保在用戶登出時將儲存空間重設為初始狀態對於防止快取問題和資料污染至關重要。

要實現此目的，一種方法是建立自訂根減速器。它將操作處理委託給由combineReducers()產生的reducer。但是，當它遇到 USER_LOGOUT 操作時，它將傳回初始狀態。

假設您有一個如下所示的rootReducer：

const rootReducer = combineReducers({
  // Your app's top-level reducers
});

您可以將其重新命名為appReducer 並定義一個委託給appReducer 的新rootReducer：

const appReducer = combineReducers({
  // Your app's top-level reducers
});

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

接下來，教導rootReducer 在收到USER_LOGOUT 作業時傳回初始狀態。眾所周知，無論操作類型為何，以 undefined 作為第一個參數呼叫時，Reducer 都會傳回初始狀態。我們可以利用這種行為：

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

  return appReducer(state, action);
};

透過此修改，所有減速器都會在 USER_LOGOUT 時重新初始化，並且它們可以根據 action.type 選擇傳回不同的狀態。

如果您的應用程式使用redux-persist，您可能還需要清除儲存的狀態：

const rootReducer = (state, action) => {
  if (action.type === 'SIGNOUT_REQUEST') {
    // Remove the persisted state 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 儲存狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！