React useReducer Hook Example

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

ReactJS में useReducer hook एक ऐसा powerful hook है जो functional components में complex state management के लिए काम आता है।

जब state का structure complex हो और multiple actions को handle करना हो, तब useReducer का use state management को और भी organized और predictable बनाता है।

ये hook Redux के reducer pattern के similar काम करता है और functional components में भी एक robust state management solution provide करता है।

इस topic में हम देखेंगे कि useReducer hook क्या है, कैसे काम करता है और कैसे इसे अपने React applications में implement कर सकते हैं।

●●●

What is useReducer HookIn React ?

useReducer hook एक ऐसा hook है जो state और action dispatching के mechanism को handle करता है। ये hook state और उसके actions को एक specific function (reducer function) के अंदर define करता है।

जब कोई action dispatch होता है, तो reducer function उस action के according से state को update करता है और updated state को return करता है।

useReducer hook तब useful होता है जब -

• State complex होती है या उसमे multiple properties होती हैं।

• Multiple actions handle करने होते हैं।

• Redux का reducer pattern implement करना हो बिना external library के।

useReducer Hook Syntax

const [state, dispatch] = useReducer(reducer, initialState);

यहां

• state : ये current state को represent करता है।

• dispatch : ये एक function है जो action को dispatch करने के काम आता है।

• reducer : ये एक function है जो state और action को input के रूप में लेता है और new state को return करता है।

• initialState : ये initial state value होती है जो state के initial value को set करता है।

●●●

Basic useReducer Example In React

सबसे पहले हम एक simple counter का लेंगे जिसमे count को increment और decrement करने के actions हैं।

File : src/components/CounterReducer.js

Copy
import React, { useReducer } from 'react';

// Initial state
const initialState = { count: 0 };

// Reducer function
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function CounterReducer() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h2>Count: {state.count}</h2>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

export default CounterReducer;

Explanation

• initialState { count: 0 } के साथ define किया गया है।

• reducer() function state और action parameters को accept करता है और state को update करने के लिए action के type के according से काम करता है।

• dispatch का use करके हम increment और decrement actions को trigger करते हैं।

• जैसे ही action dispatch होता है, reducer function updated state को return करता है जो UI में render होता है।

●●●

React useReducer with Multiple Actions

अगर हमें complex actions handle करने हो तो हम useReducer के साथ multiple actions को define कर सकते हैं।

एक example के लिए हम एक shopping cart बनाते हैं जिसमे items को add और remove किया जाता है।

File : src/components/ShoppingCart.js

Copy
import React, { useReducer } from 'react';

// Initial state
const initialState = {
  cart: []
};

// Reducer function
function reducer(state, action) {
  switch (action.type) {
    case 'addItem':
      return { ...state, cart: [...state.cart, action.item] };
    case 'removeItem':
      return { ...state, cart: state.cart.filter((item) => item.id !== action.id) };
    case 'clearCart':
      return initialState;
    default:
      return state;
  }
}

function ShoppingCart() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const addItem = (item) => {
    dispatch({ type: 'addItem', item });
  };

  const removeItem = (id) => {
    dispatch({ type: 'removeItem', id });
  };

  return (
    <div>
      <h2>Shopping Cart</h2>
      <button onClick={() => addItem({ id: 1, name: 'Product 1' })}>Add Product 1</button>
      <button onClick={() => addItem({ id: 2, name: 'Product 2' })}>Add Product 2</button>
      <button onClick={() => dispatch({ type: 'clearCart' })}>Clear Cart</button>

      <h3>Cart Items:</h3>
      <ul>
        {state.cart.map((item) => (
          <li key={item.id}>
            {item.name} <button onClick={() => removeItem(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ShoppingCart;

Explanation

• initialState में cart array empty है।

• reducer function addItem, removeItem, और clearCart actions को handle करता है।

• addItem action में एक नया item cart में add होता है।

• removeItem action में specified item को cart से remove किया जाता है।

• clearCart action cart को empty करता है।

●●●

Difference Between useReducer and useState

1. Complex State Management : useReducer complex state और multiple state transitions को handle करने के लिए ज़्यादा suitable है, जबकि useState simpler state cases के लिए best है।

2. Predictability : useReducer का reducer pattern state management को predictable और organized बनाता है, जो Redux जैसी library का basic concept है।

3. Dispatching Actions : useReducer actions को dispatch करने का option देता है जो state transitions को और भी controlled और manageable बनाता है।

●●●

Happy coding! 🎉