# Shopping cart with Redux

> 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.

- Difficulty: advanced
- Tags: Redux
- Estimated time: 45 minutes
- Tests: 8
- Requires subscription: yes

## 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

01. renders the app title
02. renders all products
03. adds product to cart
04. increments and decrements product quantity
05. clears cart
06. does not duplicate product when added twice
07. toggles cart visibility
08. updates cart badge when items are added and removed