Що таке Redux?
Redux — це бібліотека для управління станом у JavaScript-додатках. Вона допомагає створювати додатки, які поводяться передбачувано, легко тестуються та працюють у різних середовищах.
Основні концепції Redux
Store
- Єдиний джерело істини для всього стану додатку
- Створюється за допомогою функції
createStore - Надає методи для доступу до стану та його оновлення
Actions
- Прості об'єкти JavaScript, які описують, що сталося
- Повинні мати властивість
type - Можуть містити додаткові дані
javascript
const action = {
type: 'ADD_TODO',
payload: 'Learn Redux'
};Reducers
- Чисті функції, які приймають поточний стан та дію
- Повертають новий стан
- Ніколи не змінюють існуючий стан
javascript
const todoReducer = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload];
default:
return state;
}
};Принципи Redux
- Єдине джерело істини
- Весь стан додатку зберігається в одному об'єкті всередині одного store
- Стан є тільки для читання
- Єдиний спосіб змінити стан — це відправити дію
- Усі зміни відбуваються централізовано та в строгому порядку
- Зміни здійснюються чистими функціями
- Reducers є чистими функціями
- Вони приймають попередній стан та дію, повертають наступний стан
Приклад використання Redux
javascript
// Action Creator
const addTodo = (text) => ({
type: 'ADD_TODO',
payload: text
});
// Reducer
const todoReducer = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload];
default:
return state;
}
};
// Store
const store = createStore(todoReducer);
// Підписка на зміни
store.subscribe(() => console.log(store.getState()));
// Відправка дії
store.dispatch(addTodo('Learn Redux'));Коли використовувати Redux?
Redux слід використовувати, коли:
- У вас складний стан додатку
- Стан часто оновлюється
- Логіка оновлення стану є складною
- Додаток має середню або велику кодову базу
- Над проектом працює багато розробників
Важливо пам'ятати:
Redux додає додаткову складність до додатку. Для малих проектів вбудоване управління станом React може бути достатнім.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.