Reducer Section - Bugs with cart and checkout [branch lesson 28 & 29] (with solution)

[DevonGifford]

Reducer section (lesson 28 to 29)

Hello everyone 👋

I thought I might save someone some time with problem solving the issue with the source code here. If you are following and coding along with this repo and the videos and you get to the end of the section you will be left with a couple bugs.

You will find a bug that will affect the cart, as a quick QA example

If you add an item to the cart ;

• the cart icon will remain at 0
• proceed to checkout and you will see the item there however the cart total will be 0

If you add a second item to the cart ;

• the cart icon will update to 1
• proceed to checkout and you will see the two items in your cart

Further there will be issues with calculating the total amount, increasing/decreasing on checkout page etc.

Source Code (according to the video and GitHub repo)

---

Click to expand

export const CartProvider = ({ children }) => { const [isCartOpen, setIsCartOpen] = useState(false); const [{ cartCount, cartTotal, cartItems }, dispatch] = useReducer( cartReducer, INITIAL_STATE ); const updateCartItemsReducer = (cartItems) => { const newCartCount = cartItems.reduce( (total, cartItem) => total + cartItem.quantity, 0 ); const newCartTotal = cartItems.reduce( (total, cartItem) => total + cartItem.quantity * cartItem.price, 0 ); const payload = { cartItems, cartCount: newCartCount, cartTotal: newCartTotal, }; dispatch(createAction(CART_ACTION_TYPES.SET_CART_ITEMS, payload)); };

Solution Bug Fix

---

Click to expand

export const CartProvider = ({ children }) => { const [ { cartItems, isCartOpen, cartCount, cartTotal }, dispatch] = useReducer( cartReducer, INITIAL_STATE ); const updateCartItemsReducer = (newCartItems) => { const newCartCount = newCartItems.reduce( (total, cartItem) => total + cartItem.quantity, 0 ); const newCartTotal = newCartItems.reduce((total, cartItem) => total + cartItem.quantity * cartItem.price, 0); const payload = { cartItems: newCartItems, cartTotal: newCartTotal, cartCount: newCartCount, }; //importing from createAction from utils -> reducer dispatch( createAction(CART_ACTION_TYPES.SET_CART_ITEMS, payload)); };

FInal Note

The issue is the wrong object is passed in as props and then reduce is run on the wrong props. Further a mistake in the payload causing issues.

I leave this here as an issue as I see that Pull Requests are rarely merged.
I hope this helps anyone who is getting stuck here

✌️