Бібліотека Redux — важливі моменти, які варто знати

Redux — це бібліотека для керування станом у JavaScript-додатках, яка часто використовується з React, але також може працювати з іншими фреймворками або чистим JavaScript. Вона допомагає передбачувано управляти станом вашого додатку, особливо коли додаток стає складнішим.

Redux вирішує проблему керування станом в додатках React, особливо коли додаток стає складним і потребує синхронізації чи обміну станом між кількома компонентами. Вбудоване керування станом в React (useState або useReducer) може стати громіздким при роботі з глибоко вкладеними компонентами, складними взаємодіями або глобальним станом.

Коли використовувати Redux:

Redux найбільш корисний у додатках з:

• Складним станом, який потрібно ділити між кількома компонентами.
• Кількома шарами вкладених компонентів.
• Необхідністю налагодження та збереження стану.

Ключові концепти в Redux:

1. Store:
   Центральне місце для зберігання стану додатку. Це об’єкт, що містить дерево стану.
2. Actions:
   Прості об’єкти JavaScript, які описують, що повинно статися в додатку. Кожна дія має властивість type і може містити додаткові дані (payload), необхідні для операції.
3. Reducers:
   Чисті функції, які визначають, як стан додатку має змінюватися у відповідь на дію. Вони приймають поточний стан і дію як аргументи і повертають новий стан.
4. Dispatch:
   Метод для надсилання дій в Redux store, що ініціює виклик reducer для оновлення стану.
5. Selectors:
   Функції для вилучення конкретних даних зі стану.
6. Middleware:
   Інструменти, що стоять між відправкою дій та викликом reducer, часто використовуються для обробки асинхронних операцій, таких як API запити (наприклад, Redux Thunk або Redux Saga).

Різниця між redux thunk та redux saga

1. Що це таке

• Redux Thunk:
  Легковажне middleware, яке дозволяє створювати action creators, що повертають функцію замість дії. Повернена функція може обробляти асинхронну логіку та надсилати дії, коли це необхідно.
• Redux Saga:
  Більш потужне middleware, яке використовує генераторні функції для обробки асинхронної логіки. Воно слухає надіслані дії та виконує побічні ефекти за допомогою «саг».

2. Синтаксис та підхід

• Redux Thunk:
• Простий та легкий у впровадженні.
• Використовує прості функції JavaScript для обробки асинхронної логіки.

const fetchData = () => {  
 return async (dispatch) => {  
 dispatch({ type: 'FETCH_START' });  
 try {  
 const response = await fetch('/api/data');  
 const data = await response.json();  
 dispatch({ type: 'FETCH_SUCCESS', payload: data });  
 } catch (error) {  
 dispatch({ type: 'FETCH_ERROR', payload: error });  
 }  
 };  
};

Redux Saga:

• Більш складне, але дає більше контролю над побічними ефектами.
• Використовує ES6 генераторні функції (function*) для створення «саг», що управляють асинхронними операціями.

function* fetchData() {  
 try {  
 yield put({ type: 'FETCH_START' });  
 const response = yield call(fetch, '/api/data');  
 const data = yield response.json();  
 yield put({ type: 'FETCH_SUCCESS', payload: data });  
 } catch (error) {  
 yield put({ type: 'FETCH_ERROR', payload: error });  
 }  
}  
function* watchFetchData() {  
 yield takeEvery('FETCH_REQUESTED', fetchData);  
}

3. Крива навчання

Redux Thunk:

• Легше вивчити та впровадити.
• Підходить для новачків або простих випадків використання.

Redux Saga:

• Більша крива навчання через генераторні функції та складніші API, такі як call, put, take та fork.
• Підходить для великих, складних додатків.

4. Можливості

Redux Thunk:

• Ідеально підходить для простих асинхронних задач, таких як API запити.
• Обмежений контроль над конкурентністю, скасуванням та складними побічними ефектами.

Redux Saga:

• Потужніше та гнучкіше.
• Може обробляти складні випадки, такі як дебаунсинг, обмеження, повторні спроби неуспішних запитів та скасування завдань.
  Розмір і продуктивність

Redux Thunk:

• Легковажне та має менший розмір бандла.

Redux Saga:

• Більший і може додавати накладні витрати через додаткову складність коду.

Робочий процес Redux:

Однонапрямлений потік

1. Компоненти надсилають дії:
   Взаємодії з користувачем (наприклад, натискання кнопки) або побічні ефекти ініціюють надсилання дій.
2. Store отримує дії:
   Функція dispatch надсилає дії в Redux store.
3. Reducers обробляють дії:
   Store передає поточний стан і дію в reducer. Reducers повертають новий стан.
4. Store оновлює стан:
   Стан оновлюється в Redux store.
5. Компоненти перерендерюються:
   Підписані компоненти отримують оновлений стан і перерендерюються, щоб відобразити зміни в інтерфейсі користувача.

Питання для співбесіди:

1. Що таке Redux?
2. Що таке reducer, action і store в Redux?
3. Що таке middleware в Redux?
4. Поясніть потік даних в Redux.
5. Що таке redux thunk?
6. Яка різниця між redux-thunk і redux-saga?

Перекладено з: Redux library — Important points to know