如何在单个产品页面中获取Redux存储的产品数据？

直接复用Redux里已加载的全量产品数据是最优方案，完全符合Redux的设计初衷，不用重复调用API。具体实现步骤如下：

1. 获取当前页面的产品ID #

从路由参数里拿到要展示的产品ID，用react-router的useParams()钩子：

import { useParams } from 'react-router-dom';

const SingleProduct = () => {
  const { productId } = useParams();
  // 后续逻辑...
}

2. 从Redux Store筛选对应ID的产品 #

用Redux的useSelector钩子，从store的产品列表里找到匹配ID的项：

import { useSelector } from 'react-redux';

const SingleProduct = () => {
  const { productId } = useParams();
  // 注意：如果ID是数字类型，记得把路由参数转成Number，避免类型不匹配
  const product = useSelector(state => 
    state.products.items.find(item => item.id === Number(productId))
  );
  // 后续逻辑...
}

3. 处理边界情况 #

要考虑两种场景：数据还在加载中，或者找不到对应ID的产品：

const SingleProduct = () => {
  const { productId } = useParams();
  const product = useSelector(state => 
    state.products.items.find(item => item.id === Number(productId))
  );
  const isLoading = useSelector(state => state.products.isLoading);

  if (isLoading) {
    return <div>加载中...</div>;
  }

  if (!product) {
    return <div>该产品不存在</div>;
  }

  // 渲染产品详情
  return (
    <div className="product-detail">
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* 其他产品信息 */}
    </div>
  );
}

4. 优化：封装Selector函数（可选） #

如果多个组件都需要根据ID找产品，可以在productSlice里封装一个复用的selector函数，避免重复写find逻辑：

// productSlice.js
import { createSlice } from '@reduxjs/toolkit';

const productSlice = createSlice({
  name: 'products',
  initialState: {
    items: [],
    isLoading: false,
    error: null
  },
  reducers: {
    // 你的reducers逻辑...
  }
});

// 封装根据ID获取产品的selector
export const selectProductById = (state, productId) => 
  state.products.items.find(item => item.id === Number(productId));

export default productSlice.reducer;

然后在组件里直接用：

import { useSelector } from 'react-redux';
import { selectProductById } from './productSlice';

const SingleProduct = () => {
  const { productId } = useParams();
  const product = useSelector(state => selectProductById(state, productId));
  const isLoading = useSelector(state => state.products.isLoading);

  // 后续逻辑同上...
}

这个方案全程复用Redux中已有的产品数据，没有额外的API请求，既提升了性能，也符合Redux集中管理状态的设计目标。

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