useCustomReducer Hook: Ein vielseitiges Statusverwaltungstool

Einführung

Die Zustandsverwaltung in React kann schwierig sein, insbesondere wenn es um komplexe oder verschachtelte Zustandsstrukturen geht. Um dies zu vereinfachen, kombiniert der useCustomReducer-Hook die Leistungsfähigkeit von useReducer mit einer flexiblen API zum Aktualisieren des Status auf saubere, deklarative Weise. Dieser Hook unterstützt primitive, verschachtelte und Array-Zustände und eignet sich daher für eine Vielzahl von Anwendungsfällen.

In diesem Artikel untersuchen wir den useCustomReducer-Hook und seine Kernmethoden zum Verwalten des Status in React-Anwendungen. Wir behandeln die Definition des Hooks, seine Methodensignaturen und detaillierte Anwendungsbeispiele für verschiedene Arten von Zustandsstrukturen. Am Ende verfügen Sie über ein solides Verständnis dafür, wie Sie den useCustomReducer-Hook verwenden, um komplexe Zustände in Ihren React-Komponenten zu verarbeiten.

 Inhaltsverzeichnis

• Einführung
• Inhaltsverzeichnis
• Hooks-Übersicht
• Beispiel für eine Reaktionskomponente
• Funktionen
• Definition
  • Methodendefinitionen
• Detaillierte Anwendungsbeispiele
  • Primitive verwalten
  • Formulardaten verwalten
  • Arrays verwalten
  • Verschachtelungsstatus verwalten
• Warum useCustomReducer verwenden?
• Fazit
• Zusätzliche Ressourcen

Hooks-Übersicht

Der useCustomReducer-Hook ist ein benutzerdefinierter React-Hook, der eine einfache und flexible Möglichkeit bietet, komplexe Zustandsstrukturen zu verwalten. Es kombiniert die Vorteile von useReducer mit einer sauberen API zum Aktualisieren von Statuswerten. Dieser Hook ist für die Verarbeitung verschiedener Zustandstypen konzipiert, darunter Grundwerte, Objekte, Arrays und verschachtelte Datenstrukturen.

Hier ist eine Übersicht über den useCustomReducer-Hook:

• Kernmethoden:

  • set: Zustandswerte direkt oder über eine Callback-Funktion aktualisieren.
  • Zurücksetzen: Zustand auf seinen Anfangswert zurücksetzen.
  • merge: Teilaktualisierungen in den bestehenden Zustand einbinden.

• Zustandsstrukturen: - Unterstützt primitive Werte (z. B. Zahlen, Zeichenfolgen, Boolesche Werte). - Verarbeitet objektbasierte Zustandsstrukturen (z. B. Formulardaten, Benutzerprofile). - Verwaltet Array-basierte Zustandsstrukturen (z. B. Listen, Sammlungen).

• Typsicher: - Vollständig typisiert mit TypeScript für zuverlässige Entwicklung und Fehlervermeidung.

• Einfache API: – Bietet intuitive Methoden zum Aktualisieren, Zurücksetzen und Zusammenführen von Statuswerten. - Unterstützt direkte Aktualisierungen und Rückruffunktionen für dynamische Statusänderungen.
  
  

import { useReducer, useCallback, useMemo } from "react";

type Primitive = boolean | string | number | Date | null | undefined;
type NestedObject = { [key: string]: Primitive | NestedObject | NestedArray };
type NestedArray = Array<primitive nestedobject>;

type State = Primitive | NestedObject | NestedArray;

type Action<t> =
  | { type: "SET"; payload: Partial<t> | ((prevState: T) => Partial<t>) }
  | { type: "RESET"; payload?: T }
  | { type: "MERGE"; payload: Partial<t> };

function useCustomReducer<t extends state>(initialState: T) {
  const reducer = useCallback(
    (state: T, action: Action<t>): T => {
      switch (action.type) {
        case "SET":
          const newPayload =
            typeof action.payload === "function"
              ? action.payload(state)
              : action.payload;
          if (newPayload instanceof Date) {
            return newPayload as T;
          }
          if (
            typeof state === "object" &&
            !Array.isArray(state) &&
            state !== null
          ) {
            return { ...state, ...newPayload };
          }
          return newPayload as T;
        case "RESET":
          return action.payload ?? initialState;
        case "MERGE":
          if (
            typeof state === "object" &&
            !Array.isArray(state) &&
            state !== null
          ) {
            return { ...state, ...action.payload };
          }
          return action.payload as T;
        default:
          throw new Error("Invalid action type");
      }
    },
    [initialState]
  );

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

  const set = useCallback(
    (payload: Partial<t> | ((prevState: T) => Partial<t>)) =>
      dispatch({ type: "SET", payload }),
    []
  );
  const reset = useCallback(
    (payload?: T) => dispatch({ type: "RESET", payload }),
    []
  );
  const merge = useCallback(
    (payload: Partial<t>) => dispatch({ type: "MERGE", payload }),
    []
  );

  const memoizedState = useMemo(() => state, [state]);

  return [memoizedState, { set, reset, merge }] as const;
}

export default useCustomReducer;
</t></t></t></t></t></t></t></t></t></primitive>

Der useCustomReducer-Hook wird mithilfe des useReducer-Hooks von React implementiert. Es definiert eine benutzerdefinierte Reduzierfunktion, die verschiedene Arten von Aktionen zum Aktualisieren, Zurücksetzen oder Zusammenführen von Statuswerten verarbeitet. Der Hook bietet drei Kernmethoden zum Festlegen, Zurücksetzen und Zusammenführen, um mit dem Status zu interagieren. Die Set-Methode kann entweder ein Objekt mit neuen Statuswerten oder eine Rückruffunktion akzeptieren, um den nächsten Status zu berechnen. Die Reset-Methode setzt den Zustand auf seinen Anfangswert zurück, während die Merge-Methode Teilaktualisierungen in den bestehenden Zustand einfügt.

Beispiel für eine Reaktionskomponente

Hier ist ein Beispiel für die Verwendung des useCustomReducer-Hooks in einer React-Komponente, um einen einfachen Zählerstatus zu verwalten:

import useCustomReducer from "./use-custom-reducer";
import { faker } from "@faker-js/faker";
import { Button } from "@/components/ui/button";

export default function Use() {
  const [formValues, { set, reset, merge }] = useCustomReducer({
    name: faker.person.firstName(),
    age: faker.number.int({ min: 18, max: 99 }),
    address: {
      street: faker.location.streetAddress(),
      city: faker.location.city(),
      state: faker.location.state(),
      zip: faker.location.zipCode(),
    },
    hobbies: [faker.person.bio(), faker.person.bio(), faker.person.bio()],
  });

  const [bool, { set: setBool }] = useCustomReducer<boolean>(
    faker.datatype.boolean()
  );
  const [num, { set: setNum }] = useCustomReducer(faker.number.int());
  const [str, { set: setStr }] = useCustomReducer<string>(faker.lorem.word());
  const [date, { set: setDate }] = useCustomReducer(faker.date.recent());
  const [nil, { set: setNil }] = useCustomReducer(null);
  const [undef, { set: setUndef }] = useCustomReducer(undefined);
  const [arr, { set: setArr }] = useCustomReducer([
    faker.number.int(),
    faker.number.int(),
    faker.number.int(),
  ]);
  const [nestedArr, { set: setNestedArr }] = useCustomReducer([
    faker.number.int(),
    faker.lorem.word(),
    { three: faker.number.float() },
  ]);

  const [obj, { set: setObj }] = useCustomReducer({
    a: faker.number.int(),
    b: faker.number.int(),
    c: faker.number.int(),
  });
  const [nestedObj, { set: setNestedObj }] = useCustomReducer({
    a: faker.number.int(),
    b: faker.lorem.word(),
    c: { three: faker.number.float() },
  });

  return (
    <div classname="p-4 space-y-6">
      <h1 id="Use">Use</h1>
      <div classname="space-x-2 space-y-2">
        <h2 id="Form-Values">Form Values</h2>
        <p classname="text-gray-500">{JSON.stringify(formValues)}</p>
        <button onclick="{()"> set({ name: faker.person.firstName() })}>
          Set Name
        </button>
        <button onclick="{()"> set((prevState) => ({ age: prevState.age - 1 }))}
        >
          Decrement Age
        </button>
        <button onclick="{()"> set((prevState) => ({ age: prevState.age + 1 }))}
        >
          Increment Age
        </button>
        <button onclick="{()">
            set((prevState) => ({
              address: {
                ...prevState.address,
                street: faker.location.streetAddress(),
              },
            }))
          }
        >
          Set Street
        </button>
        <button onclick="{()"> reset()}>Reset</button>
        <button onclick="{()"> merge({ age: faker.number.int({ min: 18, max: 99 }) })}
        >
          Merge
        </button>
      </div>
      <hr classname="border-t border-gray-300">
      <div classname="space-x-2 space-y-2">
        <h2 id="Boolean-Value">Boolean Value</h2>
        <p classname="text-gray-500">{bool.toString()}</p>
        <button onclick="{()"> setBool(faker.datatype.boolean())}>
          Set Bool
        </button>
      </div>
      <hr classname="border-t border-gray-300">
      <div classname="space-x-2 space-y-2">
        <h2 id="Number-Value">Number Value</h2>
        <p classname="text-gray-500">{num.toString()}</p>
        <button onclick="{()"> setNum(faker.number.int())}>Set Num</button>
      </div>
      <hr classname="border-t border-gray-300">
      <div classname="space-x-2 space-y-2">
        <h2 id="String-Value">String Value</h2>
        <p classname="text-gray-500">{str}</p>
        <button onclick="{()"> setStr(faker.lorem.word())}>Set Str</button>
      </div>
      <hr classname="border-t border-gray-300">
      <div classname="space-x-2 space-y-2">
        <h2 id="Date-Value">Date Value</h2>
        <p classname="text-gray-500">{JSON.stringify(date)}</p>
        <button onclick="{()"> setDate(faker.date.recent())}>Set Date</button>
        <button onclick="{()"> setDate(new Date("2022-01-01"))}>
          Set Date to 2022
        </button>
      </div>
      <hr classname="border-t border-gray-300">
      <div classname="space-x-2 space-y-2">
        <h2 id="Nil-and-Undefined">Nil and Undefined</h2>
        <p classname="text-gray-500">{String(nil)}</p>
        <button onclick="{()"> setNil(null)}>Set Nil</button>
        <p classname="text-gray-500">{String(undef)}</p>
        <button onclick="{()"> setUndef(undefined)}>Set Undef</button>
      </div>
      <hr classname="border-t border-gray-300">
      <div classname="space-x-2 space-y-2">
        <h2 id="Array-Value">Array Value</h2>
        <p classname="text-gray-500">{arr.toString()}</p>
        <button onclick="{()">
            setArr([faker.number.int(), faker.number.int(), faker.number.int()])
          }
        >
          Set Arr
        </button>
      </div>
      <hr classname="border-t border-gray-300">
      <div classname="space-x-2 space-y-2">
        <h2 id="Nested-Array">Nested Array</h2>
        <p classname="text-gray-500">{JSON.stringify(nestedArr)}</p>
        <button onclick="{()">
            setNestedArr([
              faker.number.int(),
              faker.lorem.word(),
              { three: faker.number.float() },
            ])
          }
        >
          Set Nested Arr
        </button>
      </div>
      <hr classname="border-t border-gray-300">
      <div classname="space-x-2 space-y-2">
        <h2 id="Object-Value">Object Value</h2>
        <p classname="text-gray-500">{JSON.stringify(obj)}</p>
        <button onclick="{()">
            setObj({
              a: faker.number.int(),
              b: faker.number.int(),
              c: faker.number.int(),
            })
          }
        >
          Set Obj
        </button>
      </div>
      <hr classname="border-t border-gray-300">
      <div classname="space-x-2 space-y-2">
        <h2 id="Nested-Object">Nested Object</h2>
        <p classname="text-gray-500">{JSON.stringify(nestedObj)}</p>
        <button onclick="{()">
            setNestedObj({
              a: faker.number.int(),
              b: faker.lorem.word(),
              c: { three: faker.number.float() },
            })
          }
        >
          Set Nested Obj
        </button>
      </div>
    </div>
  );
}
</string></boolean>

Merkmale

• Unterstützt verschiedene Zustandsstrukturen: Behandelt Grundelemente, Objekte, Arrays und verschachtelte Datenstrukturen.

• Einfache API:

  • set: Zustandswerte direkt oder über einen Rückruf aktualisieren.
  • Zurücksetzen: Zustand auf seinen Anfangswert zurücksetzen.
  • merge: Teilaktualisierungen in den bestehenden Zustand einbinden.

• Typsicher: Vollständig typisiert mit TypeScript für zuverlässige Entwicklung.

Definition

Der useCustomReducer-Hook ist ein benutzerdefinierter React-Hook zur Verwaltung komplexer Zustände. Es bietet drei Kernmethoden zum Festlegen, Zurücksetzen und Zusammenführen, um primitive, verschachtelte und arraybasierte Zustandsstrukturen zu verarbeiten. Hier ist eine Aufschlüsselung des Hooks und seiner Methoden:

function useCustomReducer<t extends state>(
  initialState: T
): [
  T,
  {
    set: (payload: Partial<t> | ((prevState: T) => Partial<t>)) => void;
    reset: (payload?: T) => void;
    merge: (payload: Partial<t>) => void;
  }
];
</t></t></t></t>

Methodendefinitionen

• Satz
  • Aktualisiert den Status durch Ersetzen oder teilweises Aktualisieren seiner Eigenschaften.
  • Akzeptiert entweder:
  • Ein Objekt mit neuen Zustandswerten.
  • Eine Rückruffunktion (prevState) => Teilweise zur Berechnung des nächsten Zustands.

Beispiel

const [state, { set }] = useCustomReducer({ count: 0 });

set((prevState) => ({ count: prevState.count + 1 }));

• zurücksetzen
  • Setzt den Zustand auf den Anfangszustand oder einen angegebenen Wert zurück.
  • Akzeptiert eine optionale Nutzlast, um den Anfangszustand zu ersetzen.

Beispiel

reset(); // Resets to initial state.

reset({ name: "John", age: 25 }); // Resets to a new state.

• verschmelzen
  • Führt Teilaktualisierungen in den bestehenden Zustand ein.
  • Akzeptiert ein Objekt mit teilweisen Statusaktualisierungen.
  • Funktioniert nur für Objekte und verschachtelte Zustandsstrukturen.

Beispiel

merge({ city: "New York" }); // Adds or updates the 'city' field.

Detaillierte Anwendungsbeispiele

Der useCustomReducer-Hook ist vielseitig und kann zur Verwaltung verschiedener Arten von Zustandsstrukturen verwendet werden. Hier sind einige Beispiele, um die Verwendung mit verschiedenen Zustandstypen zu veranschaulichen:

 Primitive verwalten

• Nummer:

const initialState = 0;

const [count, { set, reset }] = useCustomReducer(initialState);

• Verwendung:

  • Erhöhen Sie die Anzahl:

  set((prevState) => prevState + 1);
  

  • Zurücksetzen auf den Ausgangszustand:

  reset();
  

  • Neuen Wert festlegen:

    set(10);
  

• Zeichenfolge:
  
  

const initialState = "Hello, World!";

const [message, { set, reset }] = useCustomReducer(initialState);

• Verwendung:

  • Aktualisieren Sie die Zeichenfolge:

  import { useReducer, useCallback, useMemo } from "react";
  
  type Primitive = boolean | string | number | Date | null | undefined;
  type NestedObject = { [key: string]: Primitive | NestedObject | NestedArray };
  type NestedArray = Array<primitive nestedobject>;
  
  type State = Primitive | NestedObject | NestedArray;
  
  type Action<t> =
    | { type: "SET"; payload: Partial<t> | ((prevState: T) => Partial<t>) }
    | { type: "RESET"; payload?: T }
    | { type: "MERGE"; payload: Partial<t> };
  
  function useCustomReducer<t extends state>(initialState: T) {
    const reducer = useCallback(
      (state: T, action: Action<t>): T => {
        switch (action.type) {
          case "SET":
            const newPayload =
              typeof action.payload === "function"
                ? action.payload(state)
                : action.payload;
            if (newPayload instanceof Date) {
              return newPayload as T;
            }
            if (
              typeof state === "object" &&
              !Array.isArray(state) &&
              state !== null
            ) {
              return { ...state, ...newPayload };
            }
            return newPayload as T;
          case "RESET":
            return action.payload ?? initialState;
          case "MERGE":
            if (
              typeof state === "object" &&
              !Array.isArray(state) &&
              state !== null
            ) {
              return { ...state, ...action.payload };
            }
            return action.payload as T;
          default:
            throw new Error("Invalid action type");
        }
      },
      [initialState]
    );
  
    const [state, dispatch] = useReducer(reducer, initialState);
  
    const set = useCallback(
      (payload: Partial<t> | ((prevState: T) => Partial<t>)) =>
        dispatch({ type: "SET", payload }),
      []
    );
    const reset = useCallback(
      (payload?: T) => dispatch({ type: "RESET", payload }),
      []
    );
    const merge = useCallback(
      (payload: Partial<t>) => dispatch({ type: "MERGE", payload }),
      []
    );
  
    const memoizedState = useMemo(() => state, [state]);
  
    return [memoizedState, { set, reset, merge }] as const;
  }
  
  export default useCustomReducer;
  </t></t></t></t></t></t></t></t></t></primitive>

  • Zurücksetzen auf den Ausgangszustand:

  import useCustomReducer from "./use-custom-reducer";
  import { faker } from "@faker-js/faker";
  import { Button } from "@/components/ui/button";
  
  export default function Use() {
    const [formValues, { set, reset, merge }] = useCustomReducer({
      name: faker.person.firstName(),
      age: faker.number.int({ min: 18, max: 99 }),
      address: {
        street: faker.location.streetAddress(),
        city: faker.location.city(),
        state: faker.location.state(),
        zip: faker.location.zipCode(),
      },
      hobbies: [faker.person.bio(), faker.person.bio(), faker.person.bio()],
    });
  
    const [bool, { set: setBool }] = useCustomReducer<boolean>(
      faker.datatype.boolean()
    );
    const [num, { set: setNum }] = useCustomReducer(faker.number.int());
    const [str, { set: setStr }] = useCustomReducer<string>(faker.lorem.word());
    const [date, { set: setDate }] = useCustomReducer(faker.date.recent());
    const [nil, { set: setNil }] = useCustomReducer(null);
    const [undef, { set: setUndef }] = useCustomReducer(undefined);
    const [arr, { set: setArr }] = useCustomReducer([
      faker.number.int(),
      faker.number.int(),
      faker.number.int(),
    ]);
    const [nestedArr, { set: setNestedArr }] = useCustomReducer([
      faker.number.int(),
      faker.lorem.word(),
      { three: faker.number.float() },
    ]);
  
    const [obj, { set: setObj }] = useCustomReducer({
      a: faker.number.int(),
      b: faker.number.int(),
      c: faker.number.int(),
    });
    const [nestedObj, { set: setNestedObj }] = useCustomReducer({
      a: faker.number.int(),
      b: faker.lorem.word(),
      c: { three: faker.number.float() },
    });
  
    return (
      <div classname="p-4 space-y-6">
        <h1 id="Use">Use</h1>
        <div classname="space-x-2 space-y-2">
          <h2 id="Form-Values">Form Values</h2>
          <p classname="text-gray-500">{JSON.stringify(formValues)}</p>
          <button onclick="{()"> set({ name: faker.person.firstName() })}>
            Set Name
          </button>
          <button onclick="{()"> set((prevState) => ({ age: prevState.age - 1 }))}
          >
            Decrement Age
          </button>
          <button onclick="{()"> set((prevState) => ({ age: prevState.age + 1 }))}
          >
            Increment Age
          </button>
          <button onclick="{()">
              set((prevState) => ({
                address: {
                  ...prevState.address,
                  street: faker.location.streetAddress(),
                },
              }))
            }
          >
            Set Street
          </button>
          <button onclick="{()"> reset()}>Reset</button>
          <button onclick="{()"> merge({ age: faker.number.int({ min: 18, max: 99 }) })}
          >
            Merge
          </button>
        </div>
        <hr classname="border-t border-gray-300">
        <div classname="space-x-2 space-y-2">
          <h2 id="Boolean-Value">Boolean Value</h2>
          <p classname="text-gray-500">{bool.toString()}</p>
          <button onclick="{()"> setBool(faker.datatype.boolean())}>
            Set Bool
          </button>
        </div>
        <hr classname="border-t border-gray-300">
        <div classname="space-x-2 space-y-2">
          <h2 id="Number-Value">Number Value</h2>
          <p classname="text-gray-500">{num.toString()}</p>
          <button onclick="{()"> setNum(faker.number.int())}>Set Num</button>
        </div>
        <hr classname="border-t border-gray-300">
        <div classname="space-x-2 space-y-2">
          <h2 id="String-Value">String Value</h2>
          <p classname="text-gray-500">{str}</p>
          <button onclick="{()"> setStr(faker.lorem.word())}>Set Str</button>
        </div>
        <hr classname="border-t border-gray-300">
        <div classname="space-x-2 space-y-2">
          <h2 id="Date-Value">Date Value</h2>
          <p classname="text-gray-500">{JSON.stringify(date)}</p>
          <button onclick="{()"> setDate(faker.date.recent())}>Set Date</button>
          <button onclick="{()"> setDate(new Date("2022-01-01"))}>
            Set Date to 2022
          </button>
        </div>
        <hr classname="border-t border-gray-300">
        <div classname="space-x-2 space-y-2">
          <h2 id="Nil-and-Undefined">Nil and Undefined</h2>
          <p classname="text-gray-500">{String(nil)}</p>
          <button onclick="{()"> setNil(null)}>Set Nil</button>
          <p classname="text-gray-500">{String(undef)}</p>
          <button onclick="{()"> setUndef(undefined)}>Set Undef</button>
        </div>
        <hr classname="border-t border-gray-300">
        <div classname="space-x-2 space-y-2">
          <h2 id="Array-Value">Array Value</h2>
          <p classname="text-gray-500">{arr.toString()}</p>
          <button onclick="{()">
              setArr([faker.number.int(), faker.number.int(), faker.number.int()])
            }
          >
            Set Arr
          </button>
        </div>
        <hr classname="border-t border-gray-300">
        <div classname="space-x-2 space-y-2">
          <h2 id="Nested-Array">Nested Array</h2>
          <p classname="text-gray-500">{JSON.stringify(nestedArr)}</p>
          <button onclick="{()">
              setNestedArr([
                faker.number.int(),
                faker.lorem.word(),
                { three: faker.number.float() },
              ])
            }
          >
            Set Nested Arr
          </button>
        </div>
        <hr classname="border-t border-gray-300">
        <div classname="space-x-2 space-y-2">
          <h2 id="Object-Value">Object Value</h2>
          <p classname="text-gray-500">{JSON.stringify(obj)}</p>
          <button onclick="{()">
              setObj({
                a: faker.number.int(),
                b: faker.number.int(),
                c: faker.number.int(),
              })
            }
          >
            Set Obj
          </button>
        </div>
        <hr classname="border-t border-gray-300">
        <div classname="space-x-2 space-y-2">
          <h2 id="Nested-Object">Nested Object</h2>
          <p classname="text-gray-500">{JSON.stringify(nestedObj)}</p>
          <button onclick="{()">
              setNestedObj({
                a: faker.number.int(),
                b: faker.lorem.word(),
                c: { three: faker.number.float() },
              })
            }
          >
            Set Nested Obj
          </button>
        </div>
      </div>
    );
  }
  </string></boolean>

• Boolescher Wert:
  
  

function useCustomReducer<t extends state>(
  initialState: T
): [
  T,
  {
    set: (payload: Partial<t> | ((prevState: T) => Partial<t>)) => void;
    reset: (payload?: T) => void;
    merge: (payload: Partial<t>) => void;
  }
];
</t></t></t></t>

• Verwendung:

  • Booleschen Wert umschalten:

  const [state, { set }] = useCustomReducer({ count: 0 });
  
  set((prevState) => ({ count: prevState.count + 1 }));
  

  • Zurücksetzen auf den Ausgangszustand:

  reset(); // Resets to initial state.
  
  reset({ name: "John", age: 25 }); // Resets to a new state.
  

  • Neuen Wert festlegen:

  merge({ city: "New York" }); // Adds or updates the 'city' field.
  

• Datum:
  
  

const initialState = 0;

const [count, { set, reset }] = useCustomReducer(initialState);

• Verwendung:

  • Datum aktualisieren:

  set((prevState) => prevState + 1);
  

  • Zurücksetzen auf den Ausgangszustand:

  reset();
  

  • Neuen Wert festlegen:

    set(10);
  

• Null- und undefinierte Zustände:
  
  

const initialState = "Hello, World!";

const [message, { set, reset }] = useCustomReducer(initialState);

• Verwendung:

  • Neuen Wert festlegen:

  set("Hello, React!");
  

  • Zurücksetzen auf den Ausgangszustand:

  reset();
  

  • Neuen Wert festlegen:

  const initialState = false;
  
  const [isToggled, { set, reset }] = useCustomReducer(initialState);
  

Formulardaten verwalten

• Ausgangszustand:

set((prevState) => !prevState);

• Verwendung:

  • Neuen Namen festlegen:

  reset();
  

  • Adresse teilweise aktualisieren:

    set(true);
  

  • Neuen Namen festlegen:

  const initialState = new Date();
  
  const [date, { set, reset }] = useCustomReducer(initialState);
  

  • Aktualisieren Sie die Stadt:

  set(new Date("2022-01-01"));
  

  • Zusätzliche Felder zusammenführen:

  reset();
  

  • Zurücksetzen auf den Ausgangszustand:

  set(new Date("2023-01-01"));
  

Arrays verwalten

• Ausgangszustand:

const initialState: string | null = null;
const initialState: string | undefined = undefined;

const [value, { set, reset }] = useCustomReducer(initialState); // Implicitly infer the type.
const [value, { set, reset }] = useCustomReducer<string undefined>(
  initialState
); // Explicitly define the type.
</string>

• Verwendung:

  • Neues Element hinzufügen:

  set("New Value");
  

  • Ein Element entfernen:

  reset();
  

  • Zurücksetzen auf den Ausgangszustand:

  set("New Value");
  

  • Neuen Wert festlegen:

  const initialState = {
    name: "John Doe",
    age: 30,
    address: {
      street: "123 Main St",
      city: "Sample City",
      state: "CA",
    },
  };
  
  const [formData, { set, reset, merge }] = useCustomReducer(initialState);
  

  • Zusätzliche Elemente zusammenführen:

  set({ name: "Jane Doe" });
  

• Anfangszustand für verschachtelte Arrays:
  
  

set((prevState) => ({
  address: {
    ...prevState.address,
    city: "New City",
  },
}));

• Verwendung:

  • Neuen Benutzer hinzufügen:

  set({ name: "Jane Doe" });
  

  • Einen Benutzer entfernen:

  merge({ address: { city: "New York" } });
  

  • Zurücksetzen auf den Ausgangszustand:

  merge({ phone: "123-456-7890" });
  

  • Neuen Wert festlegen:

  reset();
  

  • Zusätzliche Benutzer zusammenführen:

  const initialState = [1, 2, 3, 4, 5];
  
  const [numbers, { set, reset, merge }] = useCustomReducer(initialState);
  

Verwalten des verschachtelten Zustands

• Ausgangszustand:

set((prevState) => [...prevState, 6]);

• Verwendung:

  • Alter des Benutzers aktualisieren:

  set((prevState) => prevState.filter((item) => item !== 3));
  

  • Aktualisieren Sie die Stadt:

  reset();
  

  • Zurücksetzen auf den Ausgangszustand:

    set([10, 20, 30]);
  

  • Neuen Wert festlegen:

    merge([6, 7, 8]);
  

Warum useCustomReducer verwenden?

• Flexibles Zustandsmanagement:

  • Unterstützt verschiedene Zustandsstrukturen und eignet sich daher für verschiedene Anwendungsfälle.
  • Verarbeitet problemlos primitive, verschachtelte und Array-basierte Zustände.
  • Stellt Methoden zum Aktualisieren, Zurücksetzen und Zusammenführen von Statuswerten bereit.

• Einfache API:

  • Bietet intuitive Methoden zum Aktualisieren, Zurücksetzen und Zusammenführen von Werten.
  • Unterstützt direkte Aktualisierungen und Rückruffunktionen für dynamische Statusänderungen.
  • Bietet eine saubere und deklarative Möglichkeit, den Status in React-Komponenten zu verwalten.

• Cleaner-Code:

  • Reduziert den Boilerplate-Code durch effiziente Handhabung komplexer Zustandsstrukturen.
  • Vermeiden Sie sich wiederholende useState-Deklarationen und verarbeiten Sie komplexe Zustände direkt.
  • Verwalten Sie alle Zustandstypen (primitiv, Objekt, Array usw.) mit einem Hook.

• Typsicher:

  • Vollständig typisiert mit TypeScript für zuverlässige Entwicklung und Fehlervermeidung.

• Dynamische Updates:

  • Verwenden Sie die Set-Methode mit Funktionen, um den nächsten Zustand dynamisch zu berechnen.

Abschluss

Der useCustomReducer-Hook ist ein leistungsstarkes Tool zum Verwalten komplexer Zustandsstrukturen in React-Anwendungen. Durch die Kombination der Flexibilität von useReducer mit einer einfachen API zum Aktualisieren des Status vereinfacht dieser Hook die Statusverwaltung und reduziert den Boilerplate-Code. Unabhängig davon, ob Sie mit primitiven Werten, verschachtelten Objekten oder Arrays arbeiten, bietet der useCustomReducer-Hook eine saubere und deklarative Möglichkeit, Zustandsänderungen zu verarbeiten. Probieren Sie es bei Ihrem nächsten Projekt aus und erleben Sie ganz einfach die Vorteile einer vielseitigen Zustandsverwaltung.

Zusätzliche Ressourcen

• React Documentation
• TypeScript-Dokumentation
• Faker.js-Dokumentation

Das obige ist der detaillierte Inhalt vonuseCustomReducer Hook: Ein vielseitiges Statusverwaltungstool. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!