Skip to main content

Що таке reducer?

ReactJunior~1 хв читання
Запропонувати правку

Reducer - це функція, яка керує зміною стану (state) у відповідь на певні дії (actions) і завжди повертає новий стан.

Простіше кажучи:

Reducer описує, як саме стан має змінитися, коли щось відбулося.

Формально

Reducer - це чиста функція із сигнатурою:

javascript
(state, action) => newState

Приклад простого reducer'а

Припустімо, у нас є лічильник:

javascript
function counterReducer(state, action) { switch (action.type) { case 'increment': return state + 1 case 'decrement': return state - 1 default: return state } }

Тут:

  • state - поточний стан (наприклад, число 0)
  • action - об'єкт, що описує, що відбулося ({ type: 'increment' })
  • функція повертає новий стан (наприклад, 1)

У React

Reducer використовується, наприклад, разом із хуком useReducer():

javascript
const [state, dispatch] = useReducer(counterReducer, 0)
  • state - поточне значення лічильника
  • dispatch - функція, за допомогою якої надсилається дія:
javascript
dispatch({ type: 'increment' })

У Redux

Reducer - основа Redux-архітектури. Redux зберігає один спільний стан застосунку, а reducer керує тим, як він змінюється за кожної дії.

У Redux зазвичай кілька редʼюсерів об'єднуються через combineReducers().

Властивості reducer'а

  1. Чиста функція - без побічних ефектів.
  • Не змінює аргументи.
  • Не робить запитів до API.
  • Повертає однаковий результат за однакових вхідних даних.
  1. Іммутабельність - не мутує state, а створює новий об'єкт:
javascript
return { ...state, count: state.count + 1 }

Асоціація для запам'ятовування

Reducer - як «редактор стану»: він отримує поточний стан + інструкцію («збільш», «видали», «очисти») і повертає нову версію стану.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку