configure saga middleware in react redux saga

 

Configure Saga Middleware in React Redux Saga

 

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of configure saga middleware in react redux. Actually we are making some project like E-commerce where we can implement searchbar, product add to cart, remove from cart, empty cart, cart section after adding some product and product section and a lot of things, So, don't worry i'm not going to leave you alone.

 

 

React

Certainly, Reactjs is a JavaScript library developed by Facenook for building user interfaces. It allows developers to create reusable UI components and effciently manage the state of their applications. Here are some key aspects of Reactjs.


Component-Based Architecture: ReactJS follows a component-based architecture, where the user interface is divided into small, reusable components. Components encapsulate their own logic, state, and rendering, making it easier to build and maintain complex user interfaces.



Virtual DOM: ReactJS uses a virtual representation of the DOM (Document Object Model), known as the Virtual DOM. When the state of a component changes, React updates the Virtual DOM.



JSX: JSX is a syntax extension for JavaScript used in React. It allows developers to write HTML-like code within JavaScript, making it easier to describe the structure and appearance of components. JSX code is transpiled to regular JavaScript using tools like Babel before being executed in the browser.


Hooks: React introduced Hooks in version 16.8 as a way to use state and other React features in functional components. Hooks allow developers to write reusable logic and manage state within functional components without the need for class components. The most commonly used hooks are useState for managing state and useEffect for handling side effects such as fetching data or subscribing to events.


React Router: React Router is a popular routing library for React applications. It enables developers to create single-page applications with multiple views and handles routing between different components based on the URL.


State Management: React provides a flexible ecosystem of state management solutions. While React's built-in state management (useState ) is suitable for managing local component state, more complex applications may benefit from additional state management libraries like Redux. These libraries help manage global application state and provide predictable ways to update and access the state.


ReactJS has gained widespread popularity due to its performance, reusability, and declarative approach to building user interfaces. It has large community.

 

Topic we will cover -

# Make Saga file and write saga basic function

# Register saga middleware with Store

# Check Flow

 

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/09/get-data-in-component-from-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

 

Saga Install

First you need to install redux-saga, for this command ( npm i redux-saga ) 

 

 

Make Saga file and write saga basic function

 

 First we will make a new file called as ProductSaga.jsx and in this file we will used generator function like (function* product)

In JavaScript, a generator function is a special type of function that allows you to control the execution flow using the yield keyword. When a generator function is called, it doesn't execute its code immediately. Instead, it returns an iterator called a generator object.

 

 

function* myGenerator() {
    yield 1;
    yield 2;
    yield 3;
  }
  
 const generatorObject = myGenerator();
  
  console.log(generatorObject.next()); // { value: 1, done: false }
  console.log(generatorObject.next()); // { value: 2, done: false }
  console.log(generatorObject.next()); // { value: 3, done: false }
  console.log(generatorObject.next()); // { value: undefined, done: true }
  
  export default ProductSaga;

 

 

 In this example, myGenerator is a generator function that yields three values (1, 2, and 3). When you call myGenerator(), it returns a generator object. You can then use the next() method on the generator object to advance the execution of the generator function. The yield keyword is used to produce a value from the generator and temporarily pause its execution.

The next() method returns an object with two properties:

    value: The yielded value.
    done: A boolean indicating whether the generator function has completed.

You can use generator functions for more complex asynchronous control flow using yield with promises, making them useful for handling asynchronous code in a more synchronous-looking fashion.

 

 ProductSaga.jsx

 

 

 

MiddleWare Saga Configuration (Store.jsx)

 

 

import { configureStore } from "@reduxjs/toolkit";
import RootReducer from "./RootReducer";

import ProductSaga from './ProductSaga';
import createSagaMiddleware from 'redux-saga';


const sagaMiddleware = createSagaMiddleware();

const Store = configureStore(
    {
        reducer: RootReducer,
        middleware: () => [sagaMiddleware]
    }
)

sagaMiddleware.run(ProductSaga)
export default Store

//www.kumaratuljaiswal.in #www.hackingtruth.in

 

 

1. import Statement

import { configureStore } from "@reduxjs/toolkit";
import RootReducer from "./RootReducer";
import ProductSaga from './ProductSaga';
import createSagaMiddleware from 'redux-saga';

$ The code imports the configureStore function from @reduxjs/toolkit, which is a set of tools and abstractions built on top of Redux to simplify the development of Redux applications.

$ RootReducer is assumed to be the combined reducer for your application, combining all the reducers using the combineReducers function.

$ ProductSaga is assumed to be a saga that handles asynchronous actions related to products.
    createSagaMiddleware is used to create the middleware for integrating Redux Saga with the Redux store.

 

2. Create Saga Middleware:

const sagaMiddleware = createSagaMiddleware();


$ This line creates an instance of the Saga middleware using createSagaMiddleware().

 

3. Configure Redux Store:

const Store = configureStore(
    {
        reducer: RootReducer,
        middleware: () => [sagaMiddleware]
    }
);


$ The configureStore function is called to create the Redux store.

$ It takes an object as an argument with two properties:

reducer: This is the root reducer for the Redux store, combining all the reducers.

middleware: An array of middleware functions to be applied to the store. In this case, it includes the Saga middleware created earlier.



4. Run Saga Middleware:

sagaMiddleware.run(ProductSaga);


$ This line runs the ProductSaga using the Saga middleware. It starts the execution of the saga and allows it to listen for dispatched actions.



5. Export the Store:

export default Store;


$ Finally, the configured Redux store is exported, making it available for use in other parts of your application.

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

 

Disclaimer