अध्याय 7: स्टेट प्रबंधन (State Management)

इस अध्याय में, हम रिएक्ट.js में स्टेट प्रबंधन की अवधारणाओं का अन्वेषण करेंगे। स्टेट रिएक्ट कंपोनेंट्स का महत्वपूर्ण हिस्सा है, जो आपके एप्लिकेशन के डेटा और उसके व्यवहार को नियंत्रित करता है। स्टेट प्रबंधन के माध्यम से, आप अपने एप्लिकेशन में डेटा को प्रभावी ढंग से प्रबंधित कर सकते हैं और विभिन्न कंपोनेंट्स के बीच इस डेटा को साझा कर सकते हैं।

इस अध्याय में, आप निम्नलिखित विषयों को सीखेंगे:

• स्थानीय स्टेट प्रबंधन (Local State Management): कंपोनेंट्स के भीतर स्टेट को प्रबंधित करना।
• ग्लोबल स्टेट प्रबंधन (Global State Management): एप्लिकेशन के विभिन्न हिस्सों में स्टेट को साझा करना।
• रीडक्स का परिचय (Introduction to Redux): रिएक्ट एप्लिकेशन में स्टेट प्रबंधन के लिए लोकप्रिय लाइब्रेरी।
• एक्शन और रिड्यूसर (Actions and Reducers): रीडक्स में स्टेट प्रबंधन के मूल घटक।
• रीडक्स थंक (Redux Thunk): असिंक्रोनस एक्शन क्रिएटर्स के लिए मिडलवेयर।
• रीडक्स सागा (Redux Saga): सागा मिडलवेयर का उपयोग करके साइड इफेक्ट्स का प्रबंधन करना।

इन अवधारणाओं को समझने और उपयोग करने के बाद, आप अपने रिएक्ट एप्लिकेशन में स्टेट को प्रभावी ढंग से प्रबंधित कर सकेंगे, जिससे आपका एप्लिकेशन अधिक संगठित और स्केलेबल बनेगा। यह अध्याय आपको स्टेट प्रबंधन की मूल बातें सिखाएगा और आपको उन्नत स्टेट प्रबंधन तकनीकों के लिए तैयार करेगा।

स्थानीय स्टेट प्रबंधन (Local State Management)

स्थानीय स्टेट प्रबंधन (Local State Management) रिएक्ट कंपोनेंट्स में डेटा और इसके व्यवहार को नियंत्रित करने का एक प्रमुख तरीका है। प्रत्येक रिएक्ट कंपोनेंट अपने स्टेट को प्रबंधित कर सकता है, जो कि उस कंपोनेंट के अंदर के डेटा का प्रतिनिधित्व करता है। स्थानीय स्टेट का उपयोग करके, आप कंपोनेंट्स को अधिक डायनामिक और इंटरैक्टिव बना सकते हैं। इस सेक्शन में, हम स्थानीय स्टेट प्रबंधन की बुनियादी अवधारणाओं और इसके उपयोग के तरीकों पर चर्चा करेंगे।

स्थानीय स्टेट क्या है? (What is Local State?)

स्थानीय स्टेट वह डेटा है जो एक कंपोनेंट के भीतर प्रबंधित और उपयोग किया जाता है। यह डेटा कंपोनेंट के जीवनचक्र के दौरान बदल सकता है और कंपोनेंट के व्यवहार और रेंडरिंग को प्रभावित करता है। स्थानीय स्टेट को रिएक्ट के useState हुक के माध्यम से सेट और अपडेट किया जाता है।

useState हुक का उपयोग (Using the useState Hook)

useState हुक रिएक्ट के फंक्शनल कंपोनेंट्स में स्टेट को प्रबंधित करने के लिए उपयोग किया जाता है। यह हुक एक स्टेट वेरिएबल और उसे अपडेट करने के लिए एक फ़ंक्शन प्रदान करता है।

उदाहरण:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

इस उदाहरण में, useState हुक का उपयोग करके count स्टेट वेरिएबल और setCount अपडेट फ़ंक्शन को परिभाषित किया गया है। increment और decrement फ़ंक्शन्स का उपयोग करके स्टेट को अपडेट किया जाता है।

स्थानीय स्टेट प्रबंधन के लाभ (Benefits of Local State Management)

1. सरलता (Simplicity): स्थानीय स्टेट को प्रबंधित करना और उपयोग करना आसान होता है, जिससे कोड को समझना और लिखना सरल हो जाता है।
2. प्रदर्शन (Performance): चूंकि स्टेट केवल उसी कंपोनेंट में सीमित होता है, इसलिए रेंडरिंग अधिक कुशल होती है।
3. अलगाव (Isolation): प्रत्येक कंपोनेंट का अपना स्टेट होता है, जिससे कंपोनेंट्स स्वतंत्र और पुन: उपयोग योग्य होते हैं।

स्थानीय स्टेट के उदाहरण (Examples of Local State)

1. फॉर्म हैंडलिंग:

   import React, { useState } from 'react';
   
   function LoginForm() {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
   
     const handleSubmit = (event) => {
       event.preventDefault();
       // फॉर्म सबमिशन लॉजिक
     };
   
     return (
       <form onSubmit={handleSubmit}>
         <label>
           Email:
           <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
         </label>
         <br />
         <label>
           Password:
           <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
         </label>
         <br />
         <button type="submit">Login</button>
       </form>
     );
   }
   
   export default LoginForm;
   

    

2. टॉगल बटन:

   import React, { useState } from 'react';
   
   function ToggleButton() {
     const [isOn, setIsOn] = useState(false);
   
     const toggle = () => {
       setIsOn(!isOn);
     };
   
     return (
       <button onClick={toggle}>
         {isOn ? 'ON' : 'OFF'}
       </button>
     );
   }
   
   export default ToggleButton;
   

    

स्थानीय स्टेट प्रबंधन की सीमाएँ (Limitations of Local State Management)

1. सीमित स्कोप (Limited Scope): स्थानीय स्टेट केवल उसी कंपोनेंट में उपलब्ध होता है, जिससे डेटा को अन्य कंपोनेंट्स के साथ साझा करना कठिन हो सकता है।
2. प्रबंधन की जटिलता (Complexity in Management): बड़े और जटिल एप्लिकेशन में, स्थानीय स्टेट को प्रबंधित करना जटिल हो सकता है, खासकर जब स्टेट को विभिन्न कंपोनेंट्स में साझा करना हो।

रीडक्स का परिचय (Introduction to Redux)

परिचय

रीडक्स (Redux) रिएक्ट एप्लिकेशन में स्टेट प्रबंधन के लिए एक लोकप्रिय और शक्तिशाली लाइब्रेरी है। यह आपके एप्लिकेशन के स्टेट को केंद्रीकृत करता है और स्टेट प्रबंधन को अधिक पूर्वानुमान योग्य और सरल बनाता है। रीडक्स आपको एप्लिकेशन के विभिन्न हिस्सों में स्टेट को प्रभावी ढंग से साझा करने और प्रबंधित करने की अनुमति देता है। इस अध्याय में, हम रीडक्स की बुनियादी अवधारणाओं और इसके उपयोग के तरीकों का अन्वेषण करेंगे।

रीडक्स क्या है? (What is Redux?)

रीडक्स एक जावास्क्रिप्ट लाइब्रेरी है जो स्टेट प्रबंधन को सरल और पूर्वानुमान योग्य बनाती है। यह तीन मुख्य सिद्धांतों पर आधारित है:

1. सिंगल सोर्स ऑफ ट्रुथ (Single Source of Truth): रीडक्स में, स्टेट का पूरा डेटा एक सिंगल स्टोर (store) में संग्रहीत होता है। यह स्टोर एप्लिकेशन के सभी हिस्सों में स्टेट को साझा और सिंक्रनाइज़ करता है।
2. स्टेट इज़ इम्युटेबल (State is Immutable): स्टेट को केवल एक्शन (action) के माध्यम से बदला जा सकता है। यह सुनिश्चित करता है कि स्टेट हमेशा पूर्वानुमान योग्य और ट्रैक करने योग्य रहे।
3. स्टेट चेंजेज आर हैंडल्ड बाय प्योर फंक्शन्स (State Changes are Handled by Pure Functions): स्टेट परिवर्तन रिड्यूसर (reducer) नामक प्योर फंक्शन्स के माध्यम से किए जाते हैं। रिड्यूसर पुराने स्टेट और एक्शन को इनपुट के रूप में लेते हैं और नया स्टेट आउटपुट के रूप में प्रदान करते हैं।

रीडक्स के प्रमुख घटक (Key Components of Redux)

1. स्टोर (Store):
   • स्टोर आपके एप्लिकेशन का सिंगल सोर्स ऑफ ट्रुथ होता है।
   • इसमें एप्लिकेशन का पूरा स्टेट होता है और यह स्टेट को प्रबंधित करता है।

     import { createStore } from 'redux';
     import rootReducer from './reducers';
     
     const store = createStore(rootReducer);
     

      

2. एक्शन (Action):
   • एक्शन स्टेट को बदलने का एक मात्र तरीका होता है।
   • एक्शन एक जावास्क्रिप्ट ऑब्जेक्ट होता है जिसमें एक type प्रॉपर्टी होती है और वैकल्पिक डेटा होता है।

     const incrementAction = {
       type: 'INCREMENT'
     };
     

      

3. रिड्यूसर (Reducer):
   • रिड्यूसर प्योर फंक्शन्स होते हैं जो पुराने स्टेट और एक्शन को इनपुट के रूप में लेते हैं और नया स्टेट आउटपुट के रूप में प्रदान करते हैं।

     const initialState = { count: 0 };
     
     function counterReducer(state = initialState, action) {
       switch (action.type) {
         case 'INCREMENT':
           return { count: state.count + 1 };
         case 'DECREMENT':
           return { count: state.count - 1 };
         default:
           return state;
       }
     }
     

      

4. डिस्पैच (Dispatch):
   • डिस्पैच का उपयोग स्टोर को एक्शन भेजने के लिए किया जाता है।

     store.dispatch(incrementAction);
     

      

5. सब्सक्राइब (Subscribe):
   • सब्सक्राइब का उपयोग स्टोर में स्टेट परिवर्तन सुनने के लिए किया जाता है।

     store.subscribe(() => {
       console.log(store.getState());
     });
     

      

रीडक्स का उदाहरण (Example of Redux)

स्टोर और रिड्यूसर सेटअप:

import { createStore } from 'redux';

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);

एक्शन क्रिएटर्स:

const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

कंपोनेंट्स में रीडक्स का उपयोग:

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from './actions';

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default Counter;

रीडक्स के लाभ (Benefits of Redux)

• पूर्वानुमान योग्य स्टेट प्रबंधन (Predictable State Management): रीडक्स का सिंगल स्टोर और इम्युटेबल स्टेट पूर्वानुमान और डिबग करना आसान बनाता है।
• केंद्रीकृत स्टेट (Centralized State): सारा स्टेट एक ही स्थान पर होता है, जिससे स्टेट का प्रबंधन और साझा करना आसान हो जाता है।
• स्केलेबिलिटी (Scalability): रीडक्स बड़े और जटिल एप्लिकेशन के लिए उपयुक्त है, जहां स्टेट प्रबंधन महत्वपूर्ण होता है।

एक्शन और रिड्यूसर्स (Actions and Reducers)

रीडक्स (Redux) में स्टेट प्रबंधन की मूल इकाइयाँ एक्शन (Actions) और रिड्यूसर्स (Reducers) हैं। ये दोनों मिलकर आपके एप्लिकेशन के स्टेट को नियंत्रित और अपडेट करने का कार्य करते हैं। एक्शन स्टेट को बदलने के इरादे को परिभाषित करते हैं, जबकि रिड्यूसर्स स्टेट को बदलने का वास्तविक कार्य करते हैं। इस सेक्शन में, हम एक्शन और रिड्यूसर्स की बुनियादी अवधारणाओं, उनके कार्य, और उनके उपयोग के तरीकों पर चर्चा करेंगे।

एक्शन (Actions)

const incrementAction = {
  type: 'INCREMENT'
};

const decrementAction = {
  type: 'DECREMENT'
};

एक्शन जावास्क्रिप्ट ऑब्जेक्ट्स होते हैं जो रीडक्स स्टोर को यह बताते हैं कि स्टेट को कैसे बदलना चाहिए। प्रत्येक एक्शन में एक type प्रॉपर्टी होती है जो एक्शन की पहचान करती है और वैकल्पिक रूप से अन्य डेटा होता है जिसे स्टेट को अपडेट करने के लिए आवश्यक होता है।

एक्शन का उदाहरण:

const incrementAction = {
  type: 'INCREMENT'
};

const decrementAction = {
  type: 'DECREMENT'
};

एक्शन क्रिएटर्स (Action Creators): एक्शन क्रिएटर्स फंक्शन्स होते हैं जो एक्शन ऑब्जेक्ट्स बनाते हैं। ये फंक्शन्स एक्शन क्रिएशन को सरल और मानकीकृत बनाते हैं।

const increment = () => {
  return {
    type: 'INCREMENT'
  };
};

const decrement = () => {
  return {
    type: 'DECREMENT'
  };
};

रिड्यूसर्स (Reducers)

रिड्यूसर्स प्योर फंक्शन्स होते हैं जो स्टेट और एक्शन को इनपुट के रूप में लेते हैं और नया स्टेट आउटपुट के रूप में रिटर्न करते हैं। रिड्यूसर्स में स्टेट परिवर्तन की लॉजिक होती है और वे स्टेट को अपडेट करने का कार्य करते हैं।

रिड्यूसर का उदाहरण:

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

उपरोक्त उदाहरण में, counterReducer एक रिड्यूसर है जो INCREMENT और DECREMENT एक्शन्स के आधार पर स्टेट को अपडेट करता है।

एक्शन और रिड्यूसर्स का कार्यान्वयन (Implementing Actions and Reducers)

1. एक्शन क्रिएटर्स को परिभाषित करना:

   const increment = () => ({ type: 'INCREMENT' });
   const decrement = () => ({ type: 'DECREMENT' });
   

    

2. रिड्यूसर को परिभाषित करना:

   const initialState = { count: 0 };
   
   function counterReducer(state = initialState, action) {
     switch (action.type) {
       case 'INCREMENT':
         return { count: state.count + 1 };
       case 'DECREMENT':
         return { count: state.count - 1 };
       default:
         return state;
     }
   }
   

    

3. स्टोर को बनाना:

   import { createStore } from 'redux';
   import counterReducer from './reducers';
   
   const store = createStore(counterReducer);
   

    

4. कंपोनेंट्स में एक्शन्स को डिस्पैच करना:

   import React from 'react';
   import { useDispatch, useSelector } from 'react-redux';
   import { increment, decrement } from './actions';
   
   function Counter() {
     const count = useSelector(state => state.count);
     const dispatch = useDispatch();
   
     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => dispatch(increment())}>Increment</button>
         <button onClick={() => dispatch(decrement())}>Decrement</button>
       </div>
     );
   }
   
   export default Counter;
   

    

एक्शन और रिड्यूसर्स के लाभ (Benefits of Actions and Reducers)

• स्टेट प्रबंधन का स्पष्ट तरीका (Clear State Management): एक्शन और रिड्यूसर्स स्टेट परिवर्तन को स्पष्ट और पूर्वानुमान योग्य बनाते हैं।
• अलगाव और पुन: उपयोगिता (Isolation and Reusability): एक्शन और रिड्यूसर्स के माध्यम से स्टेट परिवर्तन की लॉजिक को अलग और पुन: उपयोग योग्य बनाया जा सकता है।
• डिबग और ट्रैकिंग (Debugging and Tracking): एक्शन और रिड्यूसर्स के माध्यम से स्टेट परिवर्तन को ट्रैक और डिबग करना आसान होता है।

रीडक्स थंक (Redux Thunk)

रीडक्स थंक (Redux Thunk) एक मिडलवेयर है जो आपको रीडक्स में असिंक्रोनस एक्शन्स (जैसे API कॉल्स) को प्रबंधित करने की सुविधा देता है। रीडक्स थंक के माध्यम से, आप एक्शन क्रिएटर्स में थंक्स (फंक्शन्स) को रिटर्न कर सकते हैं, जो डिस्पैच और गेटस्टेट जैसे रीडक्स स्टोर के मेथड्स का उपयोग करके असिंक्रोनस ऑपरेशन्स को नियंत्रित करते हैं। इस सेक्शन में, हम रीडक्स थंक की बुनियादी अवधारणाओं, इसके उपयोग, और इसके फायदे पर चर्चा करेंगे।

रीडक्स थंक क्या है? (What is Redux Thunk?)

रीडक्स थंक एक मिडलवेयर है जो एक्शन क्रिएटर्स को एक्शन ऑब्जेक्ट्स की जगह फंक्शन्स रिटर्न करने की अनुमति देता है। यह फंक्शन, जिसे थंक कहा जाता है, रीडक्स स्टोर के डिस्पैच और गेटस्टेट मेथड्स तक पहुंच प्राप्त करता है और असिंक्रोनस लॉजिक को नियंत्रित करता है।

रीडक्स थंक का सेटअप (Setting Up Redux Thunk)

रीडक्स थंक को अपने प्रोजेक्ट में उपयोग करने के लिए, आपको इसे पहले इंस्टॉल करना होगा और फिर इसे रीडक्स स्टोर में मिडलवेयर के रूप में लागू करना होगा।

1. इंस्टॉल करना:

   npm install redux-thunk
   

    

2. स्टोर में मिडलवेयर के रूप में लागू करना:

   import { createStore, applyMiddleware } from 'redux';
   import thunk from 'redux-thunk';
   import rootReducer from './reducers';
   
   const store = createStore(rootReducer, applyMiddleware(thunk));
   

    

असिंक्रोनस एक्शन क्रिएटर्स (Asynchronous Action Creators)

रीडक्स थंक के उपयोग से, आप असिंक्रोनस एक्शन क्रिएटर्स बना सकते हैं जो API कॉल्स और अन्य असिंक्रोनस ऑपरेशन्स को नियंत्रित करते हैं। थंक एक्शन क्रिएटर एक फंक्शन रिटर्न करता है जो डिस्पैच और गेटस्टेट मेथड्स को उपयोग करता है।

असिंक्रोनस एक्शन क्रिएटर का उदाहरण:

// actions.js

export const fetchDataRequest = () => {
  return {
    type: 'FETCH_DATA_REQUEST'
  };
};

export const fetchDataSuccess = (data) => {
  return {
    type: 'FETCH_DATA_SUCCESS',
    payload: data
  };
};

export const fetchDataFailure = (error) => {
  return {
    type: 'FETCH_DATA_FAILURE',
    payload: error
  };
};

export const fetchData = () => {
  return (dispatch) => {
    dispatch(fetchDataRequest());
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        dispatch(fetchDataSuccess(data));
      })
      .catch(error => {
        dispatch(fetchDataFailure(error));
      });
  };
};

रिड्यूसर (Reducer)

रिड्यूसर को इन एक्शन्स को हैंडल करने के लिए तैयार किया जाता है:

// reducers.js

const initialState = {
  loading: false,
  data: [],
  error: ''
};

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_REQUEST':
      return {
        ...state,
        loading: true
      };
    case 'FETCH_DATA_SUCCESS':
      return {
        ...state,
        loading: false,
        data: action.payload
      };
    case 'FETCH_DATA_FAILURE':
      return {
        ...state,
        loading: false,
        error: action.payload
      };
    default:
      return state;
  }
};

export default dataReducer;

कंपोनेंट में उपयोग (Using in Component)

अब, आप अपने कंपोनेंट में इन असिंक्रोनस एक्शन्स को डिस्पैच कर सकते हैं:

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions';

function DataComponent() {
  const dispatch = useDispatch();
  const data = useSelector(state => state.data);
  const loading = useSelector(state => state.loading);
  const error = useSelector(state => state.error);

  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

  return (
    <div>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataComponent;

रीडक्स थंक के लाभ (Benefits of Redux Thunk)

1. असिंक्रोनस लॉजिक को नियंत्रित करना (Handling Asynchronous Logic): रीडक्स थंक असिंक्रोनस ऑपरेशन्स, जैसे API कॉल्स, को नियंत्रित करने का एक सरल तरीका प्रदान करता है।
2. सिंपल एक्शन क्रिएटर्स (Simple Action Creators): थंक के माध्यम से, आप एक्शन क्रिएटर्स में असिंक्रोनस लॉजिक को शामिल कर सकते हैं, जिससे कोड को समझना और लिखना आसान होता है।
3. पूर्वानुमान योग्य स्टेट अपडेट्स (Predictable State Updates): असिंक्रोनस ऑपरेशन्स के बाद स्टेट अपडेट्स को सरल और पूर्वानुमान योग्य बनाना।

रीडक्स सागा (Redux Saga)

परिचय

रीडक्स सागा (Redux Saga) रीडक्स एप्लिकेशन में साइड इफेक्ट्स (जैसे असिंक्रोनस कॉल्स, डेटा फेचिंग, आदि) को नियंत्रित करने के लिए एक शक्तिशाली मिडलवेयर है। यह ES6 जेनरेटर फंक्शन्स का उपयोग करके सागा (sagas) नामक कार्यों को परिभाषित करता है, जो साइड इफेक्ट्स को प्रभावी ढंग से प्रबंधित और नियंत्रित करते हैं। इस सेक्शन में, हम रीडक्स सागा की बुनियादी अवधारणाओं, इसके उपयोग, और इसके फायदे पर चर्चा करेंगे।

रीडक्स सागा क्या है? (What is Redux Saga?)

रीडक्स सागा एक मिडलवेयर है जो साइड इफेक्ट्स (जैसे असिंक्रोनस कॉल्स, डेटा फेचिंग, आदि) को नियंत्रित करने के लिए ES6 जेनरेटर फंक्शन्स का उपयोग करता है। सागा एक तरह के बैकग्राउंड प्रोसेस होते हैं जो विभिन्न एक्शन्स के आधार पर स्टोर को अपडेट करते हैं और साइड इफेक्ट्स को नियंत्रित करते हैं।

रीडक्स सागा का सेटअप (Setting Up Redux Saga)

रीडक्स सागा को अपने प्रोजेक्ट में उपयोग करने के लिए, आपको इसे पहले इंस्टॉल करना होगा और फिर इसे रीडक्स स्टोर में मिडलवेयर के रूप में लागू करना होगा।

1. इंस्टॉल करना:

   npm install redux-saga
   

    

2. स्टोर में मिडलवेयर के रूप में लागू करना:

   import { createStore, applyMiddleware } from 'redux';
   import createSagaMiddleware from 'redux-saga';
   import rootReducer from './reducers';
   import rootSaga from './sagas';
   
   const sagaMiddleware = createSagaMiddleware();
   const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
   
   sagaMiddleware.run(rootSaga);
   

    

सागा (Saga) और इफेक्ट्स (Effects)

सागा जेनरेटर फंक्शन्स होते हैं जो साइड इफेक्ट्स को नियंत्रित करते हैं। रीडक्स सागा इफेक्ट्स का उपयोग करके साइड इफेक्ट्स को नियंत्रित करने की सुविधा प्रदान करता है, जैसे कि call, put, takeEvery, और takeLatest।

सागा का उदाहरण:

// sagas.js

import { call, put, takeEvery } from 'redux-saga/effects';

function* fetchData() {
  try {
    const data = yield call(() => fetch('https://api.example.com/data').then(response => response.json()));
    yield put({ type: 'FETCH_DATA_SUCCESS', payload: data });
  } catch (error) {
    yield put({ type: 'FETCH_DATA_FAILURE', payload: error });
  }
}

function* watchFetchData() {
  yield takeEvery('FETCH_DATA_REQUEST', fetchData);
}

export default function* rootSaga() {
  yield watchFetchData();
}

एक्शन क्रिएटर्स (Action Creators)

एक्शन क्रिएटर्स:

// actions.js

export const fetchDataRequest = () => ({
  type: 'FETCH_DATA_REQUEST'
});

export const fetchDataSuccess = (data) => ({
  type: 'FETCH_DATA_SUCCESS',
  payload: data
});

export const fetchDataFailure = (error) => ({
  type: 'FETCH_DATA_FAILURE',
  payload: error
});

रिड्यूसर (Reducer)

रिड्यूसर:

// reducers.js

const initialState = {
  loading: false,
  data: [],
  error: ''
};

function dataReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_DATA_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_DATA_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_DATA_FAILURE':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

export default dataReducer;

कंपोनेंट में उपयोग (Using in Component)

अब, आप अपने कंपोनेंट में इन असिंक्रोनस एक्शन्स को डिस्पैच कर सकते हैं:

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchDataRequest } from './actions';

function DataComponent() {
  const dispatch = useDispatch();
  const data = useSelector(state => state.data);
  const loading = useSelector(state => state.loading);
  const error = useSelector(state => state.error);

  useEffect(() => {
    dispatch(fetchDataRequest());
  }, [dispatch]);

  return (
    <div>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataComponent;

रीडक्स सागा के लाभ (Benefits of Redux Saga)

1. असिंक्रोनस लॉजिक को नियंत्रित करना (Handling Asynchronous Logic): रीडक्स सागा असिंक्रोनस ऑपरेशन्स, जैसे API कॉल्स, को प्रभावी ढंग से नियंत्रित करने का एक शक्तिशाली तरीका प्रदान करता है।
2. जटिल साइड इफेक्ट्स को सरल बनाना (Simplifying Complex Side Effects): सागा का उपयोग करके जटिल साइड इफेक्ट्स को सरल और प्रबंधनीय बनाया जा सकता है।
3. प्रिडिक्टेबल स्टेट अपडेट्स (Predictable State Updates): असिंक्रोनस ऑपरेशन्स के बाद स्टेट अपडेट्स को सरल और पूर्वानुमान योग्य बनाना।
4. एरर हैंडलिंग (Error Handling): रीडक्स सागा में एरर हैंडलिंग को प्रभावी ढंग से प्रबंधित करना आसान होता है।