如何重置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.

root reducer通常会委托处理对还原的行动由 combineReducers（）生成。但是，只要它收到 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.

例如，如果你的root reducer看起来像这样：

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 作为第一个参数调用它们时，reducers应该返回初始状态，无论操作如何。让我们使用这个事实有条件地剥离累积的州，因为我们将它传递给 appReducer ：

Now we just need to teach the new rootReducer to return the initial state after 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') {
    state = undefined
  }

  return appReducer(state, action)
}

现在，每当 USER_LOGOUT 触发时，所有减速器将重新初始化。如果他们愿意，他们也可以返回与他们最初不同的东西，因为他们也可以检查 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') {
    state = undefined
  }

  return appReducer(state, action)
}

请注意，我不是在这里改变状态，我只是重新分配名为 >状态然后将其传递给另一个函数。改变状态对象将违反Redux原则。

Note that I’m not mutating the state here, I am merely reassigning the reference of a local variable called state before passing it to another function. Mutating a state object would be a violation of Redux principles.

如果使用 redux-persist ，您可能还需要清理存储空间。 Redux-persist会将您的状态副本保存在存储引擎中，并在刷新时从那里加载它们。

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

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

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) {
        Object.keys(state).forEach(key => {
            storage.removeItem(`persist:${key}`);
        });
        state = undefined;
    }
    return AppReducers(state, action);
};

这篇关于如何重置Redux商店的状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！