import React from 'react' ; import { useSelector } from 'react-redux' ; import { createSelector } from 'reselect' ; import { AppStore , CartItem } from '../types' ; type cartSelectorData = { shoppingCart : CartItem [ ] ; shoppingCartTotal : number ; } ; const getShoppingCart = ( state ) : CartItem [ ] => { return state . cartsModule . cart ; } ; const makeShoppingCartSelector = createSelector ( [ getShoppingCart ] , ( shoppingCart ) : cartSelectorData => { const shoppingCartTotal = shoppingCart . reduce ( ( accum , current ) => { return accum + ( current . value * current . quantityBought ) ; } , 0 ) ; return { shoppingCart , shoppingCartTotal } ; } ) ; const CartContainerHooks = ( ) => { const cartsModule = useSelector ( ( state ) => makeShoppingCartSelector ( state ) ) ; return ( < > < h1 > Cart Container with useSelector Hooks and Reselect < /h1> < div > { cartsModule . shoppingCart . map ( ( item ) => { return ( < div key = { item . id } > { item . id } { item . quantityBought } < /div>); } ) } Total Price : $ { cartsModule . shoppingCartTotal } < /div> < hr > < /hr> < />); } ; export default CartContainerHooks ;