useCustomReducer Hook: Alat Pengurusan Negeri Serbaguna

pengenalan

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.

 Jadual Kandungan

• Pengenalan
• Jadual Kandungan
• Ikhtisar Cangkuk
• Contoh Komponen Reaksi
• Ciri
• Definisi
  • Takrifan Kaedah
• Contoh Penggunaan Terperinci
  • Mengurus Primitif
  • Mengurus Data Borang
  • Mengurus Tatasusunan
  • Mengurus Negeri Bersarang
• Mengapa Gunakan useCustomReducer?
• Kesimpulan
• Sumber Tambahan

Gambaran Keseluruhan Hooks

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:

  • set: Kemas kini nilai keadaan secara langsung atau melalui fungsi panggil balik.
  • set semula: Kembalikan keadaan kepada nilai awalnya.
  • cantum: Cantumkan kemas kini separa ke dalam keadaan sedia ada.

• 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.

Contoh Komponen Reaksi

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

Ciri-ciri

• Menyokong Struktur Negeri Pelbagai: Mengendalikan primitif, objek, tatasusunan dan struktur data bersarang.

• API Mudah:

  • set: Kemas kini nilai keadaan secara terus atau melalui panggilan balik.
  • set semula: Kembalikan keadaan kepada nilai awalnya.
  • cantum: Cantumkan kemas kini separa ke dalam keadaan sedia ada.

• Type-Safe: Ditaip sepenuhnya menggunakan TypeScript untuk pembangunan yang boleh dipercayai.

Definisi

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;
  }
];

Definisi Kaedah

• ditetapkan
  • Mengemas kini keadaan dengan menggantikan atau mengemas kini sebahagian sifatnya.
  • Menerima sama ada:
  • Objek dengan nilai keadaan baharu.
  • Fungsi panggil balik (prevState) => Separa untuk mengira keadaan seterusnya.

Contoh

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

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

• set semula
  • Menetapkan semula keadaan kepada keadaan awal atau nilai yang ditentukan.
  • Menerima muatan pilihan untuk menggantikan keadaan awal.

Contoh

reset(); // Resets to initial state.

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

• bergabung
  • Menggabungkan kemas kini separa ke dalam keadaan sedia ada.
  • Menerima objek dengan kemas kini keadaan separa.
  • Hanya berfungsi untuk objek dan struktur keadaan bersarang.

Contoh

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

Contoh Penggunaan Terperinci

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:

 Menguruskan Primitif

• Nombor:

const initialState = 0;

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

• Penggunaan:

  • Naikkan Kiraan:

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

  • Tetapkan semula kepada Keadaan Awal:

  reset();
  

  • Tetapkan Nilai Baharu:

    set(10);
  

• String:
  
  

const initialState = "Hello, World!";

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

• Penggunaan:

  • Kemas kini String:

  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;
  

  • Tetapkan semula kepada Keadaan Awal:

  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:

  • Togol Boolean:

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

  • Tetapkan semula kepada Keadaan Awal:

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

  • Tetapkan Nilai Baharu:

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

• Tarikh:
  
  

const initialState = 0;

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

• Penggunaan:

  • Kemas kini Tarikh:

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

  • Tetapkan semula kepada Keadaan Awal:

  reset();
  

  • Tetapkan Nilai Baharu:

    set(10);
  

• Keadaan Null dan Tidak Ditakrifkan:
  
  

const initialState = "Hello, World!";

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

• Penggunaan:

  • Tetapkan Nilai Baharu:

  set("Hello, React!");
  

  • Tetapkan semula kepada Keadaan Awal:

  reset();
  

  • Tetapkan Nilai Baharu:

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

Mengurus Data Borang

• Keadaan Awal:

set((prevState) => !prevState);

• Penggunaan:

  • Tetapkan Nama Baharu:

  reset();
  

  • Kemas kini Alamat Sebahagian:

    set(true);
  

  • Tetapkan Nama Baharu:

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

  • Kemas kini Bandar:

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

  • Gabungkan Medan Tambahan:

  reset();
  

  • Tetapkan semula kepada Keadaan Awal:

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

Mengurus Tatasusunan

• Keadaan Awal:

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:

  • Tambah Elemen Baharu:

  set("New Value");
  

  • Alih keluar Elemen:

  reset();
  

  • Tetapkan semula kepada Keadaan Awal:

  set("New Value");
  

  • Tetapkan Nilai Baharu:

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

  • Gabungkan Elemen Tambahan:

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

• Keadaan Awal untuk Tatasusunan Bersarang:
  
  

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

• Penggunaan:

  • Tambah Pengguna Baharu:

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

  • Alih keluar Pengguna:

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

  • Tetapkan semula kepada Keadaan Awal:

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

  • Tetapkan Nilai Baharu:

  reset();
  

  • Gabungkan Pengguna Tambahan:

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

Mengurus Negeri Bersarang

• Keadaan Awal:

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

• Penggunaan:

  • Kemas kini Umur Pengguna:

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

  • Kemas kini Bandar:

  reset();
  

  • Tetapkan semula kepada Keadaan Awal:

    set([10, 20, 30]);
  

  • Tetapkan Nilai Baharu:

    merge([6, 7, 8]);
  

Mengapa Gunakan useCustomReducer?

• Pengurusan Negeri Fleksibel:

  • Menyokong pelbagai struktur keadaan, menjadikannya sesuai untuk kes penggunaan yang berbeza.
  • Mengendalikan keadaan primitif, bersarang dan berasaskan tatasusunan dengan mudah.
  • Menyediakan kaedah untuk mengemas kini, menetapkan semula dan menggabungkan nilai keadaan.

• API Mudah:

  • Menyediakan kaedah intuitif untuk mengemas kini, menetapkan semula dan menggabungkan nilai.
  • Menyokong kemas kini terus dan fungsi panggil balik untuk perubahan keadaan dinamik.
  • Menawarkan cara yang bersih dan deklaratif untuk mengurus keadaan dalam komponen React.

• Kod Pembersih:

  • Mengurangkan kod boilerplate dengan mengendalikan struktur keadaan kompleks dengan cekap.
  • Elakkan penggunaan berulang Pengisytiharan negeri dan kendalikan keadaan kompleks secara langsung.
  • Urus semua jenis keadaan (primitif, objek, tatasusunan, dll.) dengan satu cangkuk.

• Selamat Jenis:

  • Taip sepenuhnya menggunakan TypeScript untuk pembangunan yang boleh dipercayai dan pencegahan ralat.

• Kemas Kini Dinamik:

  • Gunakan kaedah yang ditetapkan dengan fungsi untuk mengira keadaan seterusnya secara dinamik.

Kesimpulan

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.

Sumber Tambahan

• Dokumentasi React
• Dokumentasi TypeScript
• Dokumentasi Faker.js

Atas ialah kandungan terperinci useCustomReducer Hook: Alat Pengurusan Negeri Serbaguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!