Javascript 使用redux useSelector挂钩时未定义的数据

我创建了一个产品减速器、产品动作和主文件以及常量文件(主要用于命名和存储动作的类型).在Home中，我试图从已经正常工作的后端获得products.

我使用了dispatch和useSelector挂钩来实现该功能.

当我在Home中使用useSelector钩子时，我得到的数据是未定义的.但是，当我通过控制台登录操作和那里的产品文件进行判断时，数据已经存在.

我不知道为什么会发生这个错误.

家，JS，家.

import React, { Fragment, useEffect } from 'react'
import Loader from "../layout/Loader/Loader";
import MetaData from "../layout/MetaData.js";
import ProductCard from './ProductCard.js';
import { CgMouse } from "react-icons/cg";
import "./Home.css";
import { clearErrors, getProduct } from "../../actions/productAction";
import { useSelector, useDispatch } from "react-redux";

const product = {
  name: "Blue Tshirt",
  images: [{ url: "https://i.ibb.co/DRST11n/1.webp" }],
  price: "$3000",
  _id: "aditya",
};

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

  useEffect(() => {
    dispatch(getProduct())
  }, [dispatch]);
 
  const data = useSelector((state) => state.products);
  console.log(data);

  // const { loading, error, products } = useSelector((state) => state.products);

  return (
    <div>
      {/* <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> */}
    </div>
  )
}

export default Home

ProductReducer.js

import {
  ALL_PRODUCT_FAIL,
  ALL_PRODUCT_REQUEST,
  ALL_PRODUCT_SUCCESS,
  CLEAR_ERRORS,
} from "../constants/productContants";

export const productReducer = (state = { products: [] }, action ) => {
  // console.log(action.payload);
  switch(action.type){
    case ALL_PRODUCT_REQUEST:
      return {
        loading: true,
        product: [],
      };

    case ALL_PRODUCT_SUCCESS:
      let obj = {
        loading: false,
        products: action.payload.products,
        productsCount: action.payload.productsCount,
        resultPerPage: action.payload.resultPerPage,
        filteredProductsCount: action.payload.filteredProductsCount,
      };
      // console.log(obj);
      return obj;

    case ALL_PRODUCT_FAIL:
      return {
        loading: false,
        error: action.payload,
      };

    case CLEAR_ERRORS:
      return {
        ...state,
        error: null,
      };

    default:
      return state;
  }
};

ProductActions.js

import axios from "axios";

import {
  ALL_PRODUCT_FAIL,
  ALL_PRODUCT_REQUEST,
  ALL_PRODUCT_SUCCESS,
  CLEAR_ERRORS,
} from "../constants/productContants";

// get all the products 

export const getProduct = () => async (dispatch) => {
  try {
    dispatch({type:ALL_PRODUCT_REQUEST});
        
    const {data} = await axios.get("/api/v1/products");

    dispatch({
      type: ALL_PRODUCT_SUCCESS,
      payload: data,
    });
  } catch(error) {
    dispatch({
      type: ALL_PRODUCT_FAIL,
      payload: error.response.data.message,
    });
  };
}

Store.js

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

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

let initalState = {};

const store = configureStore({
  reducer: reducers,
  initalState
});

export default store;

我试图从后端获取数据，并使用了useSelector()和useDispatch()挂钩.数据是从后端获取的，然而，当使用useSelector()时，我发现数据是未定义的，我不明白为什么会发生这种情况.