使用Redux Toolkit的useSelector出现重复渲染及Selector错误求助

问题根源 #

你收到的错误提示和多次重渲染，核心问题出在getAuthState选择器上：

Selector memoized returned the root state when called. This can lead to unnecessary rerenders.
Selectors that return the entire state are almost certainly a mistake, as they will cause a rerender whenever anything in state changes.

原选择器把整个Redux根状态作为输入参数，再返回整个auth切片，直接触发了两个问题：

1. Redux Toolkit的lint规则报错，这是明确的反最佳实践
2. 只要Redux里任何数据变化（哪怕和auth无关），选择器都会重新计算；就算组件只用到loggedIn和busy，只要auth里其他字段（比如profile）更新，整个auth对象引用变化，就会触发组件重渲染
3. 加上你在useEffect里连续dispatch了4次action，再加上初始渲染，刚好出现5次重渲染

修复方案 #

1. 优化选择器（两种可选方案）

直接修改Slice里的选择器，要么只返回组件需要的字段，要么拆分成细粒度独立选择器：

方案一：返回组件所需的最小字段集

// Slice.tsx
export const getAuthState = createSelector(
  // 直接定位到所需的具体字段，而非整个根状态或切片
  (state: RootState) => state.auth.loggedIn,
  (state: RootState) => state.auth.busy,
  // 仅返回组件用到的两个字段
  (loggedIn, busy) => ({ loggedIn, busy })
);

方案二：拆分成独立选择器（更灵活）

如果其他组件也需要单独使用loggedIn或busy，拆成两个独立选择器更方便：

// Slice.tsx
export const getIsLoggedIn = createSelector(
  (state: RootState) => state.auth.loggedIn,
  (loggedIn) => loggedIn
);

export const getIsBusy = createSelector(
  (state: RootState) => state.auth.busy,
  (busy) => busy
);

2. 调整组件里的useSelector用法

如果用方案一，组件代码无需大幅修改；如果用方案二，改成单独获取每个字段：

// AppNavigator.tsx
// 方案二对应的写法
const loggedIn = useSelector(getIsLoggedIn);
const busy = useSelector(getIsBusy);

效果验证 #

修改后：

• 错误提示直接消失，选择器不再传入整个根状态
• 重渲染次数减少到必要场景：只有loggedIn或busy变化时，组件才会重渲染，其他auth字段（比如profile）更新不会触发无意义的重渲染
• 原本的5次重渲染会降到3次左右（初始渲染、busy变为true、busy变为false+loggedIn变为true）

内容的提问来源于stack exchange，提问作者Ahmad Nadeem