Ко всем статьям

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 всё ещё занимает уверенные позиции на рынке и довольно часто встречается в проектах.