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.
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:
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;
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.
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 className="text-2xl font-bold">Use</h1>
<div className="space-x-2 space-y-2">
<h2 className="text-lg font-semibold">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 className="text-lg font-semibold">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 className="text-lg font-semibold">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 className="text-lg font-semibold">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 className="text-lg font-semibold">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 className="text-lg font-semibold">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 className="text-lg font-semibold">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 className="text-lg font-semibold">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 className="text-lg font-semibold">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 className="text-lg font-semibold">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>
);
}
Unterstützt verschiedene Zustandsstrukturen: Behandelt Grundelemente, Objekte, Arrays und verschachtelte Datenstrukturen.
Einfache API:
Typsicher: Vollständig typisiert mit TypeScript für zuverlässige Entwicklung.
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;
}
];
const [state, { set }] = useCustomReducer({ count: 0 });
set((prevState) => ({ count: prevState.count + 1 }));
reset(); // Resets to initial state.
reset({ name: "John", age: 25 }); // Resets to a new state.
merge({ city: "New York" }); // Adds or updates the 'city' field.
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:
const initialState = 0;
const [count, { set, reset }] = useCustomReducer(initialState);
Verwendung:
set((prevState) => prevState + 1);
reset();
set(10);
Zeichenfolge:
const initialState = "Hello, World!";
const [message, { set, reset }] = useCustomReducer(initialState);
Verwendung:
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;
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 className="text-2xl font-bold">Use</h1>
<div className="space-x-2 space-y-2">
<h2 className="text-lg font-semibold">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 className="text-lg font-semibold">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 className="text-lg font-semibold">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 className="text-lg font-semibold">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 className="text-lg font-semibold">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 className="text-lg font-semibold">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 className="text-lg font-semibold">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 className="text-lg font-semibold">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 className="text-lg font-semibold">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 className="text-lg font-semibold">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>
);
}
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;
}
];
Verwendung:
const [state, { set }] = useCustomReducer({ count: 0 });
set((prevState) => ({ count: prevState.count + 1 }));
reset(); // Resets to initial state.
reset({ name: "John", age: 25 }); // Resets to a new state.
merge({ city: "New York" }); // Adds or updates the 'city' field.
Datum:
const initialState = 0;
const [count, { set, reset }] = useCustomReducer(initialState);
Verwendung:
set((prevState) => prevState + 1);
reset();
set(10);
Null- und undefinierte Zustände:
const initialState = "Hello, World!";
const [message, { set, reset }] = useCustomReducer(initialState);
Verwendung:
set("Hello, React!");
reset();
const initialState = false;
const [isToggled, { set, reset }] = useCustomReducer(initialState);
set((prevState) => !prevState);
Verwendung:
reset();
set(true);
const initialState = new Date();
const [date, { set, reset }] = useCustomReducer(initialState);
set(new Date("2022-01-01"));
reset();
set(new Date("2023-01-01"));
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.
Verwendung:
set("New Value");
reset();
set("New Value");
const initialState = {
name: "John Doe",
age: 30,
address: {
street: "123 Main St",
city: "Sample City",
state: "CA",
},
};
const [formData, { set, reset, merge }] = useCustomReducer(initialState);
set({ name: "Jane Doe" });
Anfangszustand für verschachtelte Arrays:
set((prevState) => ({
address: {
...prevState.address,
city: "New City",
},
}));
Verwendung:
set({ name: "Jane Doe" });
merge({ address: { city: "New York" } });
merge({ phone: "123-456-7890" });
reset();
const initialState = [1, 2, 3, 4, 5];
const [numbers, { set, reset, merge }] = useCustomReducer(initialState);
set((prevState) => [...prevState, 6]);
Verwendung:
set((prevState) => prevState.filter((item) => item !== 3));
reset();
set([10, 20, 30]);
merge([6, 7, 8]);
Flexibles Zustandsmanagement:
Einfache API:
Cleaner-Code:
Typsicher:
Dynamische Updates:
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.
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!
nvidia geforce 940mx
Welche Rolle spielt die Kafka-Verbrauchergruppe?
Excel-Duplikatfilter-Farbmarkierung
So lösen Sie das Problem, dass Pycharm das Modul nicht finden kann
So beheben Sie einen Fehler im Skript der aktuellen Seite
So erstatten Sie den von Douyin aufgeladenen Doucoin zurück
Top 10 Währungsbörsen
Offsetbreite
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
