How to create a product list using redux saga middleware example

Question

Can you tell me How to create a product list using redux saga middleware example

Answer 1

1. Create a Product List Component:

This component will render a list of products.

// components/ProductList.js

import React from 'react';

const ProductList = () => {

  // Static list of products (can be dynamic in real-world apps)

  const products = [

    { id: 1, name: 'Product 1', price: '$10' },

    { id: 2, name: 'Product 2', price: '$20' },

    { id: 3, name: 'Product 3', price: '$30' },

    { id: 4, name: 'Product 4', price: '$40' },

  ];

  return (

    <div>

      <h2>Product List</h2>

      <ul>

        {products.map(product => (

          <li key={product.id}>

            <strong>{product.name}</strong> - {product.price}

          </li>

        ))}

      </ul>

    </div>

  );

};

export default ProductList;

2. Add Product List to Main App:

Integrate the ProductList component into your main App component.

// App.js

import React from 'react';

import ProductList from './components/ProductList';

const App = () => {

  return (

    <div>

      <h1>Welcome to the Product Store</h1>

      <ProductList />

    </div>

  );

};

export default App;

3. Render in the DOM:

Make sure to render your App component inside index.js.

// index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));