Redux टूलकिट का उद्देश्य

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

• स्टोर स्थापित करना बहुत जटिल है।
• रेडक्स के साथ काम करने के लिए कई पैकेज जोड़े जा रहे हैं जैसे, मिडलवेयर, टूल्स।
• Redux को सेटअप करने के लिए बहुत अधिक कोड की आवश्यकता है

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

Redux टूलकिट के मुख्य लाभ:

1. कम बॉयलरप्लेट कोड: एक्शन क्रिएटर्स और स्थिरांक की आवश्यकता को हटा दें।
2. सरलीकृत स्टोर सेटअप: स्टोर को समझदार डिफ़ॉल्ट के साथ कॉन्फ़िगर करने के लिए एकल एपीआई प्रदान करता है।
3. अपरिवर्तनीयता और DevTools के लिए अंतर्निहित समर्थन: Redux DevTools को स्वचालित रूप से सक्षम करता है और अपरिवर्तनीयता के लिए Immer के साथ एकीकृत करता है।
4. बेहतर टाइपस्क्रिप्ट समर्थन: बेहतर टाइपिंग प्रदान करता है और टाइपस्क्रिप्ट के साथ अच्छी तरह से एकीकृत होता है।

हम किसी भी जावास्क्रिप्ट लाइब्रेरी के साथ रिडक्स टूलकिट का उपयोग कर सकते हैं इसलिए हम रिएक्ट के साथ रिडक्स टूलकिट सेटअप करते हैं।

रिएक्ट एप्लिकेशन में Redux टूलकिट सेट करना

चरण 1: एक नया रिएक्ट प्रोजेक्ट बनाएं

सबसे पहले, आइए एक नया रिएक्ट एप्लिकेशन बनाएं। आप इस उद्देश्य के लिए create-react-app या Vite का उपयोग कर सकते हैं। हम यहां सरलता के लिए create-react-app का उपयोग करेंगे।

npx create-react-app redux-toolkit-example
cd redux-toolkit-example

चरण 2: Redux टूलकिट और रिएक्ट-Redux स्थापित करें

अगला, आवश्यक पैकेज स्थापित करें: @reduxjs/toolkit और प्रतिक्रिया-redux।

npm install @reduxjs/toolkit react-redux

1. स्लाइस और रेड्यूसर को समझना

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

चरण 1: एक स्लाइस बनाएं
आइए एक सरल काउंटर स्लाइस बनाएं। फीचर्स/काउंटर डायरेक्टरी के अंदर काउंटरस्लाइस.जेएस नामक एक नई फ़ाइल बनाएं:

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value  = 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value  = action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

यहां, हम प्रारंभिक स्थिति और तीन रिड्यूसर (वृद्धि, वेतन वृद्धि और इन्क्रीमेंटबायमाउंट) के साथ काउंटर नाम के एक स्लाइस को परिभाषित करते हैं। क्रिएटस्लाइस फ़ंक्शन स्वचालित रूप से प्रत्येक रेड्यूसर फ़ंक्शन के लिए एक्शन क्रिएटर्स उत्पन्न करता है।

1. Redux स्टोर को कॉन्फ़िगर करना

अब जब हमारे पास हमारा स्लाइस है, तो आइए Redux स्टोर को कॉन्फ़िगर करें। Redux टूलकिट एक कॉन्फिगरस्टोर फ़ंक्शन प्रदान करता है जो स्टोर को अच्छे डिफ़ॉल्ट के साथ सेट करता है।

चरण 1: एक स्टोर बनाएं
ऐप निर्देशिका के अंदर एक स्टोर.जेएस फ़ाइल बनाएं:

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

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

export default store;

चरण 2: अपने ऐप को स्टोर प्रदान करें
अपने रिएक्ट एप्लिकेशन को रिएक्ट-रिडक्स के एक घटक में लपेटें और इसे स्टोर में पास करें। Index.js फ़ाइल को अपडेट करें:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './app/store';

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById('root')
);

1. घटकों को स्टोर से जोड़ना

Redux स्टोर के साथ इंटरैक्ट करने के लिए, रिएक्ट-रिडक्स द्वारा प्रदान किए गए यूज़सेलेक्टर और यूज़डिस्पैच हुक का उपयोग करें।
चरण 1: उपयोग चयनकर्ता के साथ राज्य तक पहुंचें
स्टोर से स्थिति तक पहुंचने के लिए उपयोग चयनकर्ता हुक का उपयोग करें

// src/features/counter/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

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

  return (
    

      
{count}
       dispatch(increment())}>Increment
       dispatch(decrement())}>Decrement
       dispatch(incrementByAmount(5))}>Increment by 5
    
  );
};

export default Counter;

चरण 2: अपने ऐप में काउंटर घटक का उपयोग करें
अपने मुख्य ऐप घटक में काउंटर घटक को आयात और उपयोग करें:

// src/App.js
import React from 'react';
import Counter from './features/counter/Counter';

function App() {
  return (
    

      
    
  );
}

export default App;

1. निष्कर्ष और अगले चरण

इस भाग में, हमने रिएक्ट एप्लिकेशन में Redux टूलकिट स्थापित करने की मूल बातें शामिल कीं, जिसमें स्लाइस बनाना, स्टोर को कॉन्फ़िगर करना और हुक का उपयोग करके घटकों को Redux स्टोर से जोड़ना शामिल है। अगले भाग में, हम एपीआई से डेटा लाने और विभिन्न लोडिंग स्थितियों को प्रबंधित करने के लिए createAsyncThunk के साथ एसिंक्रोनस लॉजिक को संभालने में गहराई से उतरेंगे।

भाग 2 के लिए बने रहें: उन्नत रिडक्स टूलकिट - createAsyncThunk के साथ Async लॉजिक!