How abhimanyugit447/shopping-cart-app-ngrx works
This is an Angular/NgRx shopping-cart application. A shopper opens the product list, which dispatches a product-load action; an effect fetches products, and the UI can then add products to the cart. The cart supports quantity changes, removal, clearing, and calculated totals. Product loading and cart contents are distinct state domains. The sampled source supports the product-fetch and cart-state flows; storage persistence is configured in the app setup, but its runtime details are not sampled.
Main entry points: product-list.component.ts Product List · app.config.ts App Configuration · product.actions.ts Product Actions · product.effects.ts Product Effects
Components 16
Shopping UI
- App Shell
src/app/app.component.ts - Product List
src/app/product-list/product-list.component.ts - Shopping Cart
src/app/shopping-cart/shopping-cart.component.ts
Product Catalog
- Product Actions
src/app/products/product.actions.ts - Product Effects
src/app/products/product.effects.ts - Product Service
src/app/products/product.service.ts - Product Reducer
src/app/products/product.reducer.ts - Product Selectors
src/app/products/product.selectors.ts
Cart State
- Cart Actions
src/app/cart/cart.actions.ts - Cart Reducer
src/app/cart/cart.reducer.ts - Cart Selectors
src/app/cart/cart.selectors.ts
App State Setup
- App Bootstrap
src/main.ts - App Configuration
src/app/app.config.ts
Other components
- Shopper
- Products API
- Browser Storage
Connections 22
- App Bootstrap → App Shell: bootstraps
- App Shell → Product List: renders
- App Shell → Shopping Cart: renders
- Shopper → Product List: browses
- Product List → Product Actions: dispatches load
- Product List → Cart Actions: dispatches add
- Product List → Product Selectors: selects
- Product Actions → Product Effects: triggers
- Product Effects → Product Service: calls
- Product Service → Products API: GET products
- Product Effects → Product Actions: dispatches result
- Product Actions → Product Reducer: updates state
- Product Reducer → Product Selectors: provides state
- Shopping Cart → Cart Selectors: selects
- Shopping Cart → Cart Actions: dispatches changes
- Cart Actions → Cart Reducer: updates state
- Cart Reducer → Cart Selectors: provides state
- Cart Selectors → Product Selectors: reads products
- App Configuration → Product Effects: registers
- App Configuration → Product Reducer: registers
- App Configuration → Cart Reducer: registers
- App Configuration → Browser Storage: syncs cart