Что такое Redux?
Redux — это библиотека для управления состоянием JavaScript-приложений. Она помогает создавать приложения, которые ведут себя предсказуемо, легко тестируются и работают в различных средах.
Основные концепции Redux
Store (Хранилище)
- Единственное место хранения состояния всего приложения
- Создается с помощью функции
createStore
- Предоставляет методы для доступа к состоянию и его обновления
Actions (Действия)
- Простые JavaScript-объекты, описывающие что произошло
- Должны иметь свойство
type
- Могут содержать дополнительные данные
const action = {
type: 'ADD_TODO',
payload: 'Изучить Redux'
};
Reducers (Редьюсеры)
- Чистые функции, которые принимают текущее состояние и action
- Возвращают новое состояние
- Никогда не изменяют существующее состояние
const todoReducer = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload];
default:
return state;
}
};
Принципы Redux
-
Единственный источник правды
- Все состояние приложения хранится в одном объекте внутри одного store
-
Состояние только для чтения
- Единственный способ изменить состояние — отправить action
- Все изменения происходят централизованно и в строгом порядке
-
Изменения делаются с помощью чистых функций
- Reducers — это чистые функции
- Они принимают предыдущее состояние и action, возвращают следующее состояние
Пример использования Redux
// 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('Изучить Redux'));
Когда использовать Redux?
Redux стоит использовать, когда:
- У вас сложное состояние приложения
- Состояние часто обновляется
- Логика обновления состояния сложная
- Приложение имеет средний или большой размер кодовой базы
- Много разработчиков работают над проектом
Важно помнить:
Redux добавляет дополнительную сложность в приложение. Для небольших проектов может быть достаточно встроенного управления состоянием React.