Redux
это инструмент управления как состоянием данных, так и состоянием интерфейса в JavaScript-приложениях. Он подходит для одностраничных приложений, при росте которых управление состоянием со временем становится сложным.
Redux предлагает хранить все состояние приложения в одном месте, называемом «store» («хранилище»).
Компоненты «отправляют» изменение состояния в хранилище, а не напрямую другим компонентам. Компоненты, которые должны быть в курсе этих изменений, «подписываются» на хранилище.
Принципы Redux
-
Единственный источник истины;
-
Cостояние доступно только для чтения;
-
Изменения делаются «чистыми» функциями;
Единственный способ изменить состояние — передать «action»— объект, описывающий, что произошло. Вместо этого «action» описывает, какие изменения необходимо сделать. Редьюсеры (reducers) — это функции, которые обрабатывают «action» и могут вносить изменения в состояние.
Редьюсеры должны быть реализованы как "чистые" функции (pure functions):
-
Они не должны делать внешних вызовов по сети или базе данных.
-
Они возвращают значение, зависящее только от переданных параметров.
-
Их аргументы являются неизменяемыми, т.е. функции не должны их изменять.
-
Вызов чистой функции с теми же аргументами всегда возвращает одинаковый результат.
-
Эти функции называют "чистыми", потому что они не делают ничего, только возвращают значение, зависящее от параметров. Они не зависят от какой-либо из частей системы.
API Redux
//Отправить действие в store
store.dispatch(action)
//Добавляет слушателя
store.subscribe(listener)
//Возвращает текущее состояние вашего приложения
store.getState()
//Заменяет редьюсер, который в настоящее время используется хранилищем
replaceReducer(nextReducer)
Actions - объект описывающий что-произошло
это обычные JS объекты.
Action обязательно:
-
плоский объект
-
поле type - указывает на тип исполняемого действия.
Action может иметь:
-
св-во error - true - действие представляет ошибку
-
св-во payload - полезная нагрузка (любой тип значения)
-
св-во meta - любая доп информация (любой тип значения)
Пример:
{
type: 'ADD_TODO',
payload: {
text: 'Todo title text',
date: '15/11/2017',
}
}
Генераторы действий (Action Creators) — функции, которые создают действия.
В Redux генераторы действий (action creators) просто возвращают action:
function addTodo(text) {
return {
type: ADD_TODO,
payload: text
}
}
Reducer - чистая функция, которая принимает предыдущее состояние и действие (state и action) и возвращает следующее состояние (новую версию предыдущего).
(previousState, action) => newState
React & Redux
установка:
npm i redux react-redux --save