使用Redux useSelector钩子获取数据时出现Undefined问题

1. Redux State键名不匹配 #

在Store.js中，你通过combineReducers将productReducer挂载到了product键下：

const reducers = combineReducers({
  product: productReducer, // 键名是product
});

但在Home.js的useSelector中，你尝试获取的是state.products：

const data = useSelector((state) => state.products); // 错误：应该是state.product

修正：将Home组件中的选择器改为state.product：

const data = useSelector((state) => state.product);
// 或者直接解构所需字段
const { loading, error, products } = useSelector((state) => state.product);

2. Reducer中字段拼写不一致 #

在ProductReducer.js的ALL_PRODUCT_REQUEST分支里，你返回的是product: []，而初始state定义的是products: []：

case ALL_PRODUCT_REQUEST:
  return {
    loading: true,
    product: [], // 错误：应该是products
  };

这会导致请求过程中state的字段名从products变成product，后续成功后又变回products，造成数据结构混乱，进而导致取值异常。
修正：统一字段名为products：

case ALL_PRODUCT_REQUEST:
  return {
    loading: true,
    products: [], // 修正为products
  };

3. Store配置中初始状态拼写错误 #

在Store.js中，你把initialState拼写成了initalState：

const store = configureStore({
  reducer: reducers,
  initalState // 错误：拼写应为initialState
});

虽然这个错误不会直接导致undefined，但会导致你设置的初始状态不生效，建议修正：

const store = configureStore({
  reducer: reducers,
  initialState // 修正拼写
});

修正后的关键代码片段 #

Home.js（修正选择器）

const Home = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getProduct())
  }, [dispatch]);
 
  // 修正为state.product
  const { loading, error, products } = useSelector((state) => state.product);
  console.log(products);

  return (
    <Fragment>
      {loading ? (
        <Loader />
      ) : (
        <Fragment>
          <MetaData title="ECOMMERCE" />
          <div className="banner">
            <p>WELCOME TO ECOMMERCE</p>
            <h1>FIND AMAZING PRODUCTS BELOW</h1>
            <a href="#container">
              <button>
                Scroll<CgMouse />
              </button>
            </a>
          </div>
          <h2 className="homeHeading">Featured Products</h2>
          <div className="container" id="container">
            {products && products.map((product)=>(
              <ProductCard key={product._id} product={product}/>
            ))}
          </div>
        </Fragment>
      )}
    </Fragment>
  )
}

ProductReducer.js（修正字段拼写）

export const productReducer = (state = { products: [] }, action ) => {
  switch(action.type){
    case ALL_PRODUCT_REQUEST:
      return {
        loading: true,
        products: [], // 修正为products
      };

    // 其他分支保持不变
    default:
      return state;
  }
};

Store.js（修正初始状态拼写）

import { configureStore } from '@reduxjs/toolkit';
import { combineReducers } from "redux";
import { productReducer } from './reducers/productReducer';

const reducers = combineReducers({
  product: productReducer,
});

let initialState = {};

const store = configureStore({
  reducer: reducers,
  initialState // 修正拼写
});

export default store;

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