I am doing an e-commerce website with react, redux, redux-thunk ( I don't know redux-thunk yet ). Let's say the website has 6-page Homepage, Shop Page, and Contact page, about page, Order page, checkout page, and if we click on the product it will show the product details page.
In Homepage there are 3 different slider which needs all the product to show in sliders that means I need have all the products from API in homepage.
also, On shop page I need to show all the products on Shop page
I have a component named Layout inside where I conditionally render pages like for / Homepage will be loaded and /shop shop-page will be loaded. then I import the Layout component in the Appjs file.
App.js
import React from 'react';
import './App.module.css';
import { Route, Switch } from 'react-router-dom';
import Layout from './container/layout/Layout.js'
import HomePage from './Pages/HomePage/HomePage';
import ShopPage from './Pages/ShopPage/ShopPage';
import SingleRroductPage from './Pages/SingleProductPage/SingleRroductPage';
function App() {
return (
<div className="App">
<Layout>
<Switch>
<Route path="/" exact component={HomePage} />
<Route path="/shop" component={ShopPage} />
<Route path="/single/:id" component={SingleRroductPage} />
</Switch>
</Layout>
</div>
);
}
export default App;
Layout.js
import React from 'react';
import Topbar from '../../component/header/topbar/Topbar';
import Footer from '../Footer/Footer';
import Navbar from '../navbar/Navbar';
function Layout(props) {
return (
<div>
<Topbar />
<Navbar />
{props.children}
<Footer/>
</div>
);
}
export default Layout;
Now the question is where should I load the products from API?
-In Appjs? -Separately on both the Homepage and Shop page? -In layoutjs file?
if I load all the products in App.js or Layout.js file then all the products will be on every other page like contact and about pages. it wouldn't be a performance issue?
For product details page
should I use a different API endpoint like
`` "/api/products/single:id" ? ``` or from all product filter by id?
Each component should be responsible for requesting its own data. HomePage and ShopPage should both call an action to load the data that they need (in an ideal setup, that action will check if the data already exists in the state before fetching, but that's getting ahead of ourselves).
Of course you don't want to be repeating logic for every component that needs to fetch data. That's where redux comes to the rescue. You can define an action creator fetchApiData(endpoint) which takes the name of the endpoint that you want to call. All of the logic associated with fetching and storing the data is handled in your redux files (often called reducer.js, actions.js, etc.).
Your components are responsible for:
fetchApiData(endpoint) function once per endpoint when the component is mounted