La gestion de l'état dans React peut être délicate, en particulier lorsqu'il s'agit de structures d'état complexes ou imbriquées. Pour simplifier cela, le hook useCustomReducer combine la puissance de useReducer avec une API flexible pour mettre à jour l'état de manière propre et déclarative. Ce hook prend en charge les états primitifs, imbriqués et matriciels, ce qui le rend adapté à un large éventail de cas d'utilisation.
Dans cet article, nous explorerons le hook useCustomReducer et ses méthodes de base pour gérer l'état dans les applications React. Nous aborderons la définition du hook, ses signatures de méthode et des exemples d'utilisation détaillés pour différents types de structures d'état. À la fin, vous aurez une solide compréhension de la façon d'utiliser le hook useCustomReducer pour gérer les états complexes dans vos composants React.
Le hook useCustomReducer est un hook React personnalisé qui fournit un moyen simple et flexible de gérer des structures d'état complexes. Il combine les avantages de useReducer avec une API propre pour mettre à jour les valeurs d'état. Ce hook est conçu pour gérer différents types d'état, notamment les valeurs primitives, les objets, les tableaux et les structures de données imbriquées.
Voici un aperçu du hook useCustomReducer :
Méthodes de base :
Structures d'état : - Prend en charge les valeurs primitives (par exemple, les nombres, les chaînes, les booléens). - Gère les structures d'état basées sur les objets (par exemple, les données de formulaire, les profils utilisateur). - Gère les structures d'état basées sur des tableaux (par exemple, listes, collections).
Type-Safe : - Entièrement tapé à l'aide de TypeScript pour un développement fiable et une prévention des erreurs.
API simple : - Fournit des méthodes intuitives pour mettre à jour, réinitialiser et fusionner les valeurs d'état. - Prend en charge les mises à jour directes et les fonctions de rappel pour les changements d'état dynamiques.
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;
Le hook useCustomReducer est implémenté à l’aide du hook useReducer de React. Il définit une fonction de réduction personnalisée qui gère différents types d'actions pour mettre à jour, réinitialiser ou fusionner les valeurs d'état. Le hook fournit trois méthodes principales définies, réinitialisées et fusionnées pour interagir avec l'état. La méthode set peut accepter soit un objet avec de nouvelles valeurs d'état, soit une fonction de rappel pour calculer l'état suivant. La méthode de réinitialisation ramène l'état à sa valeur initiale, tandis que la méthode de fusion fusionne les mises à jour partielles dans l'état existant.
Voici un exemple d'utilisation du hook useCustomReducer dans un composant React pour gérer un état de compteur simple :
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>
);
}
Prend en charge diverses structures d'état : gère les primitives, les objets, les tableaux et les structures de données imbriquées.
API simple :
Type-Safe : entièrement typé à l'aide de TypeScript pour un développement fiable.
Le hook useCustomReducer est un hook React personnalisé pour gérer un état complexe. Il fournit trois méthodes principales : définir, réinitialiser et fusionner pour gérer les structures d'état primitives, imbriquées et basées sur des tableaux. Voici une description du hook et de ses méthodes :
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.
Le hook useCustomReducer est polyvalent et peut être utilisé pour gérer différents types de structures étatiques. Voici quelques exemples pour démontrer son utilisation avec différents types d'état :
const initialState = 0;
const [count, { set, reset }] = useCustomReducer(initialState);
Utilisation :
set((prevState) => prevState + 1);
reset();
set(10);
Chaîne :
const initialState = "Hello, World!";
const [message, { set, reset }] = useCustomReducer(initialState);
Utilisation :
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>
);
}
Booléen :
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;
}
];
Utilisation :
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.
Date :
const initialState = 0;
const [count, { set, reset }] = useCustomReducer(initialState);
Utilisation :
set((prevState) => prevState + 1);
reset();
set(10);
États nuls et non définis :
const initialState = "Hello, World!";
const [message, { set, reset }] = useCustomReducer(initialState);
Utilisation :
set("Hello, React!");
reset();
const initialState = false;
const [isToggled, { set, reset }] = useCustomReducer(initialState);
set((prevState) => !prevState);
Utilisation :
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.
Utilisation :
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" });
État initial des tableaux imbriqués :
set((prevState) => ({
address: {
...prevState.address,
city: "New City",
},
}));
Utilisation :
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]);
Utilisation :
set((prevState) => prevState.filter((item) => item !== 3));
reset();
set([10, 20, 30]);
merge([6, 7, 8]);
Gestion d'état flexible :
API simple :
Code du nettoyeur :
Type-Safe :
Mises à jour dynamiques :
Le hook useCustomReducer est un outil puissant pour gérer des structures d'état complexes dans les applications React. En combinant la flexibilité de useReducer avec une API simple pour mettre à jour l'état, ce hook simplifie la gestion de l'état et réduit le code passe-partout. Que vous ayez affaire à des valeurs primitives, des objets imbriqués ou des tableaux, le hook useCustomReducer fournit un moyen propre et déclaratif de gérer les changements d'état. Essayez-le dans votre prochain projet et découvrez facilement les avantages d'une gestion d'état polyvalente.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
nvidia geforce 940mx
Quel est le rôle du groupe de consommateurs Kafka
Marquage de couleur du filtre en double Excel
Comment résoudre le problème selon lequel pycharm ne trouve pas le module
Comment résoudre une erreur dans le script de la page actuelle
Comment rembourser Douyin rechargé Doucoin
Top 10 des bureaux de change
largeur de décalage
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
