Розбираємося з хуком useReducer у React

У React є два основних способи роботи зі станом у вашому додатку: useState і useReducer. useState є найбільш популярним і простішим в роботі, тому що це першій хук для керування станом, який ви вивчаєте як початківець. Проте, з useState далеко не підеш.

Якщо у вас є кілька станів, з якими ви хочете працювати у своєму додатку, вам потрібно оголосити кілька станів. Згодом все дуже швидко ускладнюється, особливо якщо ви маєте стани з різними рівнями залежності один від одного.

Щоб навести лад у хаосі, вам не потрібно використовувати зовнішні бібліотеки, такі як Redux. Натомість, якщо ваш стан не дуже складний, useReducer і контекстний API можуть допомогти виконати цю роботу.

Розуміння хука useReducer в React

Ви можете почати використовувати useReducer наступним чином:

Він приймає два обов'язкових параметри, функцію reducer та початковий стан, і повертає масив з двох важливих елементів - поточного стану state і функції dispatch.

Третій аргумент init (функція-ініціалізатор, що має повертати початковий стан) є необов'язковим.

Якщо ви хочете наперед встановити свій стан (задати його вручну), ви можете зробити це, передавши його як другий аргумент, ігноруючи третій.

Якщо ви добре розбираєтеся в useState ви можете побачити тут знайомий патерн.

Нагадуємо, що useState приймає один єдиний параметр (ваш початковий стан), і, викликаючи хук, ви повертаєте масив з поточним станом і функцією встановлення стану (використовується для оновлення стану).

Ось приклад:

Подібно до useState, useReducer надає вам поточний стан і функцію оновлення стану, але з особливостями. У useReducer за оновлення стану відповідає функція reducer. Але щоб оновити стан, ви повинні "відправити" об'єкт дії за допомогою функції dispatch.

Функція dispatch

Якщо вам потрібно оновити свій стан, ви повинні викликати функцію dispatch. Виклик функції dispatch також призводить до повторного рендерингу, що необхідно для того, щоб ваш інтерфейс користувача відобразив поточний стан компонента. Для забезпечення оновлення вашого стану, функція dispatch приймає об'єкт дії як єдиний аргумент.

Об'єкт визначає дію, яку виконує користувач. Зазвичай об'єкт містить властивість “type”, що відповідає заданому типу, вказаному у функції редюсер.

Як правило, ви викликаєте функцію dispatch після того, як користувач виконує будь-яку дію, що змінює стан, наприклад, натискає кнопку, або після отримання відповіді від API.

У наведеному вище прикладі ми викликаємо функцію dispatch та передаємо об'єкт дії з типом «increment_age». Властивість type представляє те, що зробив користувач. Після виклику функції dispatch з дією користувача функція викличе наш reducer із зазначеним об'єктом дії в якості аргументу.

Функція редюсер

Згідно з офіційною документацією React, редюсер вказує, як оновлюватиметься стан. Він приймає два параметри: поточний стан state та дію action.

Об'єкт дії зазвичай має властивість type, яка представляє дію, яку викликає функція dispatch . Ви можете використовувати оператор if, щоб визначити тип дії, але за угодою спільноти краще використовувати оператор switch.

У наведеному вище прикладі коду ми шукаємо дію з типом increment_age. Усередині блоку ми вказуємо, як оновлюватиметься наш стан. У цьому прикладі ми повертаємо об'єкт із нашим поточним станом та модифікуємо властивість age, додаючи одиницю.

Використання useReducer для оголошення та оновлення стану

Покінчимо з теорією, розгляньмо приклад із реального життя, щоб допомогти вам отримати повне уявлення про те, як працює хук useReducer і як ви можете використовувати його у своєму проекті.

Припустимо, у нас є об'єкт початкового стану з двома властивостями: name та age. Використовуючи useReducer, оголосімо наш початковий стан:

Далі ми створимо функцію редюсер з логікою для оновлення нашої властивості age:

Припустимо, що у нас є дві кнопки, що відображаються в інтерфейсі користувача, для збільшення і зменшення властивості age, наприклад:

Ми можемо викликати функцію dispatch для оновлення стану відповідним чином, коли користувач натискає будь-яку кнопку, передаючи об'єкти дії з певними типами, які відповідають випадкам всередині нашої функції reducer .

Тепер щоразу, коли ми натискаємо кнопку збільшення чи зменшення, наш стан миттєво оновлюватиметься. Ось як ви можете використовувати useReducer для керування станом у React.

Ознайомтеся з повним кодом на codesandbox.

Чому вам слід приділяти увагу useReducer?

useReducer особливо важливий у React, оскільки патерн, що використовується для оновлення стану, чимось схожий на те, що ви побачите в Redux, найпопулярнішій та найнадійнішій бібліотеці управління станом React.

У невеликих проектах використання useReducer може бути достатньо. Але у великих додатках настійно рекомендується використовувати спеціальні бібліотеки управління станом.

Джерело: http://surl.li/izfqz
Переклад: Olena Pobehailo
Редактор: Аліна Берестень
Адміністратор: Дмитро Берестень