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

[@mikhailmikhailovich1037]

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

[@maga_frank]

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

[@den_ph]

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

[@СтройКонсалт]

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

[@ИванВалучев-э5р]

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

[@lightinthedark5708]

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

[@AlEgorova]

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

[@loner_feed1738]

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

[@alextotun]

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

[@kenanhaciyev3759]

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

[@anazkomult]

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

[@krissssssssssssssssss]

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

[@keymsr]

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

[@MrOmelnik]

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

[@Romul3003]

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

[@akovalevv]

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

[@soln_sce3088]

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

[@alexey9404]

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

[@ИванИванов-л7ю]

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

[@bobby_jones]

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

[@olegnesterov9957]

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

[@Werma2006]

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

[@vladprodan7010]

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

[@juniorprogrammer3246]

Да RTK Query нужен

[@anazkomult]

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

[@mykhailo_shokun]

Хотим RTK Query

[@Litaka1]

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

[@minkostas7232]

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

[@Litaka1]

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

[@j4st134]

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

[@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]

да-да

[@mikhaildevichensky6407]

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

[@denisu9286]

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

[@KenKeray]

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

[@stephencurry8078]

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

[@outlaw4Iife]

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

[@voidcode2534]

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

[@НиколайХаритонов-й3н]

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

[@EgorkaTubeOne]

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

[@ДмитроСіченко]

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

[@evgeniyn1542]

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

[@AndreyKarlin]

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

[@nursultanyerzhan4432]

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

[@СергейКузнецов-щ5я]

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

[@user-bt1rh9rt8j]

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

[@НиколайСеливанов-и2в]

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

[@deriirostyslav2335]

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

[@ylcsl4378]

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

[@АлександрВащекин-с3й]

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

[@DmitryDolganov]

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

[@mishanep]

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

[@Vlad-jp3co]

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

[@vova9962]

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

[@OleksandrDanylchenko2k]

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

[@nivaech]

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

[@Markuvines]

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

[@garikmelqonyan9130]

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

[@dimalukashenko4865]

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

[@sqpine]

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

[@avmru]

Спасибо за createAsyncThunk!

[@Rostyslav-hv9un]

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

[@КириллПетров-ш3н3к]

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

[@sergiopuccini]

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

[@АнатолийГорбов-о1ь]

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

[@MrMikelend]

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

[@armensargsyan8981]

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

[@МихаилНиколаев-з9л]

новый вид записи 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; }) }

[@brontytv4266]

люблю тебя братишка

[@АлексейФиленко-ф4к]

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

[@kostya9772]

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

[@artemlesnov4869]

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

[@pitbrest]

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

[@ВалерийПерелыгин-ъ3е]

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

[@mishanep]

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

[@МатвейМанько-ь6ч]

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

[@escobar929]

автор просто красава!!!

[@warcraft.mp4889]

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

[@sergeyplotnikov5031]

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

[@mishanep]

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

[@dev-to-prod]

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

[@awenn2015]

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

[@user_8911]

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

[@pandalove6795]

На 39:10 увидел, что у вас в функции addTodo добавляется новый todo с id = времени. Это же неправильно изначально, разве нет? Функция addTodo не является чистой, для добавления подобных id, я бы использовал middleware. Объясню т.к. я не силен в терминах, в теории и т.д., я жесткий практик. Я бы сделал новую функцию addTodo, которая перед вызовом addTodo из reducer как раз генерировала бы id. В общем и целом, да это называется middleware. Т.к. id устанавливается между dispatch и addTodo из reducer. Функции, которые написаны были в ролике, так же являются middleware.

[@ОлегФилатов-м6е]

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

[@mivalb7979]

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

[@MarshallBanananana]

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

[@mishanep]

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

[@MarshallBanananana]

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

[@ГульзанаКаткелдиева-ъ4ь]

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

[@МаксФамильный-о4п]

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

[@МаксФамильный-о4п]

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

[@mishanep]

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

[@МаксФамильный-о4п]

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

[@asergeev707]

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

[@prohanya]

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

[@mishanep]

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

[@vladvoloshenko5701]

лучший)

[@whicencer8819]

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

[@mishanep]

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

[@Анна_Бояршинова]

Redux Toolkit. Thanks!

[@awenn2015]

27:19 для таких вещей typescript и нужен что бы не гадать что там функции принимают ))

[@maksymkyryliuk492]

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

[@vdvchannel7765]

толково 👍

[@Кашель-о5у]

Спасибо!

[@a.s.scherba]

А блок try/catch же выбрасывает ошибку автоматически, для чего там делать явную проверку и выбрасывать вручную?

[@maxzavadovych9142]

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

[@andrewsmal5173]

Круто!!!

[@kspshnik]

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

[@mishanep]

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

[@enjoynfun]

Thank you very mach)))

[@maxhaponenko]

Скажите, а зачем выбрасывать ошибку чтобы там же ее словить. Почему бы просто в блоке проверки !response.ok не сделать return rejectWithValue(new Error()) ?

[@williammutua]

Well explained 💯

[@itmonster5153]

18:00 Ошибка и так будет, не понятно зачем еще какой-то метод использовать)

[@awenn2015]

Хотел я такой же хелпер себе сделать 28:15 но в typescript вообще хз какого он типа поэтому пришлось тупо дублировать код(( есть кто знающий ? Какой тип у хелпера ?

[@xdayx53]

спасибо)

[@vl_rotche]

Браво!!

[@GioMikadzegio9000]

спасибо !!!! если есть возможность снять видео про react query? спасибо !

[@mishanep]

У меня на канале есть такое видео

[@КостяКипр]

Михаил, полностью повторял за вам проект ,но появился нюанс, что в devTools при первом рендеринге App происходит два pending и два fulfilled, дальше все работает как и должно. Я это исправил отключением StrictMode. Посмотрел в вашем репозитории и там StrictMode включен и нет двойных запросов. В чем может быть дело, подскажите?

[@mishanep]

В разных версиях Реакта?) В 18-й версии двойной ререндер при старте - это норма, ибо стрикт мод компонент это специально делает. В 17-й версии поведение отличалось.