Асинхронная работа с Redux Toolkit и createAsyncThunk
HTML-код
- Опубликовано: 21 сен 2024
- Работа с API в Redux Toolkit без использования дополнительных библиотек. Создание асинхронных событий, их жизненный цикл и использование в React-приложении.
Видео по основам Redux Toolkit
• Redux Toolkit для упра...
Стартовый проект:
github.com/mic...
Конечный вариант:
github.com/mic...
#redux
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru...
paypal.me/mish...
У автора есть талант обучать других людей. Информация подается очень корректно и доступно. Большое спасибо!
Михаил, спасибо за видео. Прошло два года с момента выхода видео и теперь при записи через объектную нотацию в поле extraReducers, т.е в таком формате [fetchCards.pending]: (state, action) вылезает предупрждение в консоли о том, что The object notation for `createSlice.extraReducers` is deprecated . Корректная запись теперь через билдер extraReducers: (builder) => {
builder.addCase(fetchCards.pending, (state) => {
state.status = "loading";
}); Только вот в официальной доке указаны оба этих способа и про депришиайтед первого ни слова. Лучи поноса им
да-да
Крутое видео! Ты крут! Давай RTK Query
Да RTK Query нужен
Да, было бы чудесно. Михаил, очень просим!)
Хотим RTK Query
Чувак спасибо тебе за такой качественный контент. Не затянуто и не коротко прям идеально. Не буду указать пальцем, но есть некоторые которые пробегают быстро что то рассказывают, не успеваешь за ними и ничего не понятно.. А тут все идеально)
Благодарю вас,Михаил, за понятное и подробное объяснение! Очень нравится манера подачи материала.
Присоединяюсь! Грамотная речь, отсутствие паразитов и дефектов речи, глубокое понимание автором темы и спокойная подача! Большая благодарность!
Прекрасная речь и очень доходчивое объяснение. Спасибо, Михаил!
Одно удовольствие, учится по вашим роликам, большое спасибо!)
Как раз из-за таких добрых людей как ты меня ещё не уволили)
Отличный урок по Redux Toolkit и createAsyncThunk.
Спасибо, Михаил!
Супер супер, наконец-то у меня в голове встало все вместе ))) Спасибо огромное за такое доходчивое видео!!!
Спасибище! Долго не мог разобраться, а тут всё просто и наглядно оказалось.
Все четко, ясно, подробно. Разбито на понятные этапы, до этого смотрел первый ролик про тулкит. Спасибо! Всех благ!
Михаил огромная благодарность вам за это видео в частности и за весь обучающий контент который вы делаете!
Сейчас я так понял используют такой синтаксис:
extraReducers(builder) {
builder.addCase(fetchGetTodos.fulfilled, (state, action) => {
state.todos = action.payload;
})
}
вместо:
extraReducers: {
[fetchGetTodos.fulfilled]: (state, action) => {
state.todos = action.payload;
}
}
новый вид записи 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) => {});
}
Вот еще варик
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;
})
}
люблю тебя братишка
Спасибо автору за отличный обучающий материал. Доступно, понятно, без "воды". Удачи Вам.
Очень благодарен за это видео. Помогло сильно. Не мог сам разобраться в Redux thunk в Redux Toolkit
Спасибо за инициативу во второй части ролика и то что ты его продлил. Очень полезная инфа! Спасибо. Продолжай в том же духе 👍
это лучший видеоуроки по redux-toolkit и createAsyncThunk
Спасибо огромное! Самый лучший туториал по этой теме из всех, что я видела.
Спасибо. Разбирал все сам по документации, а с твоей помощью закрепил и все улеглось в голове)
Михаил, видео действительно получилось полезным! Посмотрела, так как на проекте используется redux toolkit, а я только redux использовала.
Особенно отмечу дикцию, вас приятно слушать, четко и по делу рассказываете, видео просто находка
Одни из лучших видео на ютубе. Спасибо большое. Очень нравится что по мимо отличной подачи, автор пишет все на современных технологиях. Очень много туториалов даже за 2021- 22 года до сих пор используют старый редакс, а не тулкит.
Спасибо, прочитал быстрый старт официальный для тулкит, ничего не запустилось и очень непонятно, а тут просто офигенно, спасибо
только что зашел в документацию, офигел от жизни, ничего не понял, все таки не дорос пока, и зашел в ютуб с минимальной надеждой что то найти, и вот оно, спасибо. Сейчас глянем что да как
Огромное спасибо за подробное объяснение работы с разными типами запросов
отличный урок!! Спасибо, на работе в проекте назрела необходимость в использовании редакса. Я слишком далеко зашла в пропсдрилинге и нужно было это исправлять пока не поздно. Помнила, что начинала разбираться в классическом редаксе и было все понятно, до момента типизации))) но делать-то надо, еще только 9 месяцев опыта и я одна единственная фронт-программист, все делаю сама) немного страшно было, но по первому вашему уроку, я разобралась+помог коммент про типизацию, все РАБОТАЕТ!!!!! Смотрю дальше
как это вы так устроились без знаний ?))
это не IT компания, основное направление деятельности производство, а мой маленький it отдел - стартап. В чем-то легче(в плане нет дедлайнов), так как стадия разработки только (нет клиентов)@@minkostas7232
Редко встречаю, когда видео лучше мануала.
Спасибо!
Спасибо ! Приятный голос и четкость мыслей . Лайк и Подписка !
Одним словом супер 😊. Простой, понятный, подробный.
спасибо, очень помогло! (сижу джуном 6 месяцев опыта на мидловской позиции, пытаюсь делать задачи в сроки)
Спасибо, в качестве благодарности напишу ключевые слова чтоб твой видос быстрее искали. redux redux toolkit react-redux createAsyncThunk
Спасибо за легкий и понятный рассказ
Видео огонь, тема очень хорошо раскрыта!
Большое спасибо! Люблю ваши видео, приятная и понятная подача
да реально всё получается. Спасибо
Михаил, салют!
Благодарю!
Обращайтесь :)
Вот бы я раньше нашёл это видео, спасибо за труд!
Спасибо Михаил! Надо будет в выходные посмотреть :)
Очень приятный голос и приятная подача материала!
Спасибо , видео было очень полезное , светлая тема, оказалась очень приятная для восприятия, размер шрифта отличный!!!
Большое спасибо! Redux стал не так страшен :-) Отличное видео.
Михаил, сильно благодарю. Классный видос, классная подача, классный урок!!!
Спасибо!!! Очень ждал это видео после предыдущего про редакс
САМОЕ ЛУЧШЕЕ НА ЮТУБЕ ПО РЕДАКС ТУЛКИТ! СПАСИБО ОГРОМНОЕ, С МЕНЯ ПОДПИСКА И ЛАЙКИ!
Видео отличное, помогло мне понять принципы работы Toolkit. Но эта белая тема в VSCode)))))
Отлично, как раз на этой неделе понадобилось)
Михаил, видео супер!!! Прекрасное объяснение
Как можно это унифицировать? Не хочется для каждого запроса прописывать столько всего. Большое спасибо за очень доходчивое объяснение!
Как и в обычном redux-thunk, rtk позволяет прокидывать для санков extra-параметр. Вместе с ним можно передать свою абстракцию для работы с crud-операциями, и внутри санка уже работать с ней, передавая нужные значения.
Лайк, подписка, все уведомления !
Вы просто прелесть
Спасибо за createAsyncThunk!
Привет, старик!! ) Вкратце словами интернет классика... Нихрена не понятно, но оооочень интересно! ))
Какими судьбами, дружище? :)
Спасибо за ваши старания, Михаил)
Спасибо. Очень полезные видео, приятный голос и подача.Подписался😁
Спасибо за хорошую подачу информации.
Охренительно полезное видео.
Спасибо, очень помогло.
Many thanks to you, Michael.
Was a great tutorial as the most of your content.
Очень крутое видео. Чётко, без воды. Продолжай в том же духе.
Шикарный материал!!! Спасибо большое. хотел еще спросить о выносе логики из редюсеров в екстраредьюсеры и соединение нескольких слайсов для совместной реализации какой-то логики! было бы интересно посмотреть
Дай тебе бог здоровья!)
Лайк! Подписка! Очень круто объяснено.
Спасибо! Отлично помогло разобраться.
Михаил спасибо, отличное видео!
Очень круто! Огромное спасибо!
Спасибо за урок.
Спасибо за туториал!
Спасибо большое за видео!
Как всегда большое спасибо!)
спасибо)
Очень люблю Ваши видео. Просьба - уменьшить разрешение экрана. С телефона ничего не видно, что в документации написано.
Спасибо большое за видео! все очень доступно и понятно, НО можно пожалуйста попросить Вас сделать примерно этот же пример только в классовом компоненте. Решил для себя разобраться, но если честно это стало большой проблемой. Я и другие зрители думаю скажут Вам спасибо за это.
P.S. лайк поставил и подписался)
можно даже не видео отдельное я на codepen или куда еще залить.
Приветствую.
Видео точно не будет :)
В чем конкретно возникла сложность?
Я классовые компоненты использую только для error контейнеров (потому что по-другому нельзя). В остальном всё на функциях, сам Реакт нам это рекомендует. В классах, понятно, не действуют хуки. А подключение к Редаксу происходит через пень колоду, то есть через метод connect из react-redux, который добавляет в пропсы значения из хранилища и конкретные экшны.
@@mishanep будем пробовать. Спасибо за ответ
А правильно ли сначала диспатчить асинхронный экшен, а потом уже синхронный? Ведь из-за этого создается задержка в обновлении UI. И конечно же спасибо за урок, подробно и доступно объяснили.
Лекция информативная и доходчивая - Спасибо! Установить стартовый проект не удалось ни Ярном (отсутствует файл лицензии) ни NPM (401 - нет аутентификации).
Lock файл попробуйте удалить и запустить заново
@@mishanepСпасибо, удаление yarn.lock помогло. npm install; npm fix --force; npm run - live-server поднялся!
всё круто, спасибо
Контент огонь! Лайк, подписка) More React content pls!)
Круто, спасибо!
спасибо, все понятно
лучший)
Спасибо!
Redux Toolkit. Thanks!
Отличное видео
Thank you very mach)))
толково 👍
Большое спасибо за уроки по Редаксу. Очень подробно, с актуальной информацией. Подскажите, есть ли какие-нибудь видео по Entity Adapter?
Для ютуба не записывал. Я разбирал его в своём курсе по редаксу - классная штука.
Well explained 💯
Браво!!
Круто!!!
спасибо
спасибо большое! топовые видосы
27:19 для таких вещей typescript и нужен что бы не гадать что там функции принимают ))
А что лучше и практичнее использовать при асинхронщине? Ну и твое личное предпочтение, потому что, похоже, тут вкусовщина.
1. Изнутри диспатчить нужные редьюсеры
2. Не юзать диспатч внутри, а оставлять всю логику на экстра-редьюсеры - делать эту логику на этапах pending, rejected, fullfilled
Поработав с этим всем подольше, я пришел к тому, что второй, из описанных вами способов, мне ближе. Первый больше подходит в кейсах, когда мы получаем с бэкенда большую структуру данных, которую частями надо разложить в разные слайсы, не передавая в каждый из них всей структуры целиком.
На 39:10 увидел, что у вас в функции addTodo добавляется новый todo с id = времени. Это же неправильно изначально, разве нет? Функция addTodo не является чистой, для добавления подобных id, я бы использовал middleware. Объясню т.к. я не силен в терминах, в теории и т.д., я жесткий практик. Я бы сделал новую функцию addTodo, которая перед вызовом addTodo из reducer как раз генерировала бы id. В общем и целом, да это называется middleware. Т.к. id устанавливается между dispatch и addTodo из reducer. Функции, которые написаны были в ролике, так же являются middleware.
Михаил, какую тему используете в VS Code ? В последнее время в поисках светлой темы, но до сих пор безуспешно. Но ваша, по крайней мере в видео, мне не режет глаза)
Сейчас я работаю с темной темой CodeSandbox 2021. Какой была тема в момент записи данного видео, наверняка не скажу. Но вполне возможно это была стандартная светлая тема, идущая из коробки.
Михаил, спасибо за хороший урок
Очень бы хотел посмотреть как можно реализовать поведение кнопки “отметить всё” что бы и на сервер шли все запросы и код был переиспользован. Сделал у себя но чтото мне не нравится мой вариант :(
Буду признателен за совет
Приветствую! По-хорошему для реализации такой фичи нужно, чтобы сервер обрабатывал соответствующий запрос. Было бы странно делать десятки или сотни запросов на каждую тудушку для выполнения типового действия. Поэтому здесь должна быть согласованная работа фронта и бэка. Как вариант, бэкенд может вернуть либо обновленный массив всех тудушек и мы тогда просто перезаписываем стейт, либо статус успешного завершения и тогда мы уже делаем своё событие обновление стейта.
Михаил, доброе утро! Спасибо за супервидео. Скажите, а по createEntityAdapter() Вы такого видео случайно не планируете?
Приветствую.
У меня он разобран на курсе по редаксу (юдеми, степик). На Ютуб пока не планировал. Штука удобная, да.
12:28 необязательно что то помещать в массив зависимостей эффекта , можно просто пустой передать и все
супер! спасибо большое!) очень классно объясняешь!
почему используете fetch вместо axios?
Чтобы не устанавливать дополнительную библиотеку.
Впрочем, это не значит, что axios я вообще не использую)
спасибо !!!! если есть возможность снять видео про react query? спасибо !
У меня на канале есть такое видео
Прошу сделать видос про связку Next.js + Redux Toolkit + Redux-Saga. Было бы интересно.
На очереди RTK Query. Про наборы библиотек сложно делать видео. В моем представлении надо пререквизит сначала предложить.