如何重置 Redux 存储的状态？

我正在使用 Redux 进行状态管理。
如何将商店重置为初始状态？

例如，假设我有两个用户帐户（u1 and u2).
想象一下以下事件顺序：

1. User u1登录应用程序并执行某些操作，因此我们在商店中缓存一些数据。

2. User u1注销。

3. User u2无需刷新浏览器即可登录应用程序。

此时，缓存的数据就会关联到u1，我想把它清理干净。

当第一个用户注销时，如何将 Redux 存储重置为其初始状态？

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

根减速器通常会将处理操作委托给由以下生成的减速器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行动。众所周知，reducer 在被调用时应该返回初始状态undefined作为第一个参数，无论采取什么行动。让我们利用这个事实来有条件地剥离累积的state当我们将它传递给appReducer:

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

  return appReducer(state, action)
}

现在，每当USER_LOGOUT发生火灾时，所有减速器将被重新初始化。如果他们愿意的话，他们还可以返回与最初不同的东西，因为他们可以检查action.type以及。

重申一下，完整的新代码如下所示：

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

首先，您需要导入适当的存储引擎然后，在将其设置为之前解析状态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);
};