使用 redux 时取消定义数据

Question

我创建了一个产品减速器、产品操作和主文件以及常量文件（主要用于命名和存储操作的类型） 在家里，我试图从已经运行的后端获取产品。

我为该功能使用了dispatch和useSelector钩子

当我在家中使用 useSelector 挂钩时，我获取的数据未定义，但是当我通过控制台登录操作和产品文件进行检查时，它们的数据已存在。

我不知道为什么会出现这个错误。

Home.js

import React,{Fragment,useEff`your text`ect} 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() hook 。数据是从后端获取的，但是在使用 useselector() 时，我发现数据未定义，我不知道为什么会发生这种情况。

Answer 1

state.product

是

productReducer

提供的状态，因此如果您尝试访问

products

的

productReducer

数组，那么它应该是

state.product.products

。

const products = useSelector((state) => state.product.products);

或者如果你使用对象解构赋值

const { products } = useSelector((state) => state.product);