Асинхронная работа с Redux Toolkit и createAsyncThunk

Работа с API в Redux Toolkit без использования дополнительных библиотек. Создание асинхронных событий, их жизненный цикл и использование в React-приложении.
Видео по основам Redux Toolkit
• Redux Toolkit для упра...
Стартовый проект:
github.com/michey85/redux-too...
Конечный вариант:
github.com/michey85/redux-too...
#redux
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

[@mikhailmikhailovich1037]

У автора есть талант обучать других людей. Информация подается очень корректно и доступно. Большое спасибо!

[@user-yx4zt2ev2g]

Одно удовольствие, учится по вашим роликам, большое спасибо!)

[@lightinthedark5708]

Прекрасная речь и очень доходчивое объяснение. Спасибо, Михаил!

[@anazkomult]

Отличный урок по Redux Toolkit и createAsyncThunk. Спасибо, Михаил!

[@alextotun]

Все четко, ясно, подробно. Разбито на понятные этапы, до этого смотрел первый ролик про тулкит. Спасибо! Всех благ!

[@akovalevv]

Одни из лучших видео на ютубе. Спасибо большое. Очень нравится что по мимо отличной подачи, автор пишет все на современных технологиях. Очень много туториалов даже за 2021- 22 года до сих пор используют старый редакс, а не тулкит.

[@AlEgorova]

Супер супер, наконец-то у меня в голове встало все вместе ))) Спасибо огромное за такое доходчивое видео!!!

[@MrOmelnik]

Спасибо автору за отличный обучающий материал. Доступно, понятно, без "воды". Удачи Вам.

[@maga_frank]

Чувак спасибо тебе за такой качественный контент. Не затянуто и не коротко прям идеально. Не буду указать пальцем, но есть некоторые которые пробегают быстро что то рассказывают, не успеваешь за ними и ничего не понятно.. А тут все идеально)

[@user-jz7pn6cd2q]

Спасибо , видео было очень полезное , светлая тема, оказалась очень приятная для восприятия, размер шрифта отличный!!!

[@olegnesterov9957]

Огромное спасибо за подробное объяснение работы с разными типами запросов

[@loner_feed1738]

Как раз из-за таких добрых людей как ты меня ещё не уволили)

[@alexey9404]

Спасибо за инициативу во второй части ролика и то что ты его продлил. Очень полезная инфа! Спасибо. Продолжай в том же духе 👍

[@den_ph]

Благодарю вас,Михаил, за понятное и подробное объяснение! Очень нравится манера подачи материала.

[@user-uo7tg9tk3j]

Присоединяюсь! Грамотная речь, отсутствие паразитов и дефектов речи, глубокое понимание автором темы и спокойная подача! Большая благодарность!

[@nursultanyerzhan4432]

Одним словом супер 😊. Простой, понятный, подробный.

[@vladprodan7010]

Крутое видео! Ты крут! Давай RTK Query

[@juniorprogrammer3246]

Да RTK Query нужен

[@anazkomult]

Да, было бы чудесно. Михаил, очень просим!)

[@mikhail_shokun]

Хотим RTK Query

[@Romul3003]

Спасибо. Разбирал все сам по документации, а с твоей помощью закрепил и все улеглось в голове)

[@krissssssssssssssssss]

Михаил, видео действительно получилось полезным! Посмотрела, так как на проекте используется redux toolkit, а я только redux использовала. Особенно отмечу дикцию, вас приятно слушать, четко и по делу рассказываете, видео просто находка

[@Werma2006]

Спасибо, прочитал быстрый старт официальный для тулкит, ничего не запустилось и очень непонятно, а тут просто офигенно, спасибо

[@keymsr]

Спасибище! Долго не мог разобраться, а тут всё просто и наглядно оказалось.

[@mikhaildevichensky6407]

Спасибо ! Приятный голос и четкость мыслей . Лайк и Подписка !

[@soln_sce3088]

Спасибо огромное! Самый лучший туториал по этой теме из всех, что я видела.

[@bobby_jones]

Очень благодарен за это видео. Помогло сильно. Не мог сам разобраться в Redux thunk в Redux Toolkit

[@voidcode2534]

Большое спасибо! Люблю ваши видео, приятная и понятная подача

[@user-ky4vq5jm5u]

Видео огонь, тема очень хорошо раскрыта!

[@artemlesnov4869]

Шикарный материал!!! Спасибо большое. хотел еще спросить о выносе логики из редюсеров в екстраредьюсеры и соединение нескольких слайсов для совместной реализации какой-то логики! было бы интересно посмотреть

[@user-ce5bm1lv1c]

Михаил огромная благодарность вам за это видео в частности и за весь обучающий контент который вы делаете!

[@Markuvines]

Спасибо за хорошую подачу информации.

[@dimalukashenko4865]

Очень крутое видео. Чётко, без воды. Продолжай в том же духе.

[@denisu9286]

Спасибо за легкий и понятный рассказ

[@user-fd8bl4nq4q]

Михаил, сильно благодарю. Классный видос, классная подача, классный урок!!!

[@sqpine]

Спасибо. Очень полезные видео, приятный голос и подача.Подписался😁

[@EgorkaTubeOne]

Очень приятный голос и приятная подача материала!

[@user-pt7un8yu9b]

Михаил, видео супер!!! Прекрасное объяснение

[@MrMikelend]

Очень круто! Огромное спасибо!

[@j4st134]

спасибо, очень помогло! (сижу джуном 6 месяцев опыта на мидловской позиции, пытаюсь делать задачи в сроки)

[@user-bt1rh9rt8j]

Спасибо!!! Очень ждал это видео после предыдущего про редакс

[@nivaech]

Охренительно полезное видео. Спасибо, очень помогло.

[@user-du9bm5mv1o]

Спасибо! Отлично помогло разобраться.

[@toscaantosca4541]

Спасибо! Полезный урок!

[@user-ue7lj2to9q]

Большое спасибо! Redux стал не так страшен :-) Отличное видео.

[@kenanhaciyev3759]

это лучший видеоуроки по redux-toolkit и createAsyncThunk

[@evgeniyn1542]

Спасибо Михаил! Надо будет в выходные посмотреть :)

[@Vlad-jp3co]

Спасибо за ваши старания, Михаил)

[@garikmelqonyan9130]

Many thanks to you, Michael. Was a great tutorial as the most of your content.

[@kostya9772]

Спасибо большое за видео!

[@ylcsl4378]

Вот бы я раньше нашёл это видео, спасибо за труд!

[@KenKeray]

Редко встречаю, когда видео лучше мануала. Спасибо!

[@OleksandrDanylchenko2k]

Отлично, как раз на этой неделе понадобилось)

[@avmru]

Спасибо за createAsyncThunk!

[@pitbrest]

Спасибо за урок.

[@user-yv4ou3jl8y]

Как всегда большое спасибо!)

[@user-vm2db5cq1g]

Михаил спасибо, отличное видео!

[@outlaw4Iife]

Спасибо, в качестве благодарности напишу ключевые слова чтоб твой видос быстрее искали. redux redux toolkit react-redux createAsyncThunk

[@AndreyKarlin]

САМОЕ ЛУЧШЕЕ НА ЮТУБЕ ПО РЕДАКС ТУЛКИТ! СПАСИБО ОГРОМНОЕ, С МЕНЯ ПОДПИСКА И ЛАЙКИ!

[@sergeyivanov3351]

Лайк! Подписка! Очень круто объяснено.

[@deriirostyslav2335]

да реально всё получается. Спасибо

[@Litaka1]

отличный урок!! Спасибо, на работе в проекте назрела необходимость в использовании редакса. Я слишком далеко зашла в пропсдрилинге и нужно было это исправлять пока не поздно. Помнила, что начинала разбираться в классическом редаксе и было все понятно, до момента типизации))) но делать-то надо, еще только 9 месяцев опыта и я одна единственная фронт-программист, все делаю сама) немного страшно было, но по первому вашему уроку, я разобралась+помог коммент про типизацию, все РАБОТАЕТ!!!!! Смотрю дальше

[@minkostas7232]

как это вы так устроились без знаний ?))

[@Litaka1]

это не IT компания, основное направление деятельности производство, а мой маленький it отдел - стартап. В чем-то легче(в плане нет дедлайнов), так как стадия разработки только (нет клиентов)@@minkostas7232

[@user-ct8tp6jc9m]

Спасибо за туториал!

[@mivalb7979]

Круто, спасибо!

[@user-jf5ly9mg7h]

спасибо, все понятно

[@user-zs5iw1tw3w]

всё круто, спасибо

[@Rostyslav-hv9un]

Видео отличное, помогло мне понять принципы работы Toolkit. Но эта белая тема в VSCode)))))

[@user-lx5vv3uu8u]

Михаил, салют! Благодарю!

[@mishanep]

Обращайтесь :)

[@stephencurry8078]

только что зашел в документацию, офигел от жизни, ничего не понял, все таки не дорос пока, и зашел в ютуб с минимальной надеждой что то найти, и вот оно, спасибо. Сейчас глянем что да как

[@vova9962]

Лайк, подписка, все уведомления !

[@asergeev707]

Отличное видео

[@user-gc1zz5cu4n]

Спасибо!

[@williammutua]

Well explained 💯

[@warcraft.mp4889]

Вы просто прелесть

[@dev-to-prod]

Контент огонь! Лайк, подписка) More React content pls!)

[@xdayx53]

спасибо)

[@vdvchannel7765]

толково 👍

[@sasdasaasdasdasdadad5354]

спасибо

[@enjoynfun]

Thank you very mach)))

[@vl_rotche]

Браво!!

[@user-ih6ie9ve6d]

Redux Toolkit. Thanks!

[@vadim700230]

А правильно ли сначала диспатчить асинхронный экшен, а потом уже синхронный? Ведь из-за этого создается задержка в обновлении UI. И конечно же спасибо за урок, подробно и доступно объяснили.

[@user-fw5vu1gr5v]

Привет, старик!! ) Вкратце словами интернет классика... Нихрена не понятно, но оооочень интересно! ))

[@mishanep]

Какими судьбами, дружище? :)

[@andrewsmal5173]

Круто!!!

[@prohanya]

Большое спасибо за уроки по Редаксу. Очень подробно, с актуальной информацией. Подскажите, есть ли какие-нибудь видео по Entity Adapter?

[@mishanep]

Для ютуба не записывал. Я разбирал его в своём курсе по редаксу - классная штука.

[@user-ke6fj2tf2u]

Спасибо большое за видео! все очень доступно и понятно, НО можно пожалуйста попросить Вас сделать примерно этот же пример только в классовом компоненте. Решил для себя разобраться, но если честно это стало большой проблемой. Я и другие зрители думаю скажут Вам спасибо за это. P.S. лайк поставил и подписался)

[@user-ke6fj2tf2u]

можно даже не видео отдельное я на codepen или куда еще залить.

[@mishanep]

Приветствую. Видео точно не будет :) В чем конкретно возникла сложность? Я классовые компоненты использую только для error контейнеров (потому что по-другому нельзя). В остальном всё на функциях, сам Реакт нам это рекомендует. В классах, понятно, не действуют хуки. А подключение к Редаксу происходит через пень колоду, то есть через метод connect из react-redux, который добавляет в пропсы значения из хранилища и конкретные экшны.

[@user-ke6fj2tf2u]

@@mishanep будем пробовать. Спасибо за ответ

[@maxzavadovych9142]

Михаил а есть какая-то разница между тем чтобы передать просто значение completed в пропсы асинхронной функции и тем что используем функцию getState и так находим значение completed?

[@vladvoloshenko5701]

лучший)

[@glorglorsky7987]

супер! спасибо большое!) очень классно объясняешь! почему используете fetch вместо axios?

[@mishanep]

Чтобы не устанавливать дополнительную библиотеку. Впрочем, это не значит, что axios я вообще не использую)

[@user_8911]

Очень люблю Ваши видео. Просьба - уменьшить разрешение экрана. С телефона ничего не видно, что в документации написано.

[@true227]

Михаил, спасибо за видео. Прошло два года с момента выхода видео и теперь при записи через объектную нотацию в поле extraReducers, т.е в таком формате [fetchCards.pending]: (state, action) вылезает предупрждение в консоли о том, что The object notation for `createSlice.extraReducers` is deprecated . Корректная запись теперь через билдер extraReducers: (builder) => { builder.addCase(fetchCards.pending, (state) => { state.status = "loading"; }); Только вот в официальной доке указаны оба этих способа и про депришиайтед первого ни слова. Лучи поноса им

[@xdayx53]

да-да

[@sergeyplotnikov5031]

Как можно это унифицировать? Не хочется для каждого запроса прописывать столько всего. Большое спасибо за очень доходчивое объяснение!

[@mishanep]

Как и в обычном redux-thunk, rtk позволяет прокидывать для санков extra-параметр. Вместе с ним можно передать свою абстракцию для работы с crud-операциями, и внутри санка уже работать с ней, передавая нужные значения.

[@maksymkyryliuk492]

Михаил, знаю что скорей всего вы наверное не ответите на мой вопрос, видео уже давнее ведь. Но всё же попытаюсь задать его. А можно ли редакс-тулкит использовать совместно с интерсепторами аксиоса? 🤔

[@alexandrsereda6644]

Михаил, спасибо отличную лекцию. Не могли бы подсказать как избавиться от ошибки TypeScript для вычисляемых ключей [fetchTodos.pending]: (Имя вычисляемого свойства должно иметь тип string, number, symbol или any.ts(2464) (property) pending: AsyncThunkPendingActionCreator)?

[@goodgamershow6505]

Change to fetchTodos.pending.type

[@MarshallBanananana]

Лекция информативная и доходчивая - Спасибо! Установить стартовый проект не удалось ни Ярном (отсутствует файл лицензии) ни NPM (401 - нет аутентификации).

[@mishanep]

Lock файл попробуйте удалить и запустить заново

[@MarshallBanananana]

@@mishanepСпасибо, удаление yarn.lock помогло. npm install; npm fix --force; npm run - live-server поднялся!

[@m.g.0416]

Очень круто, спасибо! Но есть вопрос - а зачем в файле todoSlice.js в функции fetchTodos на 9 строке мы пишем блок с условием if (!response.ok) {..., ведь по сути сама конструкция try / catch предполагает, что если нам в response прилетает ошибка, то дальнейший код не должен исполняться и нас переносит в catch? Или я ошибаюсь в этом моменте?

[@mishanep]

Try catch ловит ошибки js. А отрицательный ответ с сервера не всегда ошибка

[@awenn2015]

12:28 необязательно что то помещать в массив зависимостей эффекта , можно просто пустой передать и все

[@armensargsyan8981]

14:30 в реальности будет именно так, он поподет в rejected, а дальше уже можно взоимодействовать с state, ошибка же todos.map is not a function... а в коде в initialState есть дефолтное значение? todos: [] ?

[@kspshnik]

Михаил, доброе утро! Спасибо за супервидео. Скажите, а по createEntityAdapter() Вы такого видео случайно не планируете?

[@mishanep]

Приветствую. У меня он разобран на курсе по редаксу (юдеми, степик). На Ютуб пока не планировал. Штука удобная, да.

[@Edgar-pu1lc]

Привет Михаил,cпасибо за видео, хотел кое что спросить, 25:40, а почему бы не удалить action removeDoto, и вместо этого из асинхронного action (deleteTodo), в случае удачного запроса, вернуть сам id, и потом уже в fullfiled удалить todo ? [removeTodo.fulfilled]: (state, action) => { state.todos = state.todos.filter(todo => todo.id !== action.payload) state.status = 'complited' },

[@Edgar-pu1lc]

Поспешил задавать вопрос, на 41:00 услышал ответ на свой вопрос )

[@user-yu7gm4df3f]

спасибо ! ) сейчас почитывю их rtk query - интегрированная с redux`ом библиотека для запросов . ох они там и намутили , капец ! ) я то думал оно легко будет , ага конечно ) . что скажете насчёт данного интсрумента в сравнении с его аналогами (swr, react query, да и еще qraphql всякие ) ? а вообще там столько всяких эффектов : например загрузка при смене и возвращении фокуса мыши на вкладку , всякие таймеры которые будут обновлять запросы , запись всех запросов в кэш , мутации на сервер и потом автоматом перезапрос туда же для обновления у себя .. что там еще ? а еще есть пропуск запросов по условию .. еще предзагрузки есть , когда ты можешь по разному поведению как правило при ховере мышью начать загрузку фоном .. ну и всякое там еще . объем функций большой у этих библиотек , как бы целая экосистема для автоматизации запросов , если разобраться то считаю полезной штукой .. но это нужно дуплить это дело нужно .

[@mishanep]

О том и речь, что задачи у всех разные и инструменты подбираются под задачи. Набирать инструменты впрок - бессмысленно. Если пока нет понимания зачем все эти подобные излишества, значит пока просто не было задач соответствующих. И это нормальная история, специфика может сильно разниться и спустя годы можно так и не столкнуться ни с чем подобным. Потом нет смысла сравнивать инструменты из разной плоскости. Например, GraphQL - это отдельная технология взаимодействия клиент/сервер, является аналогом REST API. Я бы предложил по пути изучения одного инструмента и его использования. Если вдруг упретесь в его ограничения под ваши задачи, тогда посмотреть, что есть еще смежного.

[@evgeniy2526]

Подскажите что лучше использовать для работы с api RTK Query vs createAsyncThunk? Заранее спасибо

[@mishanep]

Как это часто бывает в нашем деле - выбор зависит от задач =) На проектах мне пока в основном попадался createAsyncThunk, однако мне видится, что причина была в основном в новизне RTK Query и его относительной сырости. В теории с каждым годом он должен становиться всё более популярным. Пока ему всего год с хвостиком.

[@whicencer8819]

12:17 а можно ли вызывать этот dispatch например, при клике на кнопку, а не при орисовке?

[@mishanep]

Да, конечно. Пример использования по событию есть несколькими строчками выше. Аналогично можно и на onClick кнопки повесить.

[@user-ny4od6eq9h]

новый вид записи extraReducers, все остальное как и было: extraReducers: (builder) => { builder .addCase(fetchUsers.pending, (state) => { state.status = "loading"; state.error = null; }) .addCase(fetchUsers.fulfilled, (state, action) => { state.users = action.payload; state.status = "resolved"; state.error = null; }) .addCase(fetchUsers.rejected, (state, action) => {}); }

[@Zadrot1080p]

Вот еще варик extraReducers: (builder) => { builder .addCase(fetchTodos.pending, (state, action) => { state.status = 'loading'; state.error = null; }) .addCase(fetchTodos.fulfilled, (state, action) => { state.status = 'resolved'; state.todos = action.payload; }) .addCase(fetchTodos.rejected, (state, action) => { state.status = 'rejected'; state.error = action.payload; }) .addCase(deleteTodo.rejected, (state, action) => { state.status = 'rejected'; state.error = action.payload; }) .addCase(toggleStatus.rejected, (state, action) => { state.status = 'rejected'; state.error = action.payload; }) }