Может кто-нибудь помочь мне с этим вопросом. Я использую Redux и Typescript для небольшого проекта. Я передаю избыточное глобальное состояние как реквизит, используя mapStatetoProps в моем компоненте контейнера CartContainer.tsx
import { connect } from "react-redux";
import { fetchOffers } from "../../../api/fetchOffers";
import Cart from "../presentation/Cart";
const mapStateToProps = (state: any) => ({
items: state.shoppingCartReducer.items,
discountedOffer: state.shoppingCartReducer.discountedOffer,
total_cart: state.shoppingCartReducer.total_cart
});
const mapDispatchToProps = (dispatch: any) => ({
getOffers: (items: any[]) => fetchOffers(items),
});
export default connect(mapStateToProps, mapDispatchToProps)(Cart);
Это мой презентационный компонент Cart.tsx , в котором я console.log реквизиты для распечатки значений нужных мне свойств, я импортирую реквизиты так:
import React, { useEffect, useLayoutEffect, Fragment, useCallback } from "react";
import { ShoppingCart } from '../../organismes/ShoppingCart'
import { CommercialOffer } from "../../../models/Offer";
export interface ICartProps {
items: any[];
total_cart: number,
discountedOffer: CommercialOffer,
getOffers: (items: any[]) => void;
}
const Cart = (props: ICartProps) => {
const { items, total_cart, getOffers } = props;
const loadOffers = useCallback(() => getOffers(items), [items, getOffers]);
useLayoutEffect(() => {
console.log(props)
loadOffers()
}, [loadOffers, items, total_cart]);
return (
<Fragment>
<ShoppingCart {...props}/>
</Fragment>
);
};
export default Cart;
Я использую инструменты реагирования, чтобы проверить, какие реквизиты доступны. 2 реквизита, которые мне нужны, discountsOffer и total_cart находятся здесь со значением:
Однако, значения никогда не доступны, как показано на скриншоте ниже. То же самое для фронта, я никогда не могу ссылаться на реквизит.