UseReducer Hook е една от най-добрите опции за управление на състоянието в React. Стартирайте вашето пътуване с useReducer Hook, като използвате това ръководство.

Управлението на състоянието е от решаващо значение при разработката на React, служейки като крайъгълен камък за обработка и актуализиране на данни в потребителските интерфейси. Реагирайте useState Hook предоставя директен подход за управление на състоянието, но става тромав със сложно състояние. Това е мястото, където useReducer Куката влиза.

The useReducer Hook предлага структурирана методология за управление на сложни състояния и преходи. Прегръщане на useReducer Hook отключва гъвкавост и ефективност, което води до по-чист код.

Разбиране на useReducer Hook

The useReducer Hook е вградена функция, предоставена от React, която рационализира управлението на състоянието, като се придържа към принципите на модела на редуктора. Той ви предлага организирана и мащабируема алтернатива на useState Кука, особено подходяща за справяне със сложни състояния.

instagram viewer

Чрез използване на useReducer Хук, можете да консолидирате както състоянието, така и неговите преходи в рамките на една редукционна функция.

Тази функция приема текущото състояние и действие като входни данни, като впоследствие създава новото състояние. Той работи на същите принципи като функцията за намаляване, използвана в JavaScript Array.prototype.reduce() метод.

Синтаксис и примерна употреба на куката useReducer

Синтаксисът за използване на useReducer Куката е както следва:

конст [състояние, изпращане] = useReducer (редуцент, първоначално състояние);

The useReducer функцията приема два аргумента:

  • редуктор (функция): Определя начина, по който състоянието трябва да се актуализира въз основа на текущото състояние и изпратеното действие.
  • първоначално състояние (всяко): Представлява стойността на първоначалното състояние за компонента.

При извикване, useReducer Hook връща масив, състоящ се от два елемента:

  • състояние (всяко): Обозначава текущата стойност на състоянието.
  • изпращане (функция): Тази функция позволява изпращането на действия за актуализиране на състоянието.

Разгледайте примера по-долу, илюстриращ използването на useReducer Кука в управлението на прост брояч:

импортиране Реагирайте, {useReducer} от"реагира";
конст първоначално състояние = 0;
конст редуктор = (състояние, действие) => {
превключвател (action.type) {
случай"увеличение":
връщане състояние + 1;
случай"намаляване":
връщане състояние - 1;
по подразбиране:
връщане състояние;
 }
};


конст Брояч = () => {
конст [count, dispatch] = useReducer (reducer, initialState);
конст handleIncrement = () => {
 изпращане ({ Тип: "увеличение" });
 };


конст handleDecrement = () => {
 изпращане ({ Тип: "намаляване" });
 };


връщане (






};

От горната илюстрация, първоначално състояние на 0 се дефинира заедно с редуцираща функция, отговорна за обработката на два типа действия: нарастване и намаляване. Функцията редуктор надлежно променя състоянието в съответствие с посочените действия.

Чрез използване на useReducer Кука, състоянието се инициализира и се получават както стойността на текущото състояние, така и функцията за изпращане. Функцията за изпращане впоследствие се използва за задействане на актуализации на състоянието при щракване върху съответните бутони.

Конструиране на редукторна функция

За оптимално използване на useReducer Хук, можете да създадете редуцираща функция, която описва как състоянието трябва да се актуализира въз основа на изпратените действия. Тази редуцираща функция приема текущото състояние и действието като аргументи и връща новото състояние.

Обикновено редукторна функция използва условен оператор за превключване да обработва различни типове действия и съответно да извършва модификации на състоянието.

Разгледайте примера по-долу на функция за намаляване, използвана за управление на списък със задачи:

конст първоначално състояние = [];
конст редуктор = (състояние, действие) => {
превключвател (action.type) {
случай"добавяне":
връщане [...състояние, action.payload];
случай"превключване":
връщане state.map((да направя) =>
 todo.id action.payload? { ...да направя, завършен: !todo.completed }: задачи
 );
случай'Изтрий':
връщане state.filter((да направя) => todo.id !== action.payload);
по подразбиране:
връщане състояние;
 }
};

В горния пример функцията за намаляване обработва три различни типа действия: добавете, превключвам, и Изтрий. При получаване на добавете действие, то добавя полезния товар (нова задача) към състояние масив.

В случая на превключвам действие, то редува завършен свойство на елемента todo, свързан с посочения идентификатор. The Изтрий действието, от друга страна, елиминира елемента todo, свързан с предоставения ID от масива на състоянието.

Ако нито един от типовете действия не съответства, функцията за намаляване връща текущото състояние непроменено.

Диспечерски действия

За извършване на актуализации на състоянието, улеснени от useReducer Хук, изпращането на действия става незаменимо. Действията представляват обикновени JavaScript обекти, които изясняват желания тип модификация на състоянието.

Отговорността за обработката на тези действия и генерирането на последващото състояние е на функцията за намаляване.

Диспечерската функция, предоставена от useReducer Кука, се използва за изпращане на действия. Той приема обект на действие като аргумент, като по този начин предизвиква съответната актуализация на състоянието.

В предходните примери действията бяха изпратени с помощта на синтаксиса изпращане ({type: 'actionType'}). Въпреки това е възможно действията да включват допълнителни данни, известни като полезен товар, който предоставя допълнителна информация, свързана с актуализацията. Например:

изпращане ({ Тип: "добавяне", полезен товар: { документ за самоличност: 1, текст: „Довърши домашното“, завършен: невярно } });

В този сценарий, добавете действието включва полезен обект, капсулиращ детайлите на новия елемент от задачата, който трябва да бъде включен в състоянието.

Управление на сложно състояние с useReducer

Истинската сила на useReducer Хук се крие в способността му да управлява сложни държавни структури, обхващащи множество взаимосвързани ценности и сложни държавни преходи.

Чрез централизиране на логиката на състоянието в редуцираща функция, управлението на различни типове действия и систематичното актуализиране на състоянието се превръща в осъществимо начинание.

Помислете за сценарий, при който a формулярът за реакция се състои от множество полета за въвеждане. Вместо да управлявате състоянието на всеки вход поотделно чрез useState, на useReducer Hook може да се използва за холистично управление на състоянието на формата.

Функцията за редуциране може умело да се справя с действията, свързани с модификацията на конкретни полета и цялостното валидиране на целия формуляр.

конст първоначално състояние = {
 име: '',
 електронна поща: '',
 парола: '',
 isFormValid: невярно,
};
конст редуктор = (състояние, действие) => {
превключвател (action.type) {
случай'updateField':
връщане {... състояние, [action.payload.field]: action.payload.value };
случай'validateForm':
връщане { ...състояние, isFormValid: action.payload };
по подразбиране:
връщане състояние;
 }
};

В примера функцията за намаляване обслужва два различни типа действия: updateField и validateForm. The updateField действието улеснява модифицирането на конкретно поле в рамките на състоянието чрез използване на предоставената стойност.

Обратно, на validateForm действие актуализира isFormValid собственост въз основа на предоставения резултат от валидирането.

Чрез наемането на useReducer Кука за управление на състоянието на формуляра, всички свързани състояния и действия се консолидират в един обект, като по този начин се подобрява лекотата на разбиране и поддръжка.

Сравняване на useReducer с други решения за управление на състоянието

въпреки че useReducer Hook е мощен инструмент за управление на състоянието, жизненоважно е да се признаят неговите различия и компромиси в сравнение с алтернативните решения за управление на състоянието в екосистемата на React.

useState

The useState Hook е достатъчен за управление на прости, изолирани състояния в рамките на компонент. Синтаксисът му е по-сбит и ясен в сравнение с useReducer. Независимо от това, за сложни състояния или преходи на състояния, useReducer предлага по-организиран подход.

Redux

Redux представлява известна библиотека за управление на състоянието за React приложения. Той се придържа към подобен модел на редуктор като useReducer, но предоставя допълнителни функции като централизирано хранилище, поддръжка на междинен софтуер и отстраняване на грешки при пътуване във времето.

Redux се оказва идеален за широкомащабни приложения, изискващи сложни изисквания за управление на състоянието. Въпреки това, за по-малки проекти или по-прости нужди от управление на държавата, useReducer може да служи като лека и по-проста алтернатива.

API за контекст

Контекстният API на React позволява споделянето на състояние през множество компоненти, без да се прибягва до пробивно пробиване. Във връзка с useReducer, може да доведе до централизирано решение за управление на държавата.

Докато комбинацията от Context API и useReducer разполага със значителна мощност, може да въведе допълнителна сложност, когато се съпостави с използването на useReducer в изолация.

API за контекст се използва най-добре, когато има необходимост от споделяне на състояние сред дълбоко вложени компоненти или когато се сблъскате със сложна йерархия на компоненти. Изборът на подходящо решение за управление на състоянието зависи от специфичните изисквания на даденото приложение.

За проекти с умерен размер, useReducer може да се окаже ефективна и по-проста алтернатива на Redux или Context API.

Отприщване на простотата на държавното управление

UseReducer Hook е мощен инструмент за опростяване на управлението на състоянието в приложенията на React. Придържайки се към принципите на редукционния модел, той предлага структуриран и мащабируем подход за обработка на сложни състояния и преходи на състояния.

Когато се използва в тандем с useState Hook, useReducer може да служи като лека алтернатива на библиотеки като Redux или Context API, особено в контекста на по-малки до средни проекти.