Популярное

Музыка Кино и Анимация Автомобили Животные Спорт Путешествия Игры Юмор

Интересные видео

2025 Сериалы Трейлеры Новости Как сделать Видеоуроки Diy своими руками

Топ запросов

смотреть а4 schoolboy runaway турецкий сериал смотреть мультфильмы эдисон
dTub
Скачать

Build Movie Watchlist App with React, Redux-Toolkit, RTK-Query & Redux-Persist | Material-UI

Автор: CodeWithVishal

Загружено: 2022-11-14

Просмотров: 5208

Описание:

In this video, we will build movie watchlist application using the technology like React, Redux-Toolkit, RTK-Query & Redux-Persist. We will be using external API https://developers.themoviedb.org/3/s... in order to fetch movie.

Timestamp
00:00 Intro
00:05:05 Set-up & Installing package
00:07:30 Cleanup
00:09:37 Structuring app
00:12:47 React Router Dom
00:16:07 Header
00:23:00 Search Input field
00:29:07 Configure TMDB Api key
00:31:27 Use RTK-Query for creating endpoint
00:36:27 Hook-up service in store
00:39:00 RTK-Query custom hook to fetch movie
00:45:00 Creating component for movie search
00:55:00 Configure and write action to add movie in slice
1:00:00 Dispatch an action to add movie in Watchlist
1:02:37 Get watchlist movie with useSelector
1:04:17 Create selector for movie watchlist in slice
1:06:27 Creating Grid & Card component with MUI to show watchlist movie
1:16:37 Creating Control with MUI on Movie Card
1:23:27 Hide/Show control using HTML Event on Movie Card
1:27:27 Write an action to add movie into watched in slice
1:30:27 Dispatch action to add movie into watched
1:32:57 Write an action to remove movie from watchlist in slice
1:34:07 Dispatch action to remove movie from watchlist
1:36:00 Disable Add to Watchlist button after adding movie to watchlist
1:40:00 Working on watched page and render watched movie
1:41:00 Enable control on watched movie page
1:45:00 Write other action to move movie into watchlist and remove movie from watched
1:46:17 Dispatch action to move movie into watchlist and remove movie from watched
1:48:37 Add Add to Watched button on search result
1:49:37 Disable Add to Watched button either movie in Watchlist or Watched
1:52:57 Creating custom message component with MUI
1:55:17 Use Redux-Persist to persist data in app


My Social Media Link
Facebook Page:-   / kodewithvishal  
Instagram:-   / code_withvishal  

You get the source code from here :- https://ko-fi.com/s/fb2dc4c8c2 or https://www.buymeacoffee.com/CodeWith...

You can also support me through this way as well :- https://www.buymeacoffee.com/CodeWith... or
https://ko-fi.com/codewithvishal

Build Movie Watchlist App with React, Redux-Toolkit, RTK-Query & Redux-Persist | Material-UI

Поделиться в:

Доступные форматы для скачивания:

Скачать видео mp4

  • Информация по загрузке:

Скачать аудио mp3

Похожие видео

НАЖИВО виступ Зеленського у Давосі  | Підсумки розмови з Трампом

НАЖИВО виступ Зеленського у Давосі  | Підсумки розмови з Трампом

Высокомерный полицейский остановил чернокожего агента ФБР и пожалел об этом

Высокомерный полицейский остановил чернокожего агента ФБР и пожалел об этом

Продвинутый Redux. Redux Toolkit, RTK query, TypeScript.

Продвинутый Redux. Redux Toolkit, RTK query, TypeScript.

App Builds

App Builds

React Redux - Redux Persist - Redux Reselect

React Redux - Redux Persist - Redux Reselect

RTK Query или альтернативный Redux по работе с API

RTK Query или альтернативный Redux по работе с API

دوره‌های آموزشی

دوره‌های آموزشی

Opencode Заменил мне Claude Code – Вот Почему

Opencode Заменил мне Claude Code – Вот Почему

Самые удовлетворяющие видео рабочих, идеально выполняющих свою работу!

Самые удовлетворяющие видео рабочих, идеально выполняющих свою работу!

Микросервисы на практике - сервис продажи билетов

Микросервисы на практике - сервис продажи билетов

Обзор типичного ФИШИНГОВОГО сайта

Обзор типичного ФИШИНГОВОГО сайта

UST Global React & JavaScript Live Interview | React Interview | JavaScript Interview

UST Global React & JavaScript Live Interview | React Interview | JavaScript Interview

Conversation with Elon Musk | World Economic Forum Annual Meeting 2026

Conversation with Elon Musk | World Economic Forum Annual Meeting 2026

Zed IDE: Полный обзор спустя год | Личный опыт разработки на ней

Zed IDE: Полный обзор спустя год | Личный опыт разработки на ней

Typst: Современная замена Word и LaTeX, которую ждали 40 лет

Typst: Современная замена Word и LaTeX, которую ждали 40 лет

OSINT для новичков: найдите всё о юзернейме и фото с Sherlock и Google Dorks!

OSINT для новичков: найдите всё о юзернейме и фото с Sherlock и Google Dorks!

Сисадмины больше не нужны? Gemini настраивает Linux сервер и устанавливает cтек N8N. ЭТО ЗАКОННО?

Сисадмины больше не нужны? Gemini настраивает Linux сервер и устанавливает cтек N8N. ЭТО ЗАКОННО?

React Redux Example Project with Redux Toolkit

React Redux Example Project with Redux Toolkit

Claude Code ДЛЯ НОВИЧКОВ: от нуля до приложения за 2 часа | Полный гайд 2026

Claude Code ДЛЯ НОВИЧКОВ: от нуля до приложения за 2 часа | Полный гайд 2026

Full Stack Netflix Clone in React, Tailwind CSS, Next.JS, Prisma, MongoDB, NextAuth & Vercel  (2023)

Full Stack Netflix Clone in React, Tailwind CSS, Next.JS, Prisma, MongoDB, NextAuth & Vercel (2023)

© 2025 dtub. Все права защищены.



  • Контакты
  • О нас
  • Политика конфиденциальности



Контакты для правообладателей: infodtube@gmail.com