Pengurusan negeri dalam React boleh menjadi rumit, terutamanya apabila berurusan dengan struktur keadaan yang kompleks atau bersarang. Untuk memudahkan ini, cangkuk useCustomReducer menggabungkan kuasa useReducer dengan API fleksibel untuk mengemas kini keadaan dengan cara yang bersih dan deklaratif. Cangkuk ini menyokong keadaan primitif, bersarang dan tatasusunan, menjadikannya sesuai untuk pelbagai kes penggunaan.
Dalam artikel ini, kami akan meneroka cangkuk useCustomReducer dan kaedah terasnya untuk mengurus keadaan dalam aplikasi React. Kami akan merangkumi definisi cangkuk, tandatangan kaedahnya dan contoh penggunaan terperinci untuk jenis struktur keadaan yang berbeza. Pada akhirnya, anda akan mempunyai pemahaman yang kukuh tentang cara menggunakan cangkuk useCustomReducer untuk mengendalikan keadaan kompleks dalam komponen React anda.
Kail useCustomReducer ialah cangkuk React tersuai yang menyediakan cara yang mudah dan fleksibel untuk mengurus struktur keadaan yang kompleks. Ia menggabungkan faedah useReducer dengan API yang bersih untuk mengemas kini nilai keadaan. Cangkuk ini direka bentuk untuk mengendalikan pelbagai jenis keadaan, termasuk nilai primitif, objek, tatasusunan dan struktur data bersarang.
Berikut ialah gambaran keseluruhan cangkuk useCustomReducer:
Kaedah Teras:
Struktur Negeri: - Menyokong nilai primitif (cth., nombor, rentetan, boolean). - Mengendalikan struktur keadaan berasaskan objek (cth., data borang, profil pengguna). - Menguruskan struktur keadaan berasaskan tatasusunan (cth., senarai, koleksi).
Jenis-Selamat: - Ditaip sepenuhnya menggunakan TypeScript untuk pembangunan yang boleh dipercayai dan pencegahan ralat.
API Mudah: - Menyediakan kaedah intuitif untuk mengemas kini, menetapkan semula dan menggabungkan nilai keadaan. - Menyokong kemas kini terus dan fungsi panggil balik untuk perubahan keadaan dinamik.
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;
Cakuk useCustomReducer dilaksanakan menggunakan cangkuk useReducer daripada React. Ia mentakrifkan fungsi pengurang tersuai yang mengendalikan pelbagai jenis tindakan untuk mengemas kini, menetapkan semula atau menggabungkan nilai keadaan. Cangkuk menyediakan tiga kaedah teras yang ditetapkan, tetapkan semula dan cantum untuk berinteraksi dengan keadaan. Kaedah set boleh menerima sama ada objek dengan nilai keadaan baharu atau fungsi panggil balik untuk mengira keadaan seterusnya. Kaedah tetapan semula mengembalikan keadaan kepada nilai awalnya, manakala kaedah gabungan menggabungkan kemas kini separa ke dalam keadaan sedia ada.
Berikut ialah contoh menggunakan cangkuk useCustomReducer dalam komponen React untuk mengurus keadaan pembilang yang mudah:
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>
);
}
Menyokong Struktur Negeri Pelbagai: Mengendalikan primitif, objek, tatasusunan dan struktur data bersarang.
API Mudah:
Type-Safe: Ditaip sepenuhnya menggunakan TypeScript untuk pembangunan yang boleh dipercayai.
Kail useCustomReducer ialah cangkuk React tersuai untuk menguruskan keadaan kompleks. Ia menyediakan tiga kaedah teras yang ditetapkan, set semula dan cantum untuk mengendalikan struktur keadaan berasaskan primitif, bersarang dan tatasusunan. Berikut ialah pecahan mata kail dan kaedahnya:
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.
Kail useCustomReducer adalah serba boleh dan boleh digunakan untuk menguruskan pelbagai jenis struktur keadaan. Berikut ialah beberapa contoh untuk menunjukkan penggunaannya dengan jenis keadaan yang berbeza:
const initialState = 0;
const [count, { set, reset }] = useCustomReducer(initialState);
Penggunaan:
set((prevState) => prevState + 1);
reset();
set(10);
String:
const initialState = "Hello, World!";
const [message, { set, reset }] = useCustomReducer(initialState);
Penggunaan:
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>
);
}
Boolean:
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;
}
];
Penggunaan:
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.
Tarikh:
const initialState = 0;
const [count, { set, reset }] = useCustomReducer(initialState);
Penggunaan:
set((prevState) => prevState + 1);
reset();
set(10);
Keadaan Null dan Tidak Ditakrifkan:
const initialState = "Hello, World!";
const [message, { set, reset }] = useCustomReducer(initialState);
Penggunaan:
set("Hello, React!");
reset();
const initialState = false;
const [isToggled, { set, reset }] = useCustomReducer(initialState);
set((prevState) => !prevState);
Penggunaan:
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.
Penggunaan:
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" });
Keadaan Awal untuk Tatasusunan Bersarang:
set((prevState) => ({
address: {
...prevState.address,
city: "New City",
},
}));
Penggunaan:
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]);
Penggunaan:
set((prevState) => prevState.filter((item) => item !== 3));
reset();
set([10, 20, 30]);
merge([6, 7, 8]);
Pengurusan Negeri Fleksibel:
API Mudah:
Kod Pembersih:
Selamat Jenis:
Kemas Kini Dinamik:
Kait useCustomReducer ialah alat yang berkuasa untuk mengurus struktur keadaan kompleks dalam aplikasi React. Dengan menggabungkan fleksibiliti useReducer dengan API mudah untuk mengemas kini keadaan, cangkuk ini memudahkan pengurusan keadaan dan mengurangkan kod boilerplate. Sama ada anda berurusan dengan nilai primitif, objek bersarang atau tatasusunan, cangkuk useCustomReducer menyediakan cara yang bersih dan deklaratif untuk mengendalikan perubahan keadaan. Cubalah dalam projek anda yang seterusnya dan rasai manfaat pengurusan negeri serba boleh dengan mudah.
Atas ialah kandungan terperinci useCustomReducer Hook: Alat Pengurusan Negeri Serbaguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
nvidia geforce 940mx
Apakah peranan kumpulan pengguna kafka
Penandaan warna penapis pendua Excel
Bagaimana untuk menyelesaikan masalah yang pycharm tidak dapat mencari modul
Bagaimana untuk menyelesaikan ralat dalam skrip halaman semasa
Bagaimana untuk membayar balik Douyin yang dicas semula Doucoin
10 pertukaran mata wang teratas
lebar mengimbangi
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
