import React from "react";
import "./cart-dropdown.style.scss";
import { CustomButton } from "../cutom-button/custom-button.component";
import { connect } from "react-redux";
import { StoreState } from "../../redux/root-reducer";
import { ItemModel } from "../../models/ShopPage";
import { CartItem } from "../cart-item/cart-item.component";
import { selectCartItems } from "../../redux/cart/cart.selector";
import { createStructuredSelector } from "reselect";
import { withRouter, RouteComponentProps } from "react-router-dom";
interface CartDropdownStoreProps {
cartItems: ItemModel[];
}
interface CartDropdownProps extends CartDropdownStoreProps {}
const _CartDropdown: React.FC<CartDropdownProps & RouteComponentProps<{}>> = (
props: CartDropdownProps & RouteComponentProps<{}>
) => {
const { cartItems, history } = props;
return (
<div className="cart-dropdown">
<div className="cart-items">
{cartItems.length ? (
cartItems.map(cartItem => (
<CartItem key={cartItem.id} item={cartItem} />
))
) : (
<span className="empty-message">Your cart is empty</span>
)}
</div>
<CustomButton onClick={() => history.push("./checkout")}>
GO TO CHECKOUT
</CustomButton>
</div>
);
};
const mapStateToProps = createStructuredSelector<StoreState, CartDropdownProps>(
{
cartItems: selectCartItems
}
);
export const CartDropdown = withRouter(connect(mapStateToProps)(_CartDropdown));
When we are not passing the 2nd argument to the connect function we can access dispatch function as a prop inside the component right? Already did with javascript and no complaints but when I'm trying this with typescript dispatch function is not existing in the props.
I console log all the props which this component get and dispatch f exists there.
I don't know why I can't access that! Can someone help me with this..?
You've provided type of props for _CartDropdown
as CartDropdownProps & RouteComponentProps<{}>
. This type does not contain dispatch
. So from TS point of view dispatch
is not present.
console.log
logs object as it represented by JS and sees dispatch
.
To solve, add type of dispatch
to props type like below
import { Dispatch } from 'redux'
const _CartDropdown: React.FC<CartDropdownProps & RouteComponentProps<{}> & {dispatch: Dispatch}> = /* ... */
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.