Overview

In this challenge, you'll create a simple shopping cart. The goal is to manage the cart's state globally using Redux Toolkit — allowing users to add, remove, and update products, as well as toggle the cart's visibility.

Requirements

• Implement a Redux store with a cart slice that provides global state for the shopping cart.
• The slice should expose:
  • productsInCart: an array containing the products and their quantities.
  • addProductToCart(product): adds a product or increases its quantity if it already exists.
  • removeFromCart(product): removes a product completely from the cart.
  • addQuantity(product): increases the quantity of a product in the cart.
  • removeQuantity(product): decreases the quantity of a product, and removes it if the quantity reaches zero.
  • clearCart(): removes all products from the cart.
  • toggleShowCart(): toggles cart visibility.

Notes

• Use createSlice from @reduxjs/toolkit and TypeScript types to ensure the cart logic is fully typed.
• Redux Toolkit uses Immer internally, so you can write "mutating" logic in reducers — no need to spread arrays manually.
• The store.ts is already wired up: imports the reducer from cartSlice.ts and creates the store with configureStore. You don't need to edit it.
• In App.tsx, wrap the cart area with <Provider store={store}> from react-redux so components can access the store.
• In Components.tsx, replace the hardcoded cart with real state:
  • Use useSelector to read productsInCart and showCart from the store.
  • Use useDispatch to dispatch actions (addProductToCart, removeFromCart, addQuantity, removeQuantity, clearCart, toggleShowCart).
  • The badge count is the sum of all quantities, and the total is each item's price multiplied by its quantity.
• Export the generated action creators from the slice so Components.tsx can import them.
• Start by implementing the reducers in cartSlice.ts, then connect the components.

Tests

1. renders the app title
2. renders all products
3. adds product to cart
4. increments and decrements product quantity
5. clears cart
6. does not duplicate product when added twice
7. toggles cart visibility
8. updates cart badge when items are added and removed