updating our application with reselect and replacing cart selectors with memoized selectors

Author: AdityaKumawat97

package-lock.json

@@ -11,7 +11,8 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "2.1.8",
     "redux": "^4.0.5",
-    "redux-logger": "^3.0.6"
+    "redux-logger": "^3.0.6",
+    "reselect": "^4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -3,6 +3,11 @@ import CartItem from '../cart-item/cart-item.component'
 import { connect } from 'react-redux'
 import CustomButton from '../custom-button/custom-button.component'
 import './cart-dropdown.styles.scss'
+import { selectCartItems } from '../../redux/cart/cart.selectors'
+
+
+
+
 const CartDropdown = ({ cartItems }) => (
     <div className="cart-dropdown">
         <div className="cart-items">
@@ -15,8 +20,8 @@ const CartDropdown = ({ cartItems }) => (
 
 
 
-const mapStateToProps = ({ cart: { cartItems } }) => ({
-    cartItems
+const mapStateToProps = (state) => ({
+    cartItems: selectCartItems(state)
 })
 
 export default connect(mapStateToProps)(CartDropdown)

src/components/cart-dropdown/cart-dropdown.component.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-
+import { selectCartItemsCount } from '../../redux/cart/cart.selectors'
 import { toggleCartHidden } from '../../redux/cart/cart.actions'
 
 import './cart-icon.styles.scss'
@@ -20,8 +20,8 @@ const mapDispatchToProps = dispatch => ({
 })
 
 
-const mapStateToProps = ({ cart: { cartItems } }) => ({
-    itemCount: cartItems.reduce((accumulatedQuantity, cartItem) => accumulatedQuantity + cartItem.quantity, 0)
+const mapStateToProps = (state) => ({
+    itemCount: selectCartItemsCount(state)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(CartIcon)

src/components/cart-icon/Cart-icon.jsx

@@ -0,0 +1,21 @@
+import { createSelector } from 'reselect'
+
+const selectCart = state => state.cart
+
+
+export const selectCartItems = createSelector(
+    [selectCart],
+    cart => cart.cartItems
+)
+
+
+export const selectCartItemsCount = createSelector(
+    [selectCartItems],
+    cartItems =>
+        (cartItems.reduce(
+            (accumulatedQuantity, cartItem) =>
+                accumulatedQuantity + cartItem.quantity,
+            0
+        )
+        )
+)