Общественная записная книжка следы для себя и потомков

React.js - Redux - внешний контейнер состояния для JavaScript-приложений.

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

Общественная записная книжка следы для себя и потомков

Other articles

React.js - что это?!

Полезные ссылки

Дополнительные библиотеки

Create-React-App

Other articles

Полезные ссылки

Дополнительные библиотеки

Create-React-App

social