如何在用户注销时正确重置 Redux 存储状态？

在用户注销时重置 Redux 存储状态

在 Redux 中，存储维护应用程序的状态。确保在用户注销时将存储重置为初始状态对于防止缓存问题和数据污染至关重要。

要实现此目的，一种方法是创建自定义根减速器。它将操作处理委托给由combineReducers()生成的reducers。但是，当它遇到 USER_LOGOUT 操作时，它将返回初始状态。

假设您有一个如下所示的 rootReducer：

const rootReducer = combineReducers({
  // Your app's top-level reducers
});

您可以将其重命名为 appReducer 并定义一个委托给 appReducer 的新 rootReducer：

const appReducer = combineReducers({
  // Your app's top-level reducers
});

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

接下来，教rootReducer 在收到 USER_LOGOUT 操作时返回初始状态。众所周知，无论操作类型如何，当以 undefined 作为第一个参数调用时，Reducer 都会返回初始状态。我们可以利用这种行为：

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

  return appReducer(state, action);
};

通过此修改，所有减速器都将在 USER_LOGOUT 时重新初始化，并且它们可以根据 action.type 选择返回不同的状态。

如果您的应用程序使用 redux-persist，您可能还需要清除存储的状态：

const rootReducer = (state, action) => {
  if (action.type === 'SIGNOUT_REQUEST') {
    // Remove the persisted state 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 存储和存储的状态将被重置，为后续用户会话保持干净的状态。

以上是如何在用户注销时正确重置 Redux 存储状态？的详细内容。更多信息请关注PHP中文网其他相关文章！