Тёмный

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

Михаил Непомнящий
Подписаться 68 тыс.
Просмотров 106 тыс.
50% 1

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

Опубликовано:

 

4 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 233   
@mikhailmikhailovich1037
@mikhailmikhailovich1037 Год назад
У автора есть талант обучать других людей. Информация подается очень корректно и доступно. Большое спасибо!
@true227
@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
@xdayx53 7 месяцев назад
да-да
@vladprodan7010
@vladprodan7010 3 года назад
Крутое видео! Ты крут! Давай RTK Query
@juniorprogrammer3246
@juniorprogrammer3246 3 года назад
Да RTK Query нужен
@anazkomult
@anazkomult 3 года назад
Да, было бы чудесно. Михаил, очень просим!)
@mikhail_shokun
@mikhail_shokun 2 года назад
Хотим RTK Query
@loner_feed1738
@loner_feed1738 2 года назад
Как раз из-за таких добрых людей как ты меня ещё не уволили)
@den_ph
@den_ph 2 года назад
Благодарю вас,Михаил, за понятное и подробное объяснение! Очень нравится манера подачи материала.
@СтройКонсалт
@СтройКонсалт Год назад
Присоединяюсь! Грамотная речь, отсутствие паразитов и дефектов речи, глубокое понимание автором темы и спокойная подача! Большая благодарность!
@lightinthedark5708
@lightinthedark5708 3 года назад
Прекрасная речь и очень доходчивое объяснение. Спасибо, Михаил!
@ИванВалучев-э5р
Одно удовольствие, учится по вашим роликам, большое спасибо!)
@maga_frank
@maga_frank Год назад
Чувак спасибо тебе за такой качественный контент. Не затянуто и не коротко прям идеально. Не буду указать пальцем, но есть некоторые которые пробегают быстро что то рассказывают, не успеваешь за ними и ничего не понятно.. А тут все идеально)
@anazkomult
@anazkomult 3 года назад
Отличный урок по Redux Toolkit и createAsyncThunk. Спасибо, Михаил!
@kenanhaciyev3759
@kenanhaciyev3759 Год назад
это лучший видеоуроки по redux-toolkit и createAsyncThunk
@AlEgorova
@AlEgorova Год назад
Супер супер, наконец-то у меня в голове встало все вместе ))) Спасибо огромное за такое доходчивое видео!!!
@keymsr
@keymsr 2 года назад
Спасибище! Долго не мог разобраться, а тут всё просто и наглядно оказалось.
@ИванИванов-л7ю
@ИванИванов-л7ю 5 месяцев назад
Михаил огромная благодарность вам за это видео в частности и за весь обучающий контент который вы делаете!
@alextotun
@alextotun 2 года назад
Все четко, ясно, подробно. Разбито на понятные этапы, до этого смотрел первый ролик про тулкит. Спасибо! Всех благ!
@soln_sce3088
@soln_sce3088 10 месяцев назад
Спасибо огромное! Самый лучший туториал по этой теме из всех, что я видела.
@bobby_jones
@bobby_jones 3 года назад
Очень благодарен за это видео. Помогло сильно. Не мог сам разобраться в Redux thunk в Redux Toolkit
@Romul3003
@Romul3003 2 года назад
Спасибо. Разбирал все сам по документации, а с твоей помощью закрепил и все улеглось в голове)
@MrOmelnik
@MrOmelnik 2 года назад
Спасибо автору за отличный обучающий материал. Доступно, понятно, без "воды". Удачи Вам.
@denisu9286
@denisu9286 Год назад
Спасибо за легкий и понятный рассказ
@alexey9404
@alexey9404 Год назад
Спасибо за инициативу во второй части ролика и то что ты его продлил. Очень полезная инфа! Спасибо. Продолжай в том же духе 👍
@Tech-m3o
@Tech-m3o 10 месяцев назад
Сейчас я так понял используют такой синтаксис: extraReducers(builder) { builder.addCase(fetchGetTodos.fulfilled, (state, action) => { state.todos = action.payload; }) } вместо: extraReducers: { [fetchGetTodos.fulfilled]: (state, action) => { state.todos = action.payload; } }
@olegnesterov9957
@olegnesterov9957 3 года назад
Огромное спасибо за подробное объяснение работы с разными типами запросов
@Werma2006
@Werma2006 3 года назад
Спасибо, прочитал быстрый старт официальный для тулкит, ничего не запустилось и очень непонятно, а тут просто офигенно, спасибо
@KenKeray
@KenKeray 2 года назад
Редко встречаю, когда видео лучше мануала. Спасибо!
@НиколайХаритонов-й3н
Видео огонь, тема очень хорошо раскрыта!
@krissssssssssssssssss
@krissssssssssssssssss Год назад
Михаил, видео действительно получилось полезным! Посмотрела, так как на проекте используется redux toolkit, а я только redux использовала. Особенно отмечу дикцию, вас приятно слушать, четко и по делу рассказываете, видео просто находка
@nursultanyerzhan4432
@nursultanyerzhan4432 Год назад
Одним словом супер 😊. Простой, понятный, подробный.
@mikhaildevichensky6407
@mikhaildevichensky6407 2 года назад
Спасибо ! Приятный голос и четкость мыслей . Лайк и Подписка !
@deriirostyslav2335
@deriirostyslav2335 Год назад
да реально всё получается. Спасибо
@stephencurry8078
@stephencurry8078 3 года назад
только что зашел в документацию, офигел от жизни, ничего не понял, все таки не дорос пока, и зашел в ютуб с минимальной надеждой что то найти, и вот оно, спасибо. Сейчас глянем что да как
@ylcsl4378
@ylcsl4378 2 года назад
Вот бы я раньше нашёл это видео, спасибо за труд!
@voidcode2534
@voidcode2534 Год назад
Большое спасибо! Люблю ваши видео, приятная и понятная подача
@akovalevv
@akovalevv 2 года назад
Одни из лучших видео на ютубе. Спасибо большое. Очень нравится что по мимо отличной подачи, автор пишет все на современных технологиях. Очень много туториалов даже за 2021- 22 года до сих пор используют старый редакс, а не тулкит.
@СергейКузнецов-щ5я
Михаил, сильно благодарю. Классный видос, классная подача, классный урок!!!
@avmru
@avmru 2 года назад
Спасибо за createAsyncThunk!
@toscaantosca4541
@toscaantosca4541 2 года назад
Спасибо! Полезный урок!
@outlaw4Iife
@outlaw4Iife 2 года назад
Спасибо, в качестве благодарности напишу ключевые слова чтоб твой видос быстрее искали. redux redux toolkit react-redux createAsyncThunk
@DmitryDolganov
@DmitryDolganov 3 года назад
Михаил, салют! Благодарю!
@mishanep
@mishanep 3 года назад
Обращайтесь :)
@j4st134
@j4st134 2 года назад
спасибо, очень помогло! (сижу джуном 6 месяцев опыта на мидловской позиции, пытаюсь делать задачи в сроки)
@evgeniyn1542
@evgeniyn1542 3 года назад
Спасибо Михаил! Надо будет в выходные посмотреть :)
@АлександрВащекин-с3й
Михаил, видео супер!!! Прекрасное объяснение
@warcraft.mp4889
@warcraft.mp4889 5 месяцев назад
Вы просто прелесть
@EgorkaTubeOne
@EgorkaTubeOne 2 года назад
Очень приятный голос и приятная подача материала!
@user-bt1rh9rt8j
@user-bt1rh9rt8j 3 года назад
Спасибо!!! Очень ждал это видео после предыдущего про редакс
@pitbrest
@pitbrest Год назад
Спасибо за урок.
@Vlad-jp3co
@Vlad-jp3co Год назад
Спасибо за ваши старания, Михаил)
@OleksandrDanylchenko2k
@OleksandrDanylchenko2k 3 года назад
Отлично, как раз на этой неделе понадобилось)
@Litaka1
@Litaka1 9 месяцев назад
отличный урок!! Спасибо, на работе в проекте назрела необходимость в использовании редакса. Я слишком далеко зашла в пропсдрилинге и нужно было это исправлять пока не поздно. Помнила, что начинала разбираться в классическом редаксе и было все понятно, до момента типизации))) но делать-то надо, еще только 9 месяцев опыта и я одна единственная фронт-программист, все делаю сама) немного страшно было, но по первому вашему уроку, я разобралась+помог коммент про типизацию, все РАБОТАЕТ!!!!! Смотрю дальше
@minkostas7232
@minkostas7232 8 месяцев назад
как это вы так устроились без знаний ?))
@Litaka1
@Litaka1 8 месяцев назад
это не IT компания, основное направление деятельности производство, а мой маленький it отдел - стартап. В чем-то легче(в плане нет дедлайнов), так как стадия разработки только (нет клиентов)@@minkostas7232
@НиколайСеливанов-и2в
Большое спасибо! Redux стал не так страшен :-) Отличное видео.
@AndreyKarlin
@AndreyKarlin Год назад
САМОЕ ЛУЧШЕЕ НА ЮТУБЕ ПО РЕДАКС ТУЛКИТ! СПАСИБО ОГРОМНОЕ, С МЕНЯ ПОДПИСКА И ЛАЙКИ!
@МатвейМанько-ь6ч
Спасибо за туториал!
@vova9962
@vova9962 2 года назад
Лайк, подписка, все уведомления !
@АнатолийГорбов-о1ь
Михаил спасибо, отличное видео!
@username739
@username739 Год назад
Дай тебе бог здоровья!)
@sergiopuccini
@sergiopuccini Год назад
Лайк! Подписка! Очень круто объяснено.
@kostya9772
@kostya9772 2 года назад
Спасибо большое за видео!
@КириллПетров-ш3н3к
Спасибо! Отлично помогло разобраться.
@nivaech
@nivaech 2 года назад
Охренительно полезное видео. Спасибо, очень помогло.
@ДмитроСіченко
@ДмитроСіченко 2 года назад
Спасибо , видео было очень полезное , светлая тема, оказалась очень приятная для восприятия, размер шрифта отличный!!!
@МихаилНиколаев-з9л
@МихаилНиколаев-з9л 8 месяцев назад
новый вид записи 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
@Zadrot1080p 6 месяцев назад
Вот еще варик 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; }) }
@brontytv4266
@brontytv4266 3 месяца назад
люблю тебя братишка
@АлексейФиленко-ф4к
Как всегда большое спасибо!)
@MrMikelend
@MrMikelend 2 года назад
Очень круто! Огромное спасибо!
@garikmelqonyan9130
@garikmelqonyan9130 2 года назад
Many thanks to you, Michael. Was a great tutorial as the most of your content.
@sqpine
@sqpine 2 года назад
Спасибо. Очень полезные видео, приятный голос и подача.Подписался😁
@dimalukashenko4865
@dimalukashenko4865 3 года назад
Очень крутое видео. Чётко, без воды. Продолжай в том же духе.
@Rostyslav-hv9un
@Rostyslav-hv9un 2 года назад
Видео отличное, помогло мне понять принципы работы Toolkit. Но эта белая тема в VSCode)))))
@ОлегФилатов-м6е
всё круто, спасибо
@xdayx53
@xdayx53 7 месяцев назад
спасибо)
@mivalb7979
@mivalb7979 2 года назад
Круто, спасибо!
@sergeyplotnikov5031
@sergeyplotnikov5031 2 года назад
Как можно это унифицировать? Не хочется для каждого запроса прописывать столько всего. Большое спасибо за очень доходчивое объяснение!
@mishanep
@mishanep 2 года назад
Как и в обычном redux-thunk, rtk позволяет прокидывать для санков extra-параметр. Вместе с ним можно передать свою абстракцию для работы с crud-операциями, и внутри санка уже работать с ней, передавая нужные значения.
@ГульзанаКаткелдиева-ъ4ь
спасибо, все понятно
@АннаБояршинова-о3т
Redux Toolkit. Thanks!
@artemlesnov4869
@artemlesnov4869 3 года назад
Шикарный материал!!! Спасибо большое. хотел еще спросить о выносе логики из редюсеров в екстраредьюсеры и соединение нескольких слайсов для совместной реализации какой-то логики! было бы интересно посмотреть
@enjoynfun
@enjoynfun 2 года назад
Thank you very mach)))
@nickdunne1235
@nickdunne1235 2 года назад
Спасибо!
@vladvoloshenko5701
@vladvoloshenko5701 2 года назад
лучший)
@asergeev707
@asergeev707 3 года назад
Отличное видео
@ВалерийПерелыгин-ъ3е
Привет, старик!! ) Вкратце словами интернет классика... Нихрена не понятно, но оооочень интересно! ))
@mishanep
@mishanep 3 года назад
Какими судьбами, дружище? :)
@vdvchannel7765
@vdvchannel7765 2 года назад
толково 👍
@dev-to-prod
@dev-to-prod 2 года назад
Контент огонь! Лайк, подписка) More React content pls!)
@andrewsmal5173
@andrewsmal5173 2 года назад
Круто!!!
@williammutua
@williammutua 2 года назад
Well explained 💯
@mr.zxzxzxz3816
@mr.zxzxzxz3816 2 года назад
спасибо большое! топовые видосы
@user_8911
@user_8911 Год назад
Очень люблю Ваши видео. Просьба - уменьшить разрешение экрана. С телефона ничего не видно, что в документации написано.
@vl_rotche
@vl_rotche 3 года назад
Браво!!
@vadim700230
@vadim700230 2 года назад
А правильно ли сначала диспатчить асинхронный экшен, а потом уже синхронный? Ведь из-за этого создается задержка в обновлении UI. И конечно же спасибо за урок, подробно и доступно объяснили.
@МаксФамильный-о4п
@МаксФамильный-о4п 3 года назад
Спасибо большое за видео! все очень доступно и понятно, НО можно пожалуйста попросить Вас сделать примерно этот же пример только в классовом компоненте. Решил для себя разобраться, но если честно это стало большой проблемой. Я и другие зрители думаю скажут Вам спасибо за это. P.S. лайк поставил и подписался)
@МаксФамильный-о4п
@МаксФамильный-о4п 3 года назад
можно даже не видео отдельное я на codepen или куда еще залить.
@mishanep
@mishanep 3 года назад
Приветствую. Видео точно не будет :) В чем конкретно возникла сложность? Я классовые компоненты использую только для error контейнеров (потому что по-другому нельзя). В остальном всё на функциях, сам Реакт нам это рекомендует. В классах, понятно, не действуют хуки. А подключение к Редаксу происходит через пень колоду, то есть через метод connect из react-redux, который добавляет в пропсы значения из хранилища и конкретные экшны.
@МаксФамильный-о4п
@МаксФамильный-о4п 3 года назад
@@mishanep будем пробовать. Спасибо за ответ
@sasdasaasdasdasdadad5354
@sasdasaasdasdasdadad5354 2 года назад
спасибо
@MarshallBanananana
@MarshallBanananana Год назад
Лекция информативная и доходчивая - Спасибо! Установить стартовый проект не удалось ни Ярном (отсутствует файл лицензии) ни NPM (401 - нет аутентификации).
@mishanep
@mishanep Год назад
Lock файл попробуйте удалить и запустить заново
@MarshallBanananana
@MarshallBanananana Год назад
@@mishanepСпасибо, удаление yarn.lock помогло. npm install; npm fix --force; npm run - live-server поднялся!
@prohanya
@prohanya Год назад
Большое спасибо за уроки по Редаксу. Очень подробно, с актуальной информацией. Подскажите, есть ли какие-нибудь видео по Entity Adapter?
@mishanep
@mishanep Год назад
Для ютуба не записывал. Я разбирал его в своём курсе по редаксу - классная штука.
@kspshnik
@kspshnik Год назад
Михаил, доброе утро! Спасибо за супервидео. Скажите, а по createEntityAdapter() Вы такого видео случайно не планируете?
@mishanep
@mishanep Год назад
Приветствую. У меня он разобран на курсе по редаксу (юдеми, степик). На Ютуб пока не планировал. Штука удобная, да.
@abdulovdb
@abdulovdb 10 месяцев назад
Михаил, какую тему используете в VS Code ? В последнее время в поисках светлой темы, но до сих пор безуспешно. Но ваша, по крайней мере в видео, мне не режет глаза)
@mishanep
@mishanep 10 месяцев назад
Сейчас я работаю с темной темой CodeSandbox 2021. Какой была тема в момент записи данного видео, наверняка не скажу. Но вполне возможно это была стандартная светлая тема, идущая из коробки.
@maksymkyryliuk492
@maksymkyryliuk492 2 года назад
Михаил, знаю что скорей всего вы наверное не ответите на мой вопрос, видео уже давнее ведь. Но всё же попытаюсь задать его. А можно ли редакс-тулкит использовать совместно с интерсепторами аксиоса? 🤔
@pandalove6795
@pandalove6795 Год назад
На 39:10 увидел, что у вас в функции addTodo добавляется новый todo с id = времени. Это же неправильно изначально, разве нет? Функция addTodo не является чистой, для добавления подобных id, я бы использовал middleware. Объясню т.к. я не силен в терминах, в теории и т.д., я жесткий практик. Я бы сделал новую функцию addTodo, которая перед вызовом addTodo из reducer как раз генерировала бы id. В общем и целом, да это называется middleware. Т.к. id устанавливается между dispatch и addTodo из reducer. Функции, которые написаны были в ролике, так же являются middleware.
@romandeveloper7720
@romandeveloper7720 Год назад
А что лучше и практичнее использовать при асинхронщине? Ну и твое личное предпочтение, потому что, похоже, тут вкусовщина. 1. Изнутри диспатчить нужные редьюсеры 2. Не юзать диспатч внутри, а оставлять всю логику на экстра-редьюсеры - делать эту логику на этапах pending, rejected, fullfilled
@mishanep
@mishanep Год назад
Поработав с этим всем подольше, я пришел к тому, что второй, из описанных вами способов, мне ближе. Первый больше подходит в кейсах, когда мы получаем с бэкенда большую структуру данных, которую частями надо разложить в разные слайсы, не передавая в каждый из них всей структуры целиком.
@glorglorsky7987
@glorglorsky7987 2 года назад
супер! спасибо большое!) очень классно объясняешь! почему используете fetch вместо axios?
@mishanep
@mishanep 2 года назад
Чтобы не устанавливать дополнительную библиотеку. Впрочем, это не значит, что axios я вообще не использую)
@awenn2015
@awenn2015 2 года назад
12:28 необязательно что то помещать в массив зависимостей эффекта , можно просто пустой передать и все
@awenn2015
@awenn2015 2 года назад
27:19 для таких вещей typescript и нужен что бы не гадать что там функции принимают ))
@armensargsyan8981
@armensargsyan8981 Год назад
14:30 в реальности будет именно так, он поподет в rejected, а дальше уже можно взоимодействовать с state, ошибка же todos.map is not a function... а в коде в initialState есть дефолтное значение? todos: [] ?
@kosechok1
@kosechok1 2 года назад
Михаил, спасибо за хороший урок Очень бы хотел посмотреть как можно реализовать поведение кнопки “отметить всё” что бы и на сервер шли все запросы и код был переиспользован. Сделал у себя но чтото мне не нравится мой вариант :( Буду признателен за совет
@mishanep
@mishanep 2 года назад
Приветствую! По-хорошему для реализации такой фичи нужно, чтобы сервер обрабатывал соответствующий запрос. Было бы странно делать десятки или сотни запросов на каждую тудушку для выполнения типового действия. Поэтому здесь должна быть согласованная работа фронта и бэка. Как вариант, бэкенд может вернуть либо обновленный массив всех тудушек и мы тогда просто перезаписываем стейт, либо статус успешного завершения и тогда мы уже делаем своё событие обновление стейта.
Далее
НЮША УСПОКОИЛА КОТЯТ#cat
00:43
Просмотров 448 тыс.
The Most Important Design Pattern in React
35:04
Просмотров 62 тыс.
Типизация для Redux Toolkit
22:24
Просмотров 42 тыс.
Redux - Complete Tutorial (with Redux Toolkit)
37:01
Просмотров 217 тыс.