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

🔥 Оформить премиум подписку - htmllessons.ru/premium?...
► Интенсив React с нуля (приложение для тренировок) - htmllessons.ru/int/show/3?utm...
В этом крутом ролике мы в быстром формате разберем основы Redux Toolkit + RTK Query.
Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 170 лайков и я снимаю еще ролик про Redux
Если есть какие то фишки по этой теме - дай знать в 💬 комментариях!
💰 Новый ролик для спонсоров доступен на Boosty boosty.to/redgroup или в нашей общей подписке (от 3 мес.) на сайте htmllessons.ru/premium
Скачать 🖥 исходник проекта в нашем хранилище - htmllessons.ru/repositories#s...
#Redux #ReduxToolkit #RTKQuery #React #RedGroup
Курс будет не в стандартном формате, я не просто покажу функционал Redux Toolkit. Я добавлю море практики, в этом ролике мы сделаем подгрузку товаров с сервера через RTK Query и функционал добавления, удаления товара из корзины. Также добавим иконки с помощью react icons. Стили сделал заранее, чтобы не тратить Ваше время с помощью Tailwind CSS. Вместо React для удобного роутинга я буду использовать next js. И все это приправим TypeScript. Приятного просмотра!
Ролик про 20 хуков - • 20 REACT ХУКОВ за 1 ЧА...
Ролик Todo для новичков - • Todo приложение на Rea...
Копия Яндекс Такси с Redux Toolkit - • Полная копия Яндекс Та...
Тайм коды:
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 - Формат крутой, где скачать?
► Интенсив Node.js + Express - Backend с нуля - htmllessons.ru/int/show/2?utm...
► Интенсив по верстке сайта с 0 - htmllessons.ru/int/show/1?utm...
👉 Смотрите видео ДО КОНЦА, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔
► Оформить подписку на нашем сайте - htmllessons.ru/premium
► Эксклюзивный контент - boosty.to/redgroup
► Оформи спонсорство и получи уникальный значок и эмоджи - / @redgroup
► Хранилище (здесь все файлы к видео) *требуется авторизация - htmllessons.ru/storage
► Научим разрабатывать сайты - htmllessons.ru/
► Личный Instagram - / maxzbs
► Личный KZbin - / @maxhustleinsilence
► Получи до 4000 руб. на первое бронирование через Airbnb - abnb.me/e/Mgl6khUuN3
► Если хочешь улучшить качество видео - htmllessons.ru/ext/donate
► Мой сетап VS Code - • Настройка Visual Stud...
Немного обо мне: меня зовут Максим, я уже 9 лет занимаюсь веб-разработкой. На данный момент являюсь основателем двух крутых проектов htmllessons.ru и еще одного глобального проекта. Первый, был моей дипломной работой в колледже. Как и все, начинал с изучения верстки html, css, js. Затем появилась потребность в изучении Laravel для разработки образовательного проекта. Затем я ушел от PHP и перешел на Javascript, так как появилась задача по разработке крупного проекта. Основная миссия - создавать крутые продукты, которые будут помогать людям и менять мир. Буду рад, если Вы меня поддержите и подпишитесь на мой канал. Спасибо 😊

[@REDGroup]

🔥 Оформить премиум подписку - htmllessons.ru/premium ✨Свежая Версия 2023 года - kzbin.info/www/bejne/nYHQioenfLV3jaM Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 170 лайков и я снимаю еще ролик про Redux Если есть какие то фишки по этой теме - дай знать в 💬 комментариях! Скачать 🖥 исходник проекта в нашем хранилище - htmllessons.ru/storage#storage_file_38 Тайм коды: 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 - Формат крутой, где скачать?

[@elenbaking225]

Это очень круто!!! 🔥 🔥 🔥

[@talivel118]

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

[@mymanio9899]

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

[@SanjarKodirov-ww3le]

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

[@tiktoker428]

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

[@haibova_irisha]

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

[@user-sj2yl7nw6u]

Спасибо большое, узнал много нового!

[@markwellofficial]

Спасибо за материал и мотивацию

[@user-vj7cm6yg2z]

Шикарный курс 👍

[@woodDacha]

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

[@user-ov8xk7cn9e]

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

[@kostyafrompiter]

Спасибо Максим!!!!

[@bambalbino]

Спасибо!

[@sgu6ena]

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

[@REDGroup]

Рад, что Вам понравилось

[@dmitriyegorov5553]

Нормас. Спасибо

[@REDGroup]

Пожалуйста

[@user-qq6yg7bg3f]

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

[@Syderi07]

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

[@HeaDannn]

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

[@Yakudza101]

Какая у вас тема в vs code?

[@evgeniy2526]

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

[@REDGroup]

Это абсолютно разное, я не смогу в одном комментарии объяснить. Во многих видео говорил, rubute и точка посмотрите.

[@user-fn6xx7db1r]

Актуально на данный момент?

[@tiktoker428]

микрофон у тебя Blue Yeti ?

[@REDGroup]

Пока в Стамбуле да, но звук от HyperX Quadcast мне больше нравится.

[@7iomka]

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

[@REDGroup]

К сожалению нет, он уже не актуален

[@7iomka]

@@REDGroup а что актуально и где посмотреть? redux-toolkit я так понимаю всё покрывает?)

[@REDGroup]

Да он супер удобный. Вы задаёте слишком общий вопрос, просто смотрите ролики на моем канале и то, какие технология я использую

[@user-mu2dp4lo5x]

данное приложение поддерживает сео?

[@kupolhub6991]

Первый

[@realtorBG]

зашибис

[@shortstime6664]

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

[@REDGroup]

Привет, уже делал. Правда копия не очень вышла, так как была одна из первых в этом формате. Думаю через время можно повторить

[@user-py3em3qq3s]

А на какую тему интенсивы будут?

[@REDGroup]

Два интенсива для продвинутых, первый про серверную часть на nestjs + TS, второй про фронтенд на nextjs + TS. Тему проекта пока оставлю в тайне, чтобы интригу сохранить, но он будет супер крутой. Сейчас на сайте есть интенсивы для новичков, там мы разработали приложение для тренировок.

[@user-le7jy4ow8n]

@@REDGroup збс!!!))

[@speedayd9083]

Привет, можешь сделать такой же курс по mobX?

[@REDGroup]

Привет, mobx не использовал в реальных проектах. Не смогу чему то научить.

[@user-li8hl1vr1x]

Что-то нет никакой такой репы по ссылке, ни первого варика ни второго, есть какойто мини магазин, но он выглядит не так и структура папок не такая и без Next. Если я заблуждаюсь, то напишите номер репы

[@REDGroup]

38 номер

[@user-li8hl1vr1x]

@@REDGroup Помогло, но лучше пишите номер репы в описании, а то название ролика не совсем соответствует названию на сайте))) Спасибо за труд.

[@REDGroup]

Там же при переходе по ссылке, происходит скролл до нужного элемента

[@bobomurod]

Istanbul же

[@daniil__kryuchkov]

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

[@REDGroup]

Да, потому что next обновился

[@user-cb8nd7yk5u]

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

[@REDGroup]

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

[@user-cb8nd7yk5u]

@@REDGroup ааа теперь понятно все. Спасибо большое!

[@UrakovAnton]

а можно с SSR?

[@REDGroup]

В интернете все есть, слишком узкая тема для канала

[@user-ov8xk7cn9e]

Не смог скачать исходники по ссылкам, зарегистрировался и все равно не удача 😢 А так уроки классные, спасибо.

[@REDGroup]

А что значит не удача, в разделе хранилище все доступно. Спасибо

[@user-ov8xk7cn9e]

403 ошибка Forbidden nginx/1.19.2

[@REDGroup]

Вы не по той ссылке переходите, у нас они обновились. Прям в кабинете нажмите хранилище и найдите файл

[@user-ov8xk7cn9e]

Да, спасибо, скачал из хранилища

[@user-le7jy4ow8n]

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

[@REDGroup]

Напишите на почту [e-mail]

[@user-le7jy4ow8n]

@@REDGroup Макс, я написал :)

[@REDGroup]

Понял, в понедельник посмотрю

[@sportschelsea8799]

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

[@REDGroup]

А почему нет?

[@sportschelsea8799]

​@@REDGroup ну когда технология обновляется часто, то курс который вышел год назад может вполне потерять актуальность

[@sportschelsea8799]

Вот я и спрашиваю, чтобы понять есть смысл смотреть, или лучше найти более свежие курсы

[@Moonlight-kh9pr]

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

[@REDGroup]

Не работал со styled component

[@Moonlight-kh9pr]

@@REDGroup блин, отстойно, я надеялся очень на помощь, так то штука прикольная, весьма не корявый подход компонентный

[@REDGroup]

Штука ужасная, добавляет сахар в код. Слишком много компонентов просто ради стилей

[@Moonlight-kh9pr]

@@REDGroup правильно ли я понял что html разметку стандартную лучше использовать?

[@REDGroup]

Не понял ваш вопрос