ReactJS useReducer Hook Hinglish

Created By Canva

React mein state management ek important part hai, aur useReducer hook ismein madad karta hai, khaaskar jab aapka state complex hota hai aur usme kai tarah ke actions hote hain. Is article mein hum useReducer hook ke baare mein aur uska istemal kaise karein, us par detail me baat karenge.

Sabse pehle, useReducer hook kya hai? Ye hook state management ko sambhalne ke liye ek mechanism provide karta hai, jo React mein bahut hi helpful hota hai ye state management. Ye Redux jaise centralized state management ka ek lightweight alternative hai.

useReducer Hook Ka Istemal

useReducer hook ka istemal karne ke liye, humein ek reducer function aur ek initial state provide karna hota hai. useReducer (reducerFun,initialState). Reducer function ek action aur current state ko lekar naya state return karta hai. Initial state wo state hota hai jo humara component ke shuruaati state hota hai.

Chaliye ek simple example dekhte hain jisme hum ek counter ka state manage karte hain:

import React, { useReducer } from 'react';

// State type
type State = {
  count: number;
};

// Action type
type Action = { type: string };

// Reducer function
//hamesha state return krega
const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  // Initial state
  const initialState: State = { count: 0 };

  // useReducer hook ka istemal
  const [state, dispatch] = useReducer(reducer, initialState);

//dispatch ke help se reducer ko (call krke) action bhej kar 
// state get krta hai
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
};

export default Counter;

Is example mein, humne useReducer hook ka istemal karke ek counter ka state manage kiya hai. Jab hum button par click karte hain, dispatch function ke through hum ek action ko invoke karte hain, jo humare reducer function ke dwara handle kiya jata hai aur state ko update karta hai.

useReducer hook ka istemal karke hum state management ko organized aur maintainable bana sakte hain, khaaskar jab humare component ka state complex hota hai aur usme kai actions hote hain.

Umeed hai aapko yeh article pasand aaya hoga aur aap useReducer hook ko apne React projects mein istemal karke state management ko behtar bana payenge.

Keep Learning .