Вы находитесь на странице: 1из 4

Redux пытается сделать изменения состояния предсказуемыми, путем введения

некоторых ограничений на то, как и когда могут произойти обновления. Эти


ограничения отражены в трех принципах Redux.

Три принципа

1. Единственный источник правды

Когда вы используете Redux, все основные данные всего приложения


представляются единственным объектом JavaScript, ссылающимся на
состояние или дерево состояния.Состояние только для чтения

Независимо от размера приложения, все данные состояния


хранятся в одном объекте.

2.Состояние только для чтения


action в Redux это простой объект JavaScript, выражающий
намерение изменить состояние объекта. Он содержит минимальную
информацию, требуемую для описания того, что должно измениться в
результате действий пользователя. Единственный обязательный
атрибут действия это его тип, все остальные данные, включенные в
действие, будут специфичны для конкретного приложения и типа
произведенного действия. 
Единственный способ изменить состояние — это применить экшен — объект,
который описывает, что случится.

Изменения производятся чистыми


функциями
Для определения того, как дерево состояния будет трансформировано
экшенами, вы пишете чистые редюсеры.

Редюсеры — это просто чистые функции, которые берут предыдущее состояние и


экшен и возвращают новое состояние. 
Экшены (Actions)
Экшены — это структуры, которые передают данные из вашего приложения в
стор. Они являются единственными источниками информации для стора. Вы
отправляете их в стор, используя метод store.dispatch().

Экшены — это обычные JavaScript-объекты. Экшены должны иметь поле type,


которое указывает на тип исполняемого экшена. Типы должны быть, как правило,
заданы, как строковые константы. После того, как ваше приложение разрастется,
вы можете захотеть переместить их в отдельный модуль.

Кроме type, структуру объекта экшенов вы можете строить на ваше усмотрение.

Генераторы экшенов (Action Creators) — не что иное, как функции, которые


создают экшены. Довольно просто путать термины “action” и “action creator,”
поэтому постарайтесь использовать правильный термин.

Редюсеры (Reducers)
Редюсеры определяют, как состояние приложения изменяется в ответ на экшены,
отправленные в стор. Помните, что экшены только описывают, _что произошло, но
не описывают, как изменяется состояние приложения.

В Redux все состояние приложения хранится в виде единственного объекта. 

Редюсер (reducer) — это чистая функция, которая принимает предыдущее


состояние и экшен (state и action) и возвращает следующее состояние (новую
версию предыдущего).

Вот список того, чего никогда нельзя делать в редюсере:

 Непосредственно изменять то, что пришло в аргументах функции;


 Выполнять какие-либо сайд-эффекты: обращаться к API или осуществлять
переход по роутам;
 Вызывать не чистые функции, например Date.now() или Math.random().

Стор (Store)
Стор (Store) — это объект, который соединяет эти части вместе. Стор берет на себя
следующие задачи:

 содержит состояние приложения (application state);


 предоставляет доступ к состоянию с помощью getState();
 предоставляет возможность обновления состояния с
помощью dispatch(action);
 Обрабатывает отмену регистрации слушателей с помощью функции,
возвращаемой subscribe(listener).

Поток данных (Data Flow)


Жизненный цикл данных в любом Redux-приложении включает в себя 4 шага:

1. Вы вызываете store.dispatch(action).
2. Redux-стор вызывает функцию-редюсер, который вы ему
передали(Стор передаст два аргумента при вызове редюсера: текущее
дерево состояния (current state tree) и экшен (action).
3. Главный редюсер может комбинировать результат работы нескольких
редюсеров в единственное дерево состояния приложения.
4. Redux-стор сохраняет полное дерево состояния, которое возвращает
главный редюсер.

Mидлвар (middleware) - это предлагаемый способ расширения Redux с помощью


настраиваемых функций. Mидлвар позволяет вам обернуть метод
стора dispatch для пользы и дела. Ключевой особенностью мидлвара является то,
что они компонуемы. Несколько мидлваров можно объединить вместе, где
каждый мидлвар не должен знать, что происходит до или после него в цепочке.

В redux есть функция applyMiddleware(), которую мы


должны передать параметром в функцию Createstore
И в данном функции мы перечисляем набор мидлваеров
которые мы хотим использовать в проекте.
С помощью redux-thunk мы можем диспачить
ассинхронные экшены.
Import reduxThunk from ‘redux-thunk’;
const store = (rootReducer, applyMiddleware(reduxThunk));

// Возвращаем функцию, которая принимает `dispatch` как аргумент, чтобы мы могли её


вызвать позже.
// мидлвар-преобразователь знает, как нужно конвертировать такие асинхронные экшены
в стандартные.

Redux Thunk это middleware библиотека, которая позволяет вам вызвать action
creator, возвращая при этом функцию вместо объекта. Функция принимает метод
dispatch как аргумент, чтобы после того, как асинхронная операция завершится,
использовать его для диспатчинга обычного синхронного экшена, внутри тела
функции.

redux-saga — это библиотека, которая призвана упростить и улучшить побочные


эффекты (т.е. такие действия, как асинхронные операции, например, загрузки данных, и
"грязные" действия, такие, как доступ к браузерному кешу), сделать лёгкими в
тестировании и лучше справляться с ошибками.

Можно представить это так, что saga — это как отдельный поток в вашем приложении,
который отвечает за побочные эффекты. redux-saga — это мидлвар redux, что означает,
что этот поток может запускаться, останавливаться и отменяться из основного
приложения с помощью обычных действий redux, оно имеет доступ к полному состоянию
redux приложения и также может диспатчить действия redux.

Библиотека использует концепцию ES6, под названием генераторы, для того, чтобы
сделать эти асинхронные потоки легкими для чтения, написания и тестирования. (если вы
не знакомы с этим, здесь есть некоторые ссылки для ознакомления) Тем самым, эти
асинхронные потоки выглядят, как ваш стандартный синхронный JavaScript-код.
(наподобие async/await, но генераторы имеют несколько отличных возможностей,
необходимых нам)