React中多个useSelector出现状态覆盖异常问题求助

问题分析 #

从描述来看，product 状态被 productCategory 数据覆盖，核心原因大概率是 Redux Store 的 reducer 配置冲突、slice 错误监听其他异步 action，或是状态节点的取值路径出错，导致两个状态节点的更新逻辑发生了交叉污染。

排查与解决步骤 #

1. 检查 Store 配置是否正确 #

首先确认 configureStore 中两个 reducer 是独立注册的，避免重复引用或节点命名错误：

import { configureStore } from '@reduxjs/toolkit';
import productReducer from './slices/ProductSlice';
import productCategoryReducer from './slices/ProductCategorySlice';

export const store = configureStore({
  reducer: {
    product: productReducer, // 确保此处是产品专属reducer
    productCategory: productCategoryReducer // 确保此处是分类专属reducer
  }
});

如果误将同一个 reducer 同时赋值给 product 和 productCategory 节点，就会导致两个状态共享同一更新逻辑，分类数据返回时会直接覆盖产品状态。

2. 检查 Slice 的 Action 监听逻辑 #

确认两个 slice 的 extraReducers 只监听自身的异步 action，避免跨 slice 监听：

• ProductSlice 仅监听 fetchProducts 的完成事件
• ProductCategorySlice 仅监听 fetchCategories 的完成事件

比如如果在 ProductSlice 中错误添加了如下代码，就会导致分类数据更新产品状态：

// 错误示例：不要在ProductSlice中监听分类的action
builder.addCase(fetchCategories.fulfilled, (state, action) => {
  return action.payload;
});

3. 验证 useSelector 的取值路径 #

确认组件中 useSelector 的取值路径没有写错：

// 正确写法
const products = useSelector(state => state.product);
const categories = useSelector(state => state.productCategory);

// 错误示例：若误写为state.productCategory，会导致products取到分类数据
// const products = useSelector(state => state.productCategory);

4. 检查 Slice 的 Initial State 与更新逻辑 #

确保两个 slice 的 initial state 类型统一（均为数组），且更新逻辑仅修改自身状态节点。Redux Toolkit 允许直接修改 state，但逻辑错误仍可能导致意外覆盖，比如在 reducer 中错误返回了其他 slice 的数据。

总结 #

最常见的触发原因是 Store 配置时 reducer 重复注册，或是 slice 跨域监听了其他异步 action。按照上述步骤逐一排查，即可定位并解决状态被意外覆盖的问题。

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