Що таке pure reducer (чиста функція)?
Визначення
Pure reducer (чиста функція-редьюсер) - це функція, яка завжди повертає одне й те саме значення при однакових вхідних даних і не має побічних ефектів.
Простіше кажучи: Reducer - це чиста функція, яка лише обчислює новий стан на основі старого і action - і нічого більше не робить.
Формально
Чиста функція:
javascript
newState = reducer(oldState, action)- Не змінює
oldStateнапряму. - Не робить запитів, логування, таймерів тощо.
- Не звертається до зовнішніх змінних.
- Завжди повертає один і той самий результат при однакових вхідних даних.
Приклад чистого reducer'а
javascript
function counterReducer(state = { count: 0 }, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 }
case 'DECREMENT':
return { count: state.count - 1 }
default:
return state
}
}Чиста функція:
- Не мутує
state - Не викликає API
- Не використовує
Math.random() - Не залежить від зовнішніх змінних
Приклад нечистого reducer'а
javascript
function counterReducer(state = { count: 0 }, action) {
switch (action.type) {
case 'INCREMENT':
fetch('/api/log') // побічний ефект (виклик API)
return { count: state.count + 1 }
case 'DECREMENT':
return { count: state.count - Math.random() } // непередбачуваність
default:
return state
}
}Чому це погано:
- Reducer повинен бути передбачуваним.
- Redux порівнює старий і новий стан -> якщо функція непередбачувана, це ламає логіку.
- Побічні ефекти (запити, таймери, логування) повинні виконуватись у middleware (наприклад, Redux Thunk, Saga тощо), а не в reducer'і.
Правила чистого reducer'а
| Правило | Що означає |
|---|---|
| Не мутуй state | Використовуй ...spread, map, filter, concat, але не push, splice, assign |
| Не викликай побічні ефекти | Ніяких fetch, console.log, setTimeout, alert тощо |
| Не звертайся до зовнішніх даних | Не використовуй глобальні змінні, localStorage тощо |
| Повертай новий стан | return { ...state, ...changes } |
| Один і той самий input -> один і той самий output | Передбачуваність |
Чому це важливо
- Передбачуваність - результат reducer'а завжди зрозумілий.
- Тестованість - можна просто передати
stateіactionі перевірити результат. - Відлагодження - Redux DevTools може "перемотувати" стан назад і вперед, бо функції не мають побічних ефектів.
Підсумок
| Термін | Значення |
|---|---|
| Pure function | Функція без побічних ефектів і з детермінованим результатом |
| Reducer | Чиста функція, яка описує, як стан змінюється у відповідь на action |
| Переваги | Передбачуваність, простота тестування, підтримка time-travel debugging |
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.