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

विषयसूची

1. Redux का परिचय
2. रिएक्ट एप्लिकेशन में Redux सेट करना
3. कार्य और क्रिया प्रकार
4. रेड्यूसर और स्लाइस
5. स्टोर को कॉन्फ़िगर करना
6. प्रतिक्रिया घटकों को जोड़ना
7. निष्कर्ष और संदर्भ

1. रिडक्स का परिचय

Redux एक यूनिडायरेक्शनल डेटा प्रवाह मॉडल का अनुसरण करता है और तीन मुख्य सिद्धांतों पर आधारित है:

• सत्य का एकल स्रोत: आपके संपूर्ण एप्लिकेशन की स्थिति एक एकल स्टोर के भीतर एक ऑब्जेक्ट ट्री में संग्रहीत होती है। यह केंद्रीकरण आपके एप्लिकेशन में डिबग करना और परिवर्तनों को ट्रैक करना आसान बनाता है।
• राज्य केवल पढ़ने के लिए है: राज्य को बदलने का एकमात्र तरीका एक क्रिया का उत्सर्जन करना है, एक वस्तु जो बताती है कि क्या हुआ। यह सुनिश्चित करता है कि राज्य उत्परिवर्तन पूर्वानुमानित और पता लगाने योग्य हैं।
• परिवर्तन शुद्ध कार्यों के साथ किए जाते हैं: यह निर्दिष्ट करने के लिए कि राज्य वृक्ष क्रियाओं द्वारा कैसे परिवर्तित होता है, आप शुद्ध रिड्यूसर लिखते हैं। शुद्ध फ़ंक्शन पूर्वानुमानित और परीक्षण योग्य होते हैं, जो डिबगिंग और यूनिट परीक्षण को सरल बनाता है।

2. रिएक्ट एप्लिकेशन में Redux की स्थापना

सबसे पहले, Redux और React-Redux इंस्टॉल करें:

npm install redux react-redux @reduxjs/toolkit

यह कमांड कोर Redux लाइब्रेरी, Redux के लिए रिएक्ट बाइंडिंग और Redux टूलकिट स्थापित करता है, जो स्टोर स्थापित करने और स्लाइस बनाने जैसे कई सामान्य कार्यों को सरल बनाता है।

3. क्रियाएँ और क्रिया प्रकार

क्रियाएँ जानकारी के पेलोड हैं जो आपके एप्लिकेशन से डेटा को आपके Redux स्टोर पर भेजती हैं। क्रिया प्रकार स्थिरांक हैं जो क्रिया का प्रतिनिधित्व करते हैं।

ActionTypes.js

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const INCREMENT_BY_VALUE = "INCREMENT_BY_VALUE";
export const RESET = "RESET";

export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });
export const incrementByValue = (value) => ({
  type: INCREMENT_BY_VALUE,
  payload: value,
});
export const reset = () => ({ type: RESET });

क्रियाओं और क्रिया प्रकारों को स्पष्ट रूप से परिभाषित करने से निरंतरता बनाए रखने में मदद मिलती है और आपके एप्लिकेशन में त्रुटियां कम हो जाती हैं।

4. रेड्यूसर और स्लाइस

रेड्यूसर निर्दिष्ट करते हैं कि स्टोर पर भेजे गए कार्यों के जवाब में एप्लिकेशन की स्थिति कैसे बदलती है। स्लाइस आपके ऐप के एकल फीचर के लिए Redux रिड्यूसर तर्क और क्रियाओं का एक संग्रह है, जो Redux टूलकिट की createSlice पद्धति का उपयोग करके बनाया गया है।

काउंटरस्लाइस.जे.एस

import { createSlice } from "@reduxjs/toolkit";

const initialState = { number: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.number  = 5;
    },
    decrement: (state) => {
      state.number = Math.max(0, state.number - 5);
    },
    incrementByValue: (state, action) => {
      state.number  = action.payload;
    },
    reset: (state) => {
      state.number = 0;
    },
  },
});

export const { increment, decrement, incrementByValue, reset } = counterSlice.actions;

export default counterSlice.reducer;

एकाधिक स्लाइस को संयोजित करने के लिए:

rootReducer.js

import { combineReducers } from "@reduxjs/toolkit";
import counterReducer from "../slices/counterSlice";

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

5. स्टोर को कॉन्फिगर करना

स्टोर वह वस्तु है जो क्रियाओं और रिड्यूसर को एक साथ लाती है। यह एप्लिकेशन स्थिति रखता है, getState() के माध्यम से उस तक पहुंच की अनुमति देता है, इसे डिस्पैच (एक्शन) के माध्यम से अपडेट करता है, और सब्सक्राइबर (श्रोता) के माध्यम से श्रोताओं को पंजीकृत करता है।

स्टोर.जे.एस

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

const store = configureStore({
  reducer: rootReducer,
});

export default store;

6. प्रतिक्रिया घटकों को जोड़ना

रिएक्ट घटकों को Redux स्टोर से कनेक्ट करने के लिए, स्टोर को अपने घटकों तक पहुंचाने के लिए रिएक्ट-रिडक्स से प्रदाता घटक का उपयोग करें, और स्थिति तक पहुंचने और हेरफेर करने के लिए उपयोग चयनकर्ता और उपयोग डिस्पैच हुक का उपयोग करें।

ऐप.जे.एस

import React from "react";
import { Provider } from "react-redux";
import store from "./redux/store/store";
import Counter from "./components/Counter";
import MusCo from "./MusCo redux logo.png";

function App() {
  return (
    

        

          Practice Redux with MusCo
        
        

          

            by 
            Mustafa 
            Coskuncelebi
          
        
      
    
  );
}

export default App;

काउंटरकंपोनेंट.जेएस

import { useDispatch, useSelector } from "react-redux";
import {
  decrement,
  increment,
  incrementByValue,
  reset,
} from "../slices/counterSlice";
import { useState, useEffect } from "react";

function Counter() {
  const [value, setValue] = useState("");
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);

  useEffect(() => {
    const showcase = document.querySelector("#showcase");
    if (number 
      
Counter
      
{number}
      

         dispatch(increment())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
          Increment by 5
        
         dispatch(decrement())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={number 
          Decrement by 5
        
      
      

        

           {
                   let newValue = e.target.value.trim();
                   if (newValue === "") {
                     newValue = "";
                     reset();
                   }
                   if (/^\d*$/.test(newValue)) {
                     setValue(newValue);
                   }
                 }} 
                 value={value} 
                 placeholder="Enter Value" />
           {
            dispatch(incrementByValue(Number(value)));
            setValue("");
          }} className="w-40 h-10 p-2 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
            Add this Value
          
        
      
       {
        dispatch(reset());
        setValue("");
      }} className="w-20 h-10 p-2 text-white rounded-md outline-1 outline-violet-500

 outline mb-7 bg-violet-900">
        Reset
      
      

        Counter cannot be less than 0
      
    
  );
}

export default Counter;

7. निष्कर्ष एवं सन्दर्भ

Redux आपके अनुप्रयोगों में स्थिति के प्रबंधन के लिए एक शक्तिशाली लाइब्रेरी है। क्रियाओं, रिड्यूसर, स्टोर और हर चीज़ को अपने रिएक्ट घटकों से कैसे जोड़ा जाए, इसे समझकर, आप पूर्वानुमानित और रखरखाव योग्य एप्लिकेशन बना सकते हैं।

प्रमुख बिंदु:

• कार्य: परिभाषित करें कि आपके ऐप में क्या होना चाहिए।
• रेड्यूसर: निर्दिष्ट करें कि क्रियाओं के जवाब में स्थिति कैसे बदलती है।
• स्टोर: स्थिति को बनाए रखता है और कार्यों को संभालता है।
• प्रदाता: स्टोर को आपके रिएक्ट घटकों तक पहुंचाता है।

अधिक जानकारी के लिए, आधिकारिक Redux दस्तावेज़ देखें:

• रिडक्स दस्तावेज़ीकरण
• Redux टूलकिट दस्तावेज़ीकरण
• रिएक्ट-रिडक्स दस्तावेज़ीकरण

इस गाइड का पालन करके, आपको Redux की ठोस समझ होनी चाहिए और इसे अपने अनुप्रयोगों में लागू करने में सक्षम होना चाहिए।