一种方法是在应用程序中编写一个根减速器。

根减速机通常会将处理操作委托给combineReducers()生成的减速机。但是，无论何时它接收到USER_LOGOUT操作，它都会再次返回初始状态。

例如，如果你的根减速器是这样的:

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

你可以将它重命名为appReducer，并编写一个新的rootReducer委托给它:

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

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

现在我们只需要教新的rootReducer返回初始状态以响应USER_LOGOUT操作。如我们所知，无论操作如何，当调用以undefined作为第一个参数时，约简器都应该返回初始状态。让我们用这个事实来有条件地剥离累积状态，当我们把它传递给appReducer:

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

  return appReducer(state, action)
}

现在，每当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将您的状态副本保存在存储引擎中，刷新时将从那里加载状态副本。

首先，您需要导入适当的存储引擎，然后在将其设置为undefined并清除每个存储状态键之前解析状态。

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);
};

这种方法非常正确:销毁任何特定状态“NAME”以忽略并保留其他状态。

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

结合Dan Abramov的回答，Ryan Irilli的回答和Rob Moorman的回答，来解释保持路由器状态和初始化状态树中的其他所有东西，我最终得到了这样的答案:

const rootReducer = (state, action) => appReducer(action.type === LOGOUT ? {
    ...appReducer({}, {}),
    router: state && state.router || {}
  } : state, action);

Dan Abramov的答案没有做的一件事是为参数化选择器清除缓存。如果你有一个这样的选择器:

export const selectCounter1 = (state: State) => state.counter1;
export const selectCounter2 = (state: State) => state.counter2;
export const selectTotal = createSelector(
  selectCounter1,
  selectCounter2,
  (counter1, counter2) => counter1 + counter2
);

然后你必须像这样在登出时释放它们:

selectTotal.release();

否则，最后一次调用选择器的记忆值和最后一个参数的值仍将在内存中。

代码示例来自ngrx文档。

From a security perspective, the safest thing to do when logging a user out is to reset all persistent state (e.x. cookies, localStorage, IndexedDB, Web SQL, etc) and do a hard refresh of the page using window.location.reload(). It's possible a sloppy developer accidentally or intentionally stored some sensitive data on window, in the DOM, etc. Blowing away all persistent state and refreshing the browser is the only way to guarantee no information from the previous user is leaked to the next user.

(当然，作为共享计算机上的用户，你应该使用“私人浏览”模式，自己关闭浏览器窗口，使用“清除浏览数据”功能，等等，但作为开发人员，我们不能期望每个人都总是那么勤奋)

使用Redux Toolkit和/或Typescript:

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

const rootReducer = (
  state: ReturnType<typeof appReducer>,
  action: AnyAction
) => {
/* if you are using RTK, you can import your action and use it's type property instead of the literal definition of the action  */
  if (action.type === logout.type) {
    return appReducer(undefined, { type: undefined });
  }

  return appReducer(state, action);
};