如何重置 Redux 商店的状态? [英] How to reset the state of a Redux store?

问题描述

我使用 Redux 进行状态管理.
如何将商店重置为初始状态?

I am using Redux for state management.
How do I reset the store to its initial state?

例如，假设我有两个用户帐户(u1 和 u2).
想象以下事件序列:

For example, let’s say I have two user accounts (u1 and u2).
Imagine the following sequence of events:

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

1. User u1 logs into the app and does something, so we cache some data in the store.

用户 u1 注销.

用户 u2 无需刷新浏览器即可登录应用.

User u2 logs into the app without refreshing the browser.

此时缓存的数据会关联到u1，我想清理一下.

At this point, the cached data will be associated with u1, and I would like to clean it up.

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

推荐答案

一种方法是在您的应用程序中编写一个 root reducer.

One way to do that would be to write a root reducer in your application.

根reducer通常会将处理动作委托给由combineReducers()生成的reducer.然而，每当它接收到 USER_LOGOUT 动作时，它都会重新返回初始状态.

The root reducer would normally delegate handling the action to the reducer generated by combineReducers(). However, whenever it receives USER_LOGOUT action, it returns the initial state all over again.

例如，如果您的根减速器如下所示:

For example, if your root reducer looked like this:

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

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

You can rename it to appReducer and write a new rootReducer delegating to it:

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

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

现在我们只需要教新的 rootReducer 返回初始状态以响应 USER_LOGOUT 操作.正如我们所知，无论操作如何，当使用 undefined 作为第一个参数调用 reducer 时，它们都应该返回初始状态.当我们将它传递给 appReducer 时，让我们使用这个事实有条件地去除累积的 state:

Now we just need to teach the new rootReducer to return the initial state in response to the USER_LOGOUT action. As we know, reducers are supposed to return the initial state when they are called with undefined as the first argument, no matter the action. Let’s use this fact to conditionally strip the accumulated state as we pass it to appReducer:

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

  return appReducer(state, action)
}

现在，每当 USER_LOGOUT 触发时，所有的 reducer 都会重新初始化.如果他们愿意，他们还可以返回与最初不同的内容，因为他们也可以检查 action.type.

Now, whenever USER_LOGOUT fires, all reducers will be initialized anew. They can also return something different than they did initially if they want to because they can check action.type as well.

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

To reiterate, the full new code looks like this:

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

In case you are using redux-persist, you may also need to clean your storage. Redux-persist keeps a copy of your state in a storage engine, and the state copy will be loaded from there on refresh.

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

First, you need to import the appropriate storage engine and then, to parse the state before setting it to undefined and clean each storage state key.

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 商店的状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！