Redux RTK调用getSelectors触发状态重载与无限循环问题

你遇到的重渲染、无限循环、数据重载问题和getSelectors本身没有直接关系，核心是三个写法错误：

• 直接在组件渲染阶段执行dispatch：React组件函数体每次渲染都会同步执行，你在if (!isFetching)分支里直接调用dispatch(setSetup(defaultSetup))，dispatch触发状态更新→组件重渲染→再次进入分支dispatch，直接形成无限渲染循环，状态被反复更新，看起来就像全量数据被重载。
• 选择器引用完全不稳定：你每次组件渲染时都执行getSelectors({documentId})，传入的{documentId}是全新对象字面量，函数内部每次都会生成全新的selectAllSetups选择器实例，createSelector的缓存完全失效。useSelector对比时发现选择器是新引用，每次都会判定状态变化触发重渲染，进一步放大循环问题。
• 单条Setup数据拉取逻辑和RTK Query脱节：选中下拉项时你手动构造假数据写入slice，没有走RTK Query的缓存逻辑，状态和接口数据不一致，也无法自动触发完整数据拉取。

1. 修复选择器稳定性问题 #

首先调整getSelectors的实现，增加相同参数的选择器缓存，避免重复生成选择器实例；组件内使用时缓存查询参数，保证引用稳定。
修改后的setupApiSlice中选择器部分代码：

// 增加选择器缓存，相同query参数返回同一个选择器实例
const selectorCache = new Map()
export const getSelectors = (query) => {
  const cacheKey = JSON.stringify(query)
  if (selectorCache.has(cacheKey)) {
    return selectorCache.get(cacheKey)
  }

  const selectSetupsResult = setupsApiSlice.endpoints.getSetups.select(query)
  const adapterSelectors = createSelector(
    selectSetupsResult,
    (result) => setupsAdapter.getSelectors(() => result?.data ?? initialState)
  )

  const selectors = {
    selectAll: createSelector(adapterSelectors, (s) => s.selectAll()),
    selectEntities: createSelector(adapterSelectors, (s) => s.selectEntities()),
    selectIds: createSelector(adapterSelectors, (s) => s.selectIds()),
    selectTotal: createSelector(adapterSelectors, (s) => s.selectTotal()),
    selectById: (id) => createSelector(adapterSelectors, (s) => s.selectById(id)),
  }

  selectorCache.set(cacheKey, selectors)
  return selectors
}

组件内使用时，用useMemo缓存查询参数和选择器，避免每次渲染生成新引用：

// 组件内
const { documentId } = useParams()
// 缓存query参数，documentId不变时引用不变
const setupQuery = useMemo(() => ({ documentId }), [documentId])
const { data, isFetching } = useGetSetupsQuery(setupQuery)
// 缓存选择器实例
const { selectAll: selectAllSetups } = useMemo(() => getSelectors(setupQuery), [setupQuery])
const allSetups = useSelector(selectAllSetups)

2. 把渲染阶段的dispatch挪到副作用中，解决无限循环 #

永远不要在组件函数的同步执行逻辑里直接dispatch，把默认Setup的赋值逻辑放到useEffect里，加好依赖项，只有满足条件时才执行：

const setupId = useSelector(selectSetupId)
const dispatch = useDispatch()

useEffect(() => {
  // 只有加载完成、存在setup列表、当前没有选中的setup时，才设置默认值
  if (!isFetching && allSetups?.length && !setupId) {
    const defaultSetup = allSetups.find((setup) => setup.default)
    if (defaultSetup) {
      dispatch(setSetup(defaultSetup))
    }
  }
}, [isFetching, allSetups, setupId, dispatch])

// 提前生成菜单，不用写在判断里
const setupsMenu = useMemo(() => {
  if (!allSetups) return []
  return allSetups.map(setup => <MenuItem key={setup.id} value={setup.id}>{setup.name}</MenuItem>)
}, [allSetups])

3. 对接RTK Query拉取单条完整Setup数据 #

选中下拉项时，不要手动构造假数据，用RTK Query的懒加载钩子拉取完整数据，拿到结果后再写入slice：

// 拿取单条setup的懒加载钩子
const [fetchFullSetup] = useLazyGetSetupQuery()

const handleChange = async (event) => {
  const selectedId = event.target.value
  try {
    // 拉取对应id的完整setup数据
    const fullSetup = await fetchFullSetup({ documentId, setupId: selectedId }).unwrap()
    // 拿到完整数据后再存入slice
    dispatch(setSetup(fullSetup))
  } catch (err) {
    // 这里可以加错误处理
    console.error('拉取Setup详情失败', err)
  }
};

如果需要选中后自动拉取，也可以用条件查询的写法：

// setupId有值时自动触发查询
const { data: fullSetupData, isLoading: isSetupLoading } = useGetSetupQuery(
  { documentId, setupId },
  { skip: !setupId }
)
// 监听fullSetupData变化，拿到数据后同步到slice
useEffect(() => {
  if (fullSetupData) {
    dispatch(setSetup(fullSetupData))
  }
}, [fullSetupData, dispatch])

额外优化建议 #

你可以给getSetup端点增加缓存更新逻辑，把拉取到的完整Setup数据自动同步到getSetups的实体缓存里，这样列表里的对应项也会自动更新为完整数据，不用手动维护两份状态：

getSetup: builder.query({
  query: ({ documentId, setupId }) => ({
    url: `/documents/${documentId}/setups/${setupId}`,
    method: 'GET'
  }),
  // 拉取到单条数据后，更新到列表的实体缓存中
  async onQueryStarted(arg, { dispatch, queryFulfilled }) {
    try {
      const { data: fullSetup } = await queryFulfilled
      dispatch(
        setupsApiSlice.util.updateQueryData('getSetups', { documentId: arg.documentId }, (draft) => {
          setupsAdapter.upsertOne(draft, fullSetup)
        })
      )
    } catch {}
  }
})

改完之后就不会出现无限循环、全量状态重载的问题，选中项时也会正常拉取完整数据存入slice。

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