Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <h2>Проблематика работы с асинхронными запросами</h2>

2 Одна из самых сложных задач в построении фронтенд-приложений - работа с внешними запросами. Трудности приходят с двух сторон.

3 С одной стороны, асинхронность сама по себе порождает неоднозначности, перестают работать стандартные механизмы. Redux не умеет работать в асинхронном режиме, поэтому вся обработка запросов происходит снаружи. В таком случае любая нетривиальная логика обработки асинхронных действий будет появляться внутри компонентов React:

4 С другой стороны, сеть - это вещь ненадежная. Запросы могут выполняться долго или не выполниться вообще, и все это нужно отслеживать для правильной реакции:

5 <ul><li>При долгих запросах - показывать спиннер</li>

6 <li>При обрыве запроса - выводить соответствующее предупреждение</li>

7 </ul>Добавим к примеру выше обработку ошибок и отслеживание статуса загрузки:

8 Как мы видим, даже для небольшого числа вызовов придется написать очень много похожего кода. В реальных приложениях количество вызовов может измеряться многими десятками и даже сотнями. Поэтому без готового решения тут не обойтись. Для автоматизации HTTP-запросов к нам на помощь приходят два механизма:

9 <ul><li>Мидлвараredux-thunk, которая уже включена в Redux Toolkit</li>

10 <li>Механизм createAsyncThunk()</li>

11 </ul><h2>Мидлвара redux-thunk</h2>

12 Мидлвара - это код, который встраивается в обработку. Можно представить ее в виде цепочки функций, где каждая функция принимает данные из предыдущего обработчика и передает данные в следующую функцию. Каждая такая функция и будет мидлварой. Самый простой пример - это вывод логов. Такая функция будет выводить в лог данные и передавать дальше, никак их не меняя:

13 Мидлвараredux-thunkдобавляется в Redux и позволяет использовать асинхронный код внутри dispatch(). С ее помощью выносят логику выполнения запросов и обновления хранилища в отдельные функции (thunks). Вот пример такой функции:

14 Вообще thunk необязательно должен быть асинхронным. Thunk - это всего лишь функция, которая возвращает другую функцию и принимает dispatch и getState (при необходимости) в качестве параметров. Thunk может выполнять синхронные действия или комбинации синхронных и асинхронных операций, но в этом уроке нам это не так важно.

15 Код из примера выше можно реализовать и безredux-thunk, просто написав асинхронную функцию. Ей на вход мы передадим dispatch:

16 Разница проявляется в более продвинутых вариантах использования - например, когда мы работаем с состоянием или глобальными объектами. В этом случае не обойтись безredux-thunk:

17 Основное отличие здесь - это возможность передачи дополнительных параметров в thunk-функцию через extraArgument, а также быстро получить текущее состояние хранилища с помощью функции getState.

18 <h2>Механизм createAsyncThunk()</h2>

19 Несмотря на удобстваredux-thunk, сами по себе thunks не уменьшают количество кода. Та же обработка ошибок всё еще составляет большую его часть. Здесь на помощь приходит инструмент createAsyncThunk(), появившийся вместе с redux-toolkit:

20 Каждый thunk, созданный через createAsyncThunk(), содержит внутри себя три события:

21 <ul><li>pending</li>

22 <li>fulfilled</li>

23 <li>rejected</li>

24 </ul>Они соответствуют состояниям промиса и вызываются в Redux Toolkit в тот момент, когда промис переходит в одно из этих состояний. Нам не обязательно реагировать на все. Мы сами выбираем, что нам важно в приложении.

25 <h2>Применение thunk</h2>

26 Thunk выходит за рамки обработки асинхронных запросов. Этот механизм можно использовать в различных сценариях, где требуется вынос сложной логики или побочных эффектов из компонентов. Thunk также оказывается полезным для написания логики, зависящей от состояния в Redux. Ещё одним важным аспектом использования Thunk является возможность отправки нескольких действий в определенный момент или в течение заданного времени.

27 При этом Thunk дополняет, а не заменяет useEffect, который по-прежнему может использоваться для работы с побочными эффектами в компонентах. Если необходимо выделить какую-то логику из компонента, чтобы сделать его более универсальным для повторного использования, эту логику можно перенести в Thunk вместо использования useEffect.

28 На практике useEffect и createAsyncThunk часто используются вместе. Например, вызов dispatch(fetchData()) внутри useEffect с пустым массивом зависимостей позволяет подгрузить данные при инициализации компонента, обеспечивая эффективное взаимодействие между асинхронными операциями и жизненным циклом компонента.

29 <h2>Что дальше</h2>

30 В современной разработке вместе с React часто используется TypeScript. Вы можете познакомиться с ним в курсе<a>Основы Typescript</a>.