Redux初始状态缺失键值对：React TS项目中products字段无法获取

你遇到的核心问题是Redux store中state.cart的结构和预期不符，导致找不到products属性。以下是排查和解决步骤：

1. 检查RootState类型定义是否正确 #

手动定义IRootState容易出现结构不匹配的问题，推荐直接从store自动推导类型，避免手动错误：

正确的store配置（store.ts）： #

import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './path-to-your-cart-slice';

export const store = configureStore({
  reducer: {
    cart: cartReducer,
  },
});

// 自动推导RootState类型，完全匹配store结构
export type RootState = ReturnType<typeof store.getState>;

然后在App组件中导入这个自动推导的RootState：

import { RootState } from './path-to-store';

// ...
const products = useSelector((state: RootState) => state.cart.products);

如果坚持手动定义IRootState，必须和cart slice的InitialState结构完全一致：

import { InitialState } from './path-to-cart-slice';

export interface IRootState {
  cart: InitialState;
}

2. 确认store的reducer合并配置 #

检查创建store时的reducer配置，确保你是把整个cart slice的reducer赋值给cart键，而不是错误地只取了slice内部的cart字段：

❌ 错误示例：

// 这样会导致state.cart变成CartItem[]，直接丢失products属性
reducer: {
  cart: cartReducer.cart,
}

✅ 正确示例：

reducer: {
  cart: cartReducer, // 整个slice的reducer，管理包含cart和products的完整状态
}

3. 验证state结构 #

可以在App组件中打印整个state.cart来确认实际结构：

const cartState = useSelector((state: RootState) => state.cart);
console.log('cartState:', cartState);

正常输出应该是包含cart: []和products: [...]的完整对象。

另外，你的App组件中addToCart函数未定义，后续需要在cart slice中添加对应的reducer逻辑：

// 在cart slice中添加reducer
import { PayloadAction } from "@reduxjs/toolkit";

export const cart = createSlice({
  name: "cart",
  initialState,
  reducers: {
    addToCart: (state, action: PayloadAction<Product>) => {
      const existingItem = state.cart.find(item => item._uuid === action.payload._uuid);
      if (existingItem) {
        existingItem.quantity += 1;
      } else {
        state.cart.push({...action.payload, quantity: 1});
      }
    }
  }
});

// 导出action供组件调用
export const { addToCart } = cart.actions;

然后在App组件中导入并通过dispatch触发：

import { addToCart } from './path-to-cart-slice';

// ...
<button onClick={() => dispatch(addToCart(product))}>addToCart</button>

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