如何在Redux中合并选择器？用单个useSelector获取多reducer数据

要实现单个useSelector获取多个Reducer的数据，只需要让useSelector返回一个包含所有目标数据的对象即可，具体有两种写法：

基础实现 #

直接在useSelector的回调函数里返回一个整合了三个Reducer数据的对象，再通过解构赋值拿到每个数据：

// 推荐定义RootState类型，避免使用any
type RootState = ReturnType<typeof store.getState>;

const { data1, data2, data3 } = useSelector((state: RootState) => ({
  data1: state.reducer1,
  data2: state.reducer2,
  data3: state.reducer3
}));

性能优化版（可选） #

如果担心每次组件渲染时返回新对象触发不必要的重渲染，可以用Redux Toolkit提供的createSelector创建记忆化选择器——只有当依赖的任意一个Reducer数据发生变化时，才会重新生成结果对象：

import { createSelector } from '@reduxjs/toolkit';

// 先定义单个Reducer的选择器
const selectReducer1 = (state: RootState) => state.reducer1;
const selectReducer2 = (state: RootState) => state.reducer2;
const selectReducer3 = (state: RootState) => state.reducer3;

// 创建组合选择器
const selectCombinedData = createSelector(
  [selectReducer1, selectReducer2, selectReducer3],
  (data1, data2, data3) => ({ data1, data2, data3 })
);

// 组件中调用
const { data1, data2, data3 } = useSelector(selectCombinedData);

这样既满足了单个useSelector获取多份数据的需求，还能根据项目场景选择是否做性能优化。

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