Компоненты React часто требуют управления своим собственным локальным состоянием. Хук useState предоставляет простое решение, позволяющее вам управлять одной переменной состояния и связанной с ней функцией установки. Функция setter обновляет состояние и запускает повторную визуализацию компонента, гарантируя, что компонент работает с самым последним значением состояния.
Однако, когда задействовано несколько переменных состояния, управление состоянием может быстро стать громоздким и запутанным.
const [username, setUsername] = useState("");
const [email, setEmail] = useState("");
const [pageType, setPageType] = useState<"LOGIN" | "REGISTRATION">("LOGIN");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
Всего за пять применений useState у нас остается пять дополнительных функций установки для управления, что усложняет задачу повторяющейся деструктуризацией и частым использованием ключевых слов, таких как const и useState.
Здесь появляется useEzState
useEzState — это настраиваемый хук React, который упрощает процесс управления несколькими переменными состояния. Вместо того, чтобы объявлять отдельные функции установки для каждой переменной, useEzState предоставляет одну функцию установки, которая принимает только часть состояния. Таким образом, состояние может быть обновлено с большей легкостью, независимо от количества задействованных переменных.
Чтобы использовать useEzState, просто укажите свое начальное состояние в объекте JavaScript, и useEzState выведет за вас структуру состояния. Это не только облегчает чтение, но и обеспечивает отличную поддержку TypeScript.
const [{ name }, set] = useEzState({ name: "" });
set({ name: "John"}); // updates the name to John
И по мере добавления дополнительных переменных:
const [{ username, email, type, password, confirmPassword }, set] = useEzState({
username: "",
email: "",
pageType: "LOGIN" as "LOGIN" | "REGISTRATION",
password: "",
confirmPassword: "",
});
Это приводит к более краткому и удобочитаемому решению. Функция useEzStatesetter может обновлять одно или несколько полей, обеспечивая при этом защиту от ошибок TypeScript.
set({ username: "randomUser" });
set({ password: "randomPass", email: "[email protected]" });
set({ pageType: "LOGOUT" }); // ts error - only "LOGIN" or "REGISTRATION" allowed
set({ password: "randomPass", confirmPassword: 123 }); // ts error confirmPassword can only be string
Вы можете узнать больше о том, как добавить useEzState в свое приложение на npmjs, а также протестировать его на StackBlitz.
В заключение, useEzStateпредоставляет элегантное решение для управления несколькими переменными состояния в компонентах React. Он простой, лаконичный, масштабируемый и предлагает отличную поддержку TypeScript.
