⚡️Быстрый курс по Redux Toolkit (React, RTK query, TypeScript, Next.js)

В этом крутом ролике мы в быстром формате разберем основы Redux Toolkit + RTK Query.

Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 170 лайков и я снимаю еще ролик про Redux

Если есть какие то фишки по этой теме - дай знать в 💬 комментариях!

#Redux #ReduxToolkit #RTKQuery #React #RedGroup

Курс будет не в стандартном формате, я не просто покажу функционал Redux Toolkit. Я добавлю море практики, в этом ролике мы сделаем подгрузку товаров с сервера через RTK Query и функционал добавления, удаления товара из корзины. Также добавим иконки с помощью react icons. Стили сделал заранее, чтобы не тратить Ваше время с помощью Tailwind CSS. Вместо React для удобного роутинга я буду использовать next js. И все это приправим TypeScript. Приятного просмотра!

Тайм коды:
00:00 - Начало
00:41 - Новый крутой браузер (Min)
02:14 - ДЕМО
04:32 - Установка проекта + зависимости
06:04 - Немного о проекте (какое API будем использовать?)
07:48 - RTK Query (api на получение товаров)
14:17 - Конфигурация store
16:20 - Хук из RTK Query
19:06 - Пишем первый slice (для корзина)
20:23 - Reducer (добавление в корзину)
22:11 - Reducer (удаление из корзины)
23:14 - Делаем удобные хуки (useActions)
25:43 - useTypedSelector
26:20 - Добавление в корзину по кнопке
27:00 - Проверка на добавленный товар
28:45 - Вывод корзины из store
30:07 - Удаление из корзины по кнопке
31:21 - Формат крутой, где скачать?

👉 Смотрите видео ДО КОНЦА, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔

[REDGroup]

Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 170 лайков и я снимаю еще ролик про Redux

Если есть какие то фишки по этой теме - дай знать в 💬 комментариях!


Тайм коды:
00:00 - Начало
00:41 - Новый крутой браузер (Min)
02:14 - ДЕМО
04:32 - Установка проекта + зависимости
06:04 - Немного о проекте (какое API будем использовать?)
07:48 - RTK Query (api на получение товаров)
14:17 - Конфигурация store
16:20 - Хук из RTK Query
19:06 - Пишем первый slice (для корзина)
20:23 - Reducer (добавление в корзину)
22:11 - Reducer (удаление из корзины)
23:14 - Делаем удобные хуки (useActions)
25:43 - useTypedSelector
26:20 - Добавление в корзину по кнопке
27:00 - Проверка на добавленный товар
28:45 - Вывод корзины из store
30:07 - Удаление из корзины по кнопке
31:21 - Формат крутой, где скачать?

[АлексейБомко-ьш]

Классный ролик - скачал вариант для ленивых, повторил часть кода, теперь думаю воспользоваться вариантом с минимальным описанием) Спасибо!

[SanjarKodirov-wwle]

Недавно увидел ваш
канал просто шикарные уроки спасибо

[tiktoker]

Круто особенно то что typescript которое я не так хорошо знаю смог узнать новое в этом видео, точно лайк

[talivel]

🔥Урок просто огонь!🔥
Продолжай в том же духе! 😀

[mymanio]

Не мог не поставить лайк, видос огонь и в самое подходящее время.

[woodDacha]

Отдельное спасибо за пустой и готовый проект. Обязательно попробую повторить по видео :)

[sguena]

Спасибо огромное и за тайпскрипт, и за тулкит

[haibova_irisha]

спасибо за это видео ! вы очень доступно излагаете свои мысли

[МедетБерикбаев]

Всем привет! Ребята подскажите пж как найти курс по Redux? Чистый Redux. Redux Toolkit не нужен. В ютбьюе все видео где написано Redux на самом деле про Redux Toolkit. Redux Thunk, Toolkit, Saga не нужен. Нужно чистый Redux. (npm install redux, так сказать) Где найти? Даже платный курс попробовал, тоже оказалось про Redux Toolkit😑

[Syderi]

не понял. откуда берется product в мапе?

[ОльгаДерябина-хи]

Спасибо огромное, благодаря вашему видео я наконец-то смогла удалить элементы из store😂

[evgeniy]

Подскажите, а что лучше использовать для работы с api createAsyncThunk или rtk query?

[HeaDannn]

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

[daniil__kryuchkov]

Все получилось, в конце была ошибка Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>. Чтобы ее решить, нужно удалить из <Link></Link> все теги <a></a>

[Moonlight-khpr]

как использовать ref вместе со styled components

[sportschelsea]

Появился вопрос, насколько актуален этот курс сейчас?

[iomka]

170+ лайк поставил - есть ролик уже про ридакс?) Очень надо) Давно с ним не связывался, а сейчас всякие тулкиты появились и тд) На Effector сижу пока, но вакансии требуют redux...

[shortstime]

макс, сделаю копию вконтакте, думаю многим зайдет

[Гилфойл-тя]

Я тупо не могу зарегаться на сайте чтоб купить подписку, ошибки сыпятся... скрины могу скинуть. Жесть какая-то