How thecoderdream/react-ecommerce-app-with-redux works
This is a React/Redux storefront for browsing phone products, filtering and sorting listings, viewing product details, and managing a shopping cart. The principal workflow runs from the product listing through selection or detail viewing, then cart updates held in Redux state. Static product data and listing transformation helpers form the internal data layer. The README is mostly Create React App boilerplate; unsampled page and data-loading code limits certainty about some wiring.
Main entry points: actions/index.js Action Creators · App.js App Router · ProductList.js Product List · reducers/index.js Redux Store
Components 18
Storefront
- App Router
src/App.js - Home Page
src/pages/Home/Home.js - Detail Page
src/pages/ProductDetail/ProductDetail.js
Product Catalog
- Product List
src/containers/ProductList/ProductList.js - Filter Bar
src/containers/FilterBar/FilterBar.js - Product Card
src/components/Product/Product.js - Product Details
src/components/ProductDetail/ProductDetail.js - Pagination
src/components/Pagination/Pagination.js - Phone Catalog
src/data/phones.js - Catalog Data
src/data/getData.js - Listing Filters
src/pipes/brandFilter.js
Redux State
- Action Creators
src/actions/index.js - Redux Store
src/reducers/index.js - Shop Reducer
src/reducers/shop.reducer.js - Filter Reducers
src/reducers/brand.filter.reducer.js
Shopping Cart
Other components
- Shopper
Connections 20
- Shopper → App Router: opens storefront
- App Router → Home Page: routes products
- App Router → Detail Page: routes product
- App Router → Cart Page: routes cart
- Home Page → Product List: renders listing
- Product List → Listing Filters: filters and sorts
- Product List → Pagination: renders pages
- Product List → Product Card: renders products
- Catalog Data → Phone Catalog: reads catalog
- Shopper → Product Card: selects product
- Detail Page → Product Details: renders details
- Product Card → Action Creators: dispatches add
- Product Details → Action Creators: dispatches add
- Cart Item → Action Creators: dispatches changes
- Action Creators → Redux Store: updates state
- Redux Store → Shop Reducer: reduces cart actions
- Redux Store → Filter Reducers: reduces filter actions
- Cart Page → Cart Item: renders items
- Shopper → Filter Bar: sets filters
- Filter Bar → Action Creators: dispatches filters