React-redux dispatch is undefined when rendered inside specific component - reactjs

Question

For some reason, when i render InventoryItem component inside InventoryPage component, dispatch is returned as undefined, but when i render it inside any other component it works perfectly.
Here's InventoryItem:
// REDUX
import { connect } from 'react-redux';
import { addItem } from '../../../Redux/reducers/cart/actions/cartActions.js';
// REUSABLE COMPONENTS
import { Button } from '../button/button.jsx';
export const InventoryItem = ({ drilledProps, dispatch }) => {
const { name, price, imageUrl } = drilledProps;
return (
<div className="collection-item">
<div
className="image"
style={{
background: `url(${imageUrl})`
}}
/>
<div className="collection-footer">
<span className="name">{name}</span>
<span className="price">${price}</span>
</div>
<Button
handler={() => dispatch(addItem(drilledProps))}
modifier="_inverted"
type="button"
text="ADD TO CART"
/>
</div>
);
};
export default connect(null)(InventoryItem);
When i render it here, dispatch returns undefined:
// REDUX
import { connect } from 'react-redux';
import { categorySelector } from '../../../../Redux/reducers/inventory/selectors/inventorySelectors.js';
// COMPONENTS
import { InventoryItem } from '../../../reusable-components/inventory-item/inventory-item.jsx';
const InventoryPage = ({ reduxProps: { categoryProps } }) => {
const { title: category, items } = categoryProps;
return (
<div className="collection-page">
<h2 className="title">{category}</h2>
<div className="items">
{
items.map((item) => (
<InventoryItem key={item.id} drilledProps={item}/>
))
}
</div>
</div>
);
};
const mapStoreToProps = (currentStore, ownProps) => ({
reduxProps: {
categoryProps: categorySelector(ownProps.match.params.categoryId)(currentStore)
}
});
export default connect(mapStoreToProps)(InventoryPage);
When i render it here it works perfectly:
// COMPONENTS
import InventoryItem from '../../../../reusable-components/inventory-item/inventory-item.jsx';
export const InventoryPreview = ({ title, items }) => {
return (
<div className="collection-preview">
<h1 className="title">{title}</h1>
<div className="preview">
{items
.filter((item, index) => index < 4)
.map((item) => (
<InventoryItem key={item.id} drilledProps={item} />
))}
</div>
</div>
);
};
Thanks for the help in advance!

Answer 1

You are importing the unconnected component, the connected component exports as default so you should do:
//not import { InventoryItem }
import InventoryItem from '../../../../reusable-components/inventory-item/inventory-item.jsx';
when you do export const InventoryItem = then you import it as import {InventoryItem} from ... but when you import the default export: export default connect(... then you import it as import AnyNameYouWant from ...