रिएक्ट एप्लिकेशन बनाते समय, यूआरएल में स्थिति को प्रतिबिंबित करना अक्सर फायदेमंद होता है। यह न केवल स्थिति को साझा करने योग्य बनाता है बल्कि उपयोगकर्ताओं को अपना संदर्भ खोए बिना पृष्ठों को बुकमार्क करने या ताज़ा करने की भी अनुमति देता है। इस पोस्ट में, हम टाइपस्क्रिप्ट में useParamState नामक एक कस्टम रिएक्ट हुक बनाएंगे। यह हुक यूज़स्टेट की तरह काम करेगा, लेकिन यह यूआरएल में खोज पैरामीटर के साथ राज्य को भी सिंक करेगा। महत्वपूर्ण बात यह है कि यह जटिल वस्तु मूल्यों का समर्थन करेगा।

पैरामस्टेट का उपयोग क्यों करें?

रिएक्ट राउटर का यूज़सर्चपैरम्स हुक यूआरएल खोज पैरामीटर को प्रबंधित करने के लिए उत्कृष्ट है, लेकिन उन्हें घटक स्थिति के साथ समन्वयित करना बोझिल हो सकता है। यूज़परमस्टेट हुक इसे इस प्रकार संबोधित करता है:

• useState के समान एक सरल एपीआई प्रदान करना।
• यूआरएल खोज पैरामीटर के साथ स्वचालित रूप से समन्वयित स्थिति।
• वस्तुओं सहित जटिल प्रकारों का समर्थन करना।

आवश्यक शर्तें

• रिएक्ट, टाइपस्क्रिप्ट और रिएक्ट राउटर की बुनियादी समझ।
• यूजस्टेट और यूजइफेक्ट से परिचित।

उपयोगParamState को कार्यान्वित करना

चरण 1: परियोजना की स्थापना

(इसका मतलब है कि आप पहले से ही जानते हैं कि रिएक्ट प्रोजेक्ट कैसे सेट करना है, यदि आप Vite पर नहीं गए हैं)

सुनिश्चित करें कि आपने प्रतिक्रिया-राउटर-डोम स्थापित किया है:

npm install react-router-dom

चरण 2: पैरामस्टेट हुक का उपयोग करें

यहां बताया गया है कि आप यूज़परमस्टेट हुक को कैसे कार्यान्वित कर सकते हैं:

import { useCallback, useState } from 'react';
import { useSearchParams } from 'react-router-dom';

/**
 * A custom hook that syncs state with a URL search parameter.
 * Supports string, number, boolean, and object values.
 * @param key The search parameter key to sync with.
 * @param defaultValue The default value for the state.
 * @returns A stateful value, and a function to update it.
 */
function useParamState(
  key: string,
  defaultValue: T
): [T, (newValue: Partial | T) => void] {
  const [searchParams, setSearchParams] = useSearchParams();
  const paramValue = searchParams.get(key);

  const [state, setState] = useState(() => {
    if (paramValue === null) {
      return defaultValue;
    }
    try {
      return JSON.parse(paramValue) as T;
    } catch {
      return paramValue as T;
    }
  });

  const setParamState = useCallback(
    (newValue: Partial | T) => {
      const updatedValue = typeof newValue === 'object' && !Array.isArray(newValue)
        ? { ...state, ...newValue }
        : newValue;

      setState(updatedValue as T);
      const newSearchParams = new URLSearchParams(searchParams);
      newSearchParams.set(key, JSON.stringify(updatedValue));
      setSearchParams(newSearchParams);
    },
    [key, searchParams, setSearchParams, state]
  );

  return [state, setParamState];
}

export default useParamState;

यह काम किस प्रकार करता है

आरंभीकरण:

हुक यह जांच कर शुरू होता है कि यूआरएल में निर्दिष्ट खोज पैरामीटर मौजूद है या नहीं। यदि ऐसा होता है, तो हुक इसे पार्स करता है और इसे प्रारंभिक स्थिति के रूप में उपयोग करता है। अन्यथा, यह वापस दिए गए defaultValue पर आ जाता है।

राज्य अद्यतन:

setParamState फ़ंक्शन URL में आंतरिक स्थिति और खोज पैरामीटर दोनों को अपडेट करता है। यह स्थिति को क्रमबद्ध करने के लिए JSON.stringify का उपयोग करता है, जिससे हमें URL में जटिल ऑब्जेक्ट संग्रहीत करने की अनुमति मिलती है।

समर्थन प्रकार:

हुक टाइपस्क्रिप्ट के जेनरिक और JSON पार्सिंग का लाभ उठाकर विभिन्न प्रकारों (स्ट्रिंग, संख्या, बूलियन और ऑब्जेक्ट) का समर्थन करता है।

चरण 3: यूज़पैरामस्टेट का उपयोग करना

आइए देखें कि आप रिएक्ट घटक में यूज़परमस्टेट का उपयोग कैसे कर सकते हैं:

import React from 'react';
import useParamState from './useParamState';

interface FilterState {
  status: string;
  sortBy: string;
}

const MyComponent: React.FC = () => {
  const [filter, setFilter] = useParamState('filter', {
    status: 'all',
    sortBy: 'date',
  });

  return (
    

      
Current Filter: {filter.status}, Sort by: {filter.sortBy}
       setFilter({ status: 'active', sortBy: filter.sortBy })}>
        Active
      
       setFilter({ status: 'completed', sortBy: filter.sortBy })}>
        Completed
      
       setFilter({ ...filter, sortBy: 'priority' })}>
        Sort by Priority
      
    
  );
};

export default MyComponent;

चरण 4: हुक का परीक्षण

यह सुनिश्चित करने के लिए कि यूज़परमस्टेट हुक अपेक्षा के अनुरूप काम करता है, आप @testing-library/react का उपयोग करके यूनिट परीक्षण लिख सकते हैं:

import { renderHook, act } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import useParamState from './useParamState';

interface FilterState {
  status: string;
  sortBy: string;
}

test('should sync object state with search params', () => {
  const wrapper = ({ children }: { children: React.ReactNode }) => (
    {children}
  );

  const { result } = renderHook(() => useParamState('filter', { status: 'all', sortBy: 'date' }), { wrapper });

  // Initial state
  expect(result.current[0]).toEqual({ status: 'all', sortBy: 'date' });

  // Update state and URL
  act(() => {
    result.current[1]({ status: 'active', sortBy: 'priority' });
  });

  // Updated state
  expect(result.current[0]).toEqual({ status: 'active', sortBy: 'priority' });
});

निष्कर्ष

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

आप और भी अधिक जटिल डेटा संरचनाओं को संभालने के लिए इस हुक का विस्तार कर सकते हैं, लेकिन अधिकांश उपयोग के मामलों के लिए, यह कार्यान्वयन आपकी आवश्यकताओं को पूरा करेगा।

(लेख पर टिप्पणी करें ताकि मैं इसे बेहतर बना सकूं और जो भी गलतियां हुई हों उन्हें सुधार सकूं, अग्रिम धन्यवाद।)

बेझिझक मुझे अन्य प्लेटफार्मों पर भी फॉलो करें

• लिंक्डइन

• Github

• इंस्टाग्राम