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

React एप्लिकेशन में Redux के साथ TypeScript को एकीकृत करने से टाइप सुरक्षा बढ़ती है और कोड रखरखाव में सुधार होता है। यह गाइड Redux के साथ TypeScript को सेट अप करने, प्रकारों को परिभाषित करने और React घटकों के साथ एकीकृत करने सहित सभी जानकारी प्रदान करता है।

चरण 1: निर्भरताएँ स्थापित करें

सबसे पहले, Redux, React-Redux और TypeScript प्रकारों के लिए आवश्यक पैकेज स्थापित करें।

npm install redux react-redux @reduxjs/toolkit
npm install @types/react-redux --save-dev

चरण 2: Redux स्टोर सेट अप करें

TypeScript के साथ Redux स्टोर बनाएँ। स्टेट और एक्शन के लिए प्रकार परिभाषित करें, और स्टोर को कॉन्फ़िगर करें।

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

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

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

export default store;

चरण 3: क्रियाएँ और रिड्यूसर परिभाषित करें

एक्शन प्रकार, एक्शन क्रिएटर और रिड्यूसर बनाएँ। मज़बूत टाइपिंग के लिए स्टेट और एक्शन प्रकार को परिभाषित करने के लिए TypeScript का उपयोग करें।

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface CounterState {
  value: number;
}

const initialState: CounterState = {
  value: 0,
};

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

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

चरण 4: Redux को React Components से कनेक्ट करें

React घटकों में Redux स्थिति और प्रेषण क्रियाओं को जोड़ने के लिए React-Redux से useSelector और useDispatch हुक का उपयोग करें।

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState, AppDispatch } from './store';
import { increment, decrement, incrementByAmount } from './counterSlice';

const Counter: React.FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  const count = useSelector((state: RootState) => state.counter.value);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(10))}>Increment by 10</button>
    </div>
  );
};

export default Counter;

चरण 5: Redux स्टोर को React के साथ एकीकृत करें

Redux स्टोर को एप्लिकेशन में पास करने के लिए React-Redux से Provider घटक के साथ मुख्य React घटक को लपेटें।

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

निष्कर्ष

React एप्लिकेशन में Redux के साथ TypeScript का उपयोग करने से मजबूत टाइपिंग मिलती है और कोड की विश्वसनीयता बढ़ती है। इन चरणों का पालन करके, Redux स्टोर को TypeScript के साथ सेट किया जा सकता है, एक्शन और रिड्यूसर परिभाषित किए जा सकते हैं, और Redux को React घटकों के साथ एकीकृत किया जा सकता है।