Redux и все-все-все

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

Redux – библиотека для управления состоянием приложения.

Она не привязана к какому-либо фреймворку или view-библиотеке, но используется чаще всего в связке с React.

Redux основан на архитектурном подходе Flux и функциональном программировании, поэтому с частью понятий вы возможно уже встречались:

Хранилище (store) – состояние приложения
Действие (action) – это объект с обязательным свойством type (обычно константа в виде строки) и необязательной информацией (payload), отправляемой в хранилище.
Генераторы действий (actions creators) – это функции, создающие действия.
Редуктор (reducer) – чистая функция (зависит исключительно от своих аргументов и не вызывает побочных эффектов в приложении), которая получает действие, и в соответствии с ним изменяет состояние хранилища.

Три фундаментальных принципа Redux:

единственный источник истины (одно хранилище, которое управляет состоянием всего приложения);
состояние только для чтения (единственный способ обновить состояние – отправить action);
изменения вносятся с помощью чистых функций (reducers).

Асинхронные действия

Redux по умолчанию работает только с синхронными действиями, но что, если приложению необходимо взаимодействовать с сервером по API или выполнять других асинхронные действия? В таком случае вы можете расширить функционал с помощью middleware (промежуточного программного обеспечения).

В настоящий момент наиболее популярные библиотеки для этого: Redux Thunk и Redux Saga.

Redux Thunk

Принцип работы Redux Thunk прост: Action creator возвращает обработанную Redux Thunk-ом функцию, в которой разрешено инициировать побочные эффекты, асинхронные (вызовы API) и синхронные действия.

Redux Saga

Redux Saga использует концепцию генераторов из ES6, что позволяет делать асинхронные потоки легкими для чтения, написания и тестирования. Более подробно о генераторах и возможностях данной библиотеки мы с вами познакомимся в одной из следующих статей.

Redux DevTools

Можно ли как-то отслеживать текущее состояние стора и его изменение? Да, с помощью специального расширения для браузера Redux DevTools. Оно позволяет просматривать:

начальное состояние приложения (initial state);
изменение стора при взаимодействии с actions;
как выглядит выполненный action (какие данные были переданы и с каким типом);
прошедшее время с момента выполнения последнего action.

Redux Toolkit

Если вы писали проект с использованием Redux в стандартном виде, то могли столкнуться с проблемой организации кода и его дублированием. На помощь может прийти Redux Toolkit. Он решает недостатки Redux:

сложность и “многословность” рекомендованных паттернов для написания и организации кода, что влечет за собой большое количество шаблонного кода;
выбор подходящего инструмента для управления асинхронными действиями из множества библиотек.

С API библиотеки вы можете ознакомиться непосредственно в документации, мы лишь хотим выделить особенности:

простота настройки хранилища;
Redux Thunk включен по умолчанию;
в режиме разработки обнаруживаются распространенные ошибки (например, мутирование состояния или использование несериализуемых значений);
включен Redux DevTools;
используется библиотека Immer, позволяющая писать "мутирующий" код, обновляющий состояние иммутабельно;
упрощение создания частей состояния с помощью createSlice();
createSelector (утилита от Reselect библиотеки, позволяющая писать мемомизированные селекторы).

Все эти преимущества позволили зарекомендовать Redux Toolkit как официальный набор инструментов для эффективной разработки Redux.

Подводя итоги, можно с уверенностью сказать, что несмотря на встроенные способы управления состоянием приложения в React и другие библиотеки менеджеров состояний, Redux всё ещё занимает уверенные позиции на рынке и довольно часто встречается в проектах.