如何避免React+TypeScript+Redux Toolkit中useSelector代码重复？

完全可以通过集中管理选择器的方式实现复用，具体步骤如下：

1. 创建独立的选择器模块文件 #

在你的Redux feature目录下（比如src/features/user/）新建一个专门存放选择器的文件，比如userSelectors.ts。这里需要先确保你已经从store中导出了RootState类型（用于TypeScript类型校验）。

示例：store.ts中导出RootState #

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './features/user/userSlice';

export const store = configureStore({
  reducer: {
    user: userReducer,
    // 其他reducer...
  },
});

// 导出RootState类型，供选择器使用
export type RootState = ReturnType<typeof store.getState>;

示例：userSelectors.ts编写复用选择器 #

import { RootState } from '../../store';
import { createSelector } from '@reduxjs/toolkit'; // 用于memoized衍生选择器

// 基础选择器：选择整个user切片
export const selectUser = (state: RootState) => state.user;

// 常用原子选择器：直接获取单一字段
export const selectUserRole = (state: RootState) => state.user.role;
export const selectUserName = (state: RootState) => state.user.name;
export const selectIsUserLoggedIn = (state: RootState) => !!state.user.id;

// 进阶：memoized衍生选择器（处理需要计算的状态）
// 比如根据用户角色筛选权限，依赖变化时才重新计算
const selectPermissions = (state: RootState) => state.permissions;
export const selectUserAvailablePermissions = createSelector(
  [selectUser, selectPermissions],
  (user, permissions) => {
    return permissions.filter(perm => perm.allowedRoles.includes(user.role));
  }
);

2. 在组件中直接导入使用 #

不需要再重复编写匿名选择器，直接导入预定义好的选择器函数即可：

import { useAppSelector } from '../../app/hooks'; // 你的自定义hooks
import { selectUserRole, selectIsUserLoggedIn } from '../features/user/userSelectors';

function Dashboard() {
  const userRole = useAppSelector(selectUserRole);
  const isLoggedIn = useAppSelector(selectIsUserLoggedIn);

  return (
    <div>
      {isLoggedIn ? (
        <p>当前角色：{userRole}</p>
      ) : (
        <p>请先登录</p>
      )}
    </div>
  );
}

export default Dashboard;

优势 #

• 减少重复代码：一次编写，全项目复用
• 类型安全：基于RootState的类型校验，避免字段拼写错误
• 统一维护：选择器逻辑集中管理，修改时只需改一处
• 性能优化：通过createSelector实现缓存，避免不必要的重复计算

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