如何在登出时保留Redux中的intro切片不被清除？

要在登出时保留intro切片的状态，你需要修改rootReducer中重置状态的逻辑——不要直接生成全新的初始状态，而是保留现有state中的intro部分，其他切片重置为初始值。具体步骤如下：

修改Root Reducer逻辑 #

在处理auth/logout action时，先生成全量初始状态，再将其中的intro部分替换为当前state的intro值（如果state存在），这样就能保留用户是否已经看过引导滑块的状态：

// Root reducer (resettable)
const rootReducer = (
  state: ReturnType<typeof appReducer> | undefined,
  action: AnyAction
) => {
  if (action.type === "auth/logout") {
    // 仅清除root的持久化数据，不影响intro的单独存储
    storage.removeItem("persist:root");

    // 生成所有切片的初始状态
    const initialState = appReducer(undefined, action);
    // 保留intro的现有状态，其他切片用初始值
    return {
      ...initialState,
      intro: state?.intro || initialState.intro,
    };
  }

  return appReducer(state, action);
};

逻辑说明 #

1. 存储层面：你的intro切片是单独配置持久化的（key为intro），其数据存在persist:intro存储项中，而root的持久化数据存在persist:root中。删除persist:root只会清除其他切片的持久化状态，不会影响intro的存储。
2. 状态重置：调用appReducer(undefined, action)会生成所有切片的初始状态（包括auth、RTK Query的api状态等），然后我们将intro部分替换为当前state中的intro值——如果用户已经看过引导滑块，showIntro会是false，这个值会被保留；如果是首次启动（state为undefined），则使用初始的showIntro: true，符合需求。

验证场景 #

• 首次启动：引导滑块显示，用户看完后调用hideIntro，showIntro变为false并持久化。
• 登出后：其他切片重置为初始状态，但intro.showIntro仍为false，下次登录不会再显示引导滑块。
• 清除应用数据：persist:intro被删除，再次启动时showIntro回到true，引导滑块重新显示。

内容的提问来源于stack exchange，提问作者Nima Zarei