React एप्लिकेशन में Redux और RTK की स्थापना

इस सत्र में हम अपने एप्लिकेशन में React-Redux पैकेज स्थापित करेंगे, जो Redux के साथ मिलकर काम करने के लिए React components को सक्षम बनाता है और Redux Toolkit (संक्षिप्त में RTK) टूल।

अपना प्रोजेक्ट खोलें और टर्मिनल में निम्नलिखित कमांड टाइप करें:

terminalnpm install @reduxjs/toolkit react-redux

अब हमें store बनाने की आवश्यकता है, जिसमें हमारे एप्लिकेशन की वैश्विक स्थिति संग्रहीत रहेगी। शुरुआत करने के लिए src फोल्डर में हम app फोल्डर बनाएंगे, और उसमें store.js फाइल। फिर इस फाइल में हमें RTK से configureStore इम्पोर्ट करने की आवश्यकता है:

app/store.jsimport { configureStore } from '@reduxjs/toolkit'

इसके बाद एक खाली store बनाएं और कम से कम एक reducer पास करें:

app/store.jsexport default configureStore({
  reducer: {}
});

ताकि हमारे React components store के साथ काम कर सकें, हम निम्नलिखित करेंगे। हमारी main.jsx फाइल में जाएं, जिसमें पहले से ही कोड मौजूद है:

main.jsximport React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

इम्पोर्ट में हम पिछले चरण में बनाए गए store और Provider component की लाइनें जोड़ेंगे:

main.jsximport store from './app/store'
import { Provider } from 'react-redux'

इसके बाद हमारे मुख्य component App को Provider में लपेटेंगे, और prop के रूप में उसे store पास करेंगे:

main.jsx<React.StrictMode>
  <Provider store={store}>
    <App />
  </Provider>
</React.StrictMode>

और, अंत में, मुख्य React component App में निम्नलिखित कोड रखें:

App.jsxfunction App() {
  return <h2>This is my first Redux app!</h2>
}

export default App

हमारा प्रोजेक्ट फिर से चलाएं और ब्राउज़र की विंडो में देखें: 'This is my first Redux app!'। वैध reducer की कमी के बारे में चेतावनी पर अभी ध्यान न दें। आप सफल रहे, बधाई :)।