Redux extraReducers失效，无法通过useSelector获取商品数据求助

你的代码存在三个关键问题，导致无法通过useSelector获取数据：

1. useSelector未传入状态选择器函数 #

在home.jsx中，useSelector()没有传入任何函数来指定要从Redux store中获取的状态片段，自然无法拿到数据。

修复代码：

// home.jsx
const data = useSelector(state => state.products.products);
console.log(data);

2. Products切片名称错误 #

在products.jsx中，你创建的切片名称是"counter"，这会导致store中该切片的键名是counter，与预期的商品状态路径不匹配，进而让useSelector找不到正确数据。

修复代码：

// products.jsx
export const productsSlice = createSlice({
  name: "products", // 把counter改为products
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(getProducts.fulfilled, (state, action) => {
      state.products = action.payload.data; // 同时修正这里，取响应的data字段
    });
  },
});

3. ExtraReducers错误存储了整个Axios响应 #

你的getProducts返回的是整个Axios响应对象（包含status、headers等冗余信息），但实际商品数据在response.data中，直接存储整个响应会导致数据结构不符合预期。

上面的修复代码已经同时处理了这个问题，将state.products = action.payload改为state.products = action.payload.data。

额外确认：Store配置 #

确保你的Redux store配置中正确注册了products reducer：

// store.js（示例）
import { configureStore } from '@reduxjs/toolkit';
import productsReducer from './products';

export const store = configureStore({
  reducer: {
    products: productsReducer, // 这里的键名要和切片name一致
  },
});

完成以上修复后，useSelector就能正确获取到商品数据，你可以恢复原本的渲染逻辑：

// home.jsx返回部分
return (
  <div className="home">
    {data.map((item) => (
      <Card
        key={item.id} // 不要忘记添加唯一key
        title={item.title}
        price={item.price}
        img={item.images[0]}
      />
    ))}
  </div>
);

内容的提问来源于stack exchange，提问作者Berk Bıçakcı