定义一个动作:

const RESET_ACTION = {
  type: "RESET"
}

然后在每个减速器中假设您使用switch或if-else通过每个减速器处理多个动作。我要拿开关的箱子。

const INITIAL_STATE = {
  loggedIn: true
}

const randomReducer = (state=INITIAL_STATE, action) {
  switch(action.type) {
    case 'SOME_ACTION_TYPE':

       //do something with it

    case "RESET":

      return INITIAL_STATE; //Always return the initial state

   default: 
      return state; 
  }
}

这样当你调用RESET动作时，你的reducer就会用默认状态更新存储。

现在，注销，你可以处理如下:

const logoutHandler = () => {
    store.dispatch(RESET_ACTION)
    // Also the custom logic like for the rest of the logout handler
}

每次用户登录时，不需要刷新浏览器。Store将始终处于默认状态。

store.dispatch(RESET_ACTION)只是详细阐述了这个思想。你很可能会有一个用于此目的的动作创建者。更好的方法是使用LOGOUT_ACTION。

一旦分派了这个LOGOUT_ACTION。然后，一个自定义中间件可以用Redux-Saga或Redux-Thunk拦截这个动作。然而，这两种方法都可以分派另一个动作“RESET”。通过这种方式，存储注销和重置将同步发生，您的存储将为另一个用户登录做好准备。

为了将状态重置为初始状态，我编写了以下代码:

const appReducers = (state, action) =>
   combineReducers({ reducer1, reducer2, user })(
     action.type === "LOGOUT" ? undefined : state,
     action
);

 const reducer = (state = initialState, { type, payload }) => {

   switch (type) {
      case RESET_STORE: {
        state = initialState
      }
        break
   }

   return state
 }

你也可以触发一个动作，由所有或部分还原器处理，你想重置到初始存储。一个动作可以触发你整个状态的重置，或者只是适合你的一部分。我相信这是最简单、最可控的方法。

下面的解决方案对我很有效。

我添加了重置状态功能到元还原器。关键在于使用

return reducer(undefined, action);

将所有减速器设置为初始状态。返回undefined反而会导致错误，因为存储的结构已经被破坏。

/还原剂index.ts

export function resetState(reducer: ActionReducer<State>): ActionReducer<State> {
  return function (state: State, action: Action): State {

    switch (action.type) {
      case AuthActionTypes.Logout: {
        return reducer(undefined, action);
      }
      default: {
        return reducer(state, action);
      }
    }
  };
}

export const metaReducers: MetaReducer<State>[] = [ resetState ];

app.module.ts

import { StoreModule } from '@ngrx/store';
import { metaReducers, reducers } from './reducers';

@NgModule({
  imports: [
    StoreModule.forRoot(reducers, { metaReducers })
  ]
})
export class AppModule {}

如果你正在使用还原动作，这里有一个快速的解决方案，使用HOF(高阶函数)为handleActions。

import { handleActions } from 'redux-actions';

export function handleActionsEx(reducer, initialState) {
  const enhancedReducer = {
    ...reducer,
    RESET: () => initialState
  };
  return handleActions(enhancedReducer, initialState);
}

然后使用handleActionsEx代替原来的handleActions来处理reducers。

Dan的回答给出了关于这个问题的一个很好的想法，但它对我来说并不是很有效，因为我使用的是还原坚持。 当使用redux-persist时，简单地传递未定义的状态不会触发持久化行为，所以我知道我必须手动从存储中删除项目(在我的情况下，React Native，因此AsyncStorage)。

await AsyncStorage.removeItem('persist:root');

or

await persistor.flush(); // or await persistor.purge();

对我也没用——他们只是对我大喊大叫。(例如，抱怨“意外的键_persist…”)

然后我突然思考，我想要的只是让每个减速机在遇到RESET动作类型时回到自己的初始状态。这样，持久化就被自然地处理了。显然没有上面的实用函数(handleActionsEx)，我的代码不会看起来很干(虽然它只是一个一行程序，即RESET: () => initialState)，但我不能容忍它，因为我喜欢元编程。

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.

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