Beim Erstellen von React-Anwendungen ist es oft von Vorteil, den Status in der URL wiederzugeben. Dies macht den Status nicht nur gemeinsam nutzbar, sondern ermöglicht es Benutzern auch, Seiten mit Lesezeichen zu versehen oder zu aktualisieren, ohne dass der Kontext verloren geht. In diesem Beitrag erstellen wir einen benutzerdefinierten React-Hook namens useParamState in TypeScript. Dieser Hook funktioniert wie useState, synchronisiert jedoch auch den Status mit den Suchparametern in der URL. Wichtig ist, dass es komplexe Objektwerte unterstützt.

Warum ParamState verwenden?

Der useSearchParams-Hook von React Router eignet sich hervorragend zum Verwalten von URL-Suchparametern, ihre Synchronisierung mit dem Komponentenstatus kann jedoch umständlich sein. Der useParamState-Hook behebt dies durch:

• Bereitstellung einer einfachen API ähnlich wie useState.
• Status wird automatisch mit den URL-Suchparametern synchronisiert.
• Unterstützung komplexer Typen, einschließlich Objekten.

Voraussetzungen

• Grundlegendes Verständnis von React, TypeScript und React Router.
• Vertrautheit mit useState und useEffect.

UseParamState implementieren

Schritt 1: Einrichten des Projekts

( Dies setzt voraus, dass Sie bereits wissen, wie man ein Reaktionsprojekt einrichtet. Wenn nicht, gehen Sie zu Vite)

Stellen Sie sicher, dass Sie „react-router-dom“ installiert haben:

npm install react-router-dom

Schritt 2: Der useParamState-Hook

So können Sie den useParamState-Hook implementieren:

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;

Wie es funktioniert

Initialisierung:

Der Hook prüft zunächst, ob der angegebene Suchparameter in der URL vorhanden ist. Wenn dies der Fall ist, analysiert der Hook es und verwendet es als Anfangszustand. Andernfalls wird auf den bereitgestellten Standardwert zurückgegriffen.

Statusaktualisierung:

Die Funktion setParamState aktualisiert sowohl den internen Status als auch den Suchparameter in der URL. Es verwendet JSON.stringify, um den Status zu serialisieren, sodass wir komplexe Objekte in der URL speichern können.

Typunterstützung:

Der Hook unterstützt verschiedene Typen (String, Zahl, Boolescher Wert und Objekt), indem er die Generics von TypeScript und die JSON-Analyse nutzt.

Schritt 3: Verwenden von useParamState

Sehen wir uns an, wie Sie useParamState in einer React-Komponente verwenden können:

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;

Schritt 4: Testen des Hakens

Um sicherzustellen, dass der useParamState-Hook wie erwartet funktioniert, können Sie Unit-Tests mit @testing-library/react schreiben:

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' });
});

Abschluss

Der useParamState-Hook vereinfacht die Synchronisierung des Status mit URL-Suchparametern und macht Ihre React-Anwendungen robuster und benutzerfreundlicher. Durch die Unterstützung komplexer Typen wie Objekte ist dieser Hook ein leistungsstarkes Tool zum Verwalten des Status, der über das erneute Laden von Seiten hinweg bestehen bleiben oder über URLs geteilt werden muss.

Sie können diesen Hook weiter erweitern, um noch komplexere Datenstrukturen zu verarbeiten, aber für die meisten Anwendungsfälle wird diese Implementierung Ihre Anforderungen abdecken.

( Kommentieren Sie den Artikel, damit ich ihn verbessern und eventuelle Fehler korrigieren kann. Vielen Dank im Voraus. )

Folgen Sie mir auch gerne auf anderen Plattformen

• Linkedin

• Github

• Instagram