Duration 2:6:42

Learn React Redux Toolkit with Project in 2 Hours | React Redux Tutorial for Beginners

by Dipesh Malvia

108 135 watched

2.5 K

Published 23 Dec 2021

This is a 2 hours long crash course on React - Redux using Redux toolkit. We will learn the concepts by build a project movie rating application from scratch and along with that we will use Axios for API calls, React Router DOM for Routing and Node-SASS for our SCSS compile to CSS. This video course is specially if you are planning to learn React with Redux Toolkit State Management library as a beginner. We will build a movie rating application . We will see how we can convert a synchronous action creator into a asynchronous action creator using Redux Middleware Thunk and build the Search filter using Middleware Thunk in redux toolkit so that we can search for different movies or shows. Another feature we will add is Movie Card Slider or Carousel component. We will use react-slick library and build a responsive movie carousel. Node.js: The Complete Guide to Build Backend Projects [2023]🔥 Link - https://www.dipeshmalvia.com/courses/Nodejs-Zero-to-Hero ⭐️GitHub link for Reference⭐️ https://github.com/dmalvia/React_Redux_ToolKit_Movie_App ⭐️OMDB API⭐️ https://www.omdbapi.com/ ⭐️ Support my channel⭐️ https://www.buymeacoffee.com/dipeshmalvia You will find the topics covered in the timestamp below. 🔥 Video contents... ENJOY 👇 0:00:00 - Intro 0:00:49 - Code Walkthrough 0:03:55 - Installed Packages 0:04:32 - Movie Application Structure 0:05:33 - Creating Folder Structure and Files 0:10:00 - Adding functional component snippets 0:11:51 - OMDB API Key and usage 0:14:16 - Add Routing to Project 0:18:20 - Header Component with SCSS 0:23:06 - Adding common CSS to App.SCSS 0:25:42 - Footer Component with SCSS 0:27:38 - Home Component with SCSS 0:29:56 - Use Axios for API Call 0:33:57 - Adding Redux to Project 0:34:35 - Configure Redux Store 0:35:35 - Provide Store to App Component 0:36:46 - Redux Toolkit documentation walkthrough 0:38:29 - Create a Movie Slice 0:44:50 - useDispatch to dispatch action 0:47:34 - useSelector to access state 0:49:12 - Movie Listing Component with SCSS 0:54:30 - Movie Card Component with SCSS ------REDUX TOOLKIT MIDDLEWARE------ 1:02:05 - Code Walkthrough Sync Action Creators 1:02:47 - Redux Middleware Thunk - Redux Toolkit 1:03:38 - Create Async Action Creator 1:06:00 - Create extraReducers 1:06:33 - Async Action Creator Lifecycle 1:10:46 - Async Action - Fetch Shows 1:12:57 - Add Shows to Movie Listing Component 1:16:00 - Add CSS Transition 1:17:18 - Navigation - Movie Detail Component 1:20:25 - Async Action - Fetch Movie Details 1:22:51 - useParams Hook 1:23:32 - Movie Detail Component with SCSS 1:39:28 - UseEffect Cleanup Function 1:40:20 - Sync Action - Remove Selected Movie/Show 1:42:06 - Conditional Movie Detail Loading ------MOVIE SEARCH & CAROUSEL------ 1:45:00 - Build Movie Carousel 1:53:57 - Search Feature Redux Toolkit 2:04:23 - Assignment 2:06:15 - Outro React Roadmap for Developers in 2021 How to Learn React JS ? - /watch/c5Ocp8jVy60Vc React Fundamentals Project - /watch/si02owKGJoQG2 Learn React Redux with Project - /watch/ISCKYL5i6W0iK What is Redux ? - /watch/cCWCB9nNjNqNC Learn React Redux Thunk with Project - /watch/cdWNGLfRZDJRN Learn CSS GRID Tutorial - /watch/oPxiWkzJ7szJi 🔗 Social Medias 🔗 Twitter: https://twitter.com/IMDmalvia Facebook: https://www.facebook.com/programmingwithdipesh Instagram: https://www.instagram.com/dipeshmalvia LinkedIn: https://www.linkedin.com/in/dmalvia/ ⭐️ Tags ⭐️ - React Redux Toolkit - React Redux Toolkit Tutorial - React Redux Toolkit Crash course - React Redux Toolkit Project - React Redux For Beginners ⭐️ Hashtags ⭐️ #React #Redux #Toolkit #Beginners#Tutorials Disclaimer: It doesn't feel good to have a disclaimer in every video but this is how the world is right now. All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

Category

Comments - 157

@

@giafra95last year Dipesh, i rarely watch coding lessons on youtube because i often find them too boring or dispersive, but i admit that i followed this lesson for hours your english is very clear and i have found extremely helpful the coding of the. Scss files, this was unexpected but greatly appreciated. The lesson was very concise yet extremely detailed, and the application itself is very interesting.
thank you very much for this amazing video dipesh, it was by far the most helpful coding lesson i' ve ever watched on youtube. ...Expand 4
@

@23b_namrathasairam822 years ago Best video on the internet for react and redux beginners. Please continue making more such videos. Learnt a lot. 5
@

@bigsidetech2 years ago Giving 5+ stars to this video for covering the below points:
- Folder/App structuring
- For react routing.
- For extension: Re actjs code snippets.
- rsc
- Cleanup in useEffect for movie detail
- Reduxtoolkit middleware & extra reducers.
- For useParam hook from react-router and its usage.
- Loading handling for movie detail page.
- For Kandi openweaver platform to find required libraries.
- react carousel with a library.
- Responsiveness of React carousel.
- Moving carousel settings to a different file to make it re-usable.
- Search functionality.
- For using font awesome and its usage in the search form.
- Tip for Loading state for search.
- Validation for empty search.
- Clear & precise explanation throughout the video.
Thanks, Dipesh bro for such a clear and detailed video .. ...Expand 15
@

@skskssss1262 years ago Thanks man! This was really helpful. By far this is the best video that is actually for beginners. 4
@

@subhamgupta15492 years ago An excellent video to watch! Must watch video for redux-toolkit.
@

@astroboy37202 years ago Just finished, this is one of the best redux video on youtube, thank you so much. 2
@

@mahammadmansurali74423 years ago Thank you so much, a much needed video.
@

@AjayKumar-id7mb11 months ago I really like your especially 1 hour video.
all the main concept are covered in 1 hour.
@

@daffahanz15402 years ago Thanks for this tutorial, it helped me a lot to understand redux toolkit.
@

@RobiulIslam-dn9mm2 years ago Thanks. I learned a lot from this video about redux toolkit.
@

@muhammadshahnawaz7002 years ago Thank you so much for this amazing video. I was struggling in a similar project and this video solved my every single query. Thanks man. Love from pakistan. 2
@

@rimpysaini49762 years ago Best redux tutorial & brilliant explanation. Thanks a lot dipesh. I watched your all react video playlist. Now able to create full react app. Thanks for teaching. Doing good. Good job. God bless you. 2
@

@tantangunawan88073 years ago Wow, thanks for your video sir, this is great.
@

@akashrosariyo99722 years ago Thanks a lot dipesh i learnt a lot from this video, actually this is the video i looking for till now subscribed. 1
@

@syedalirazarizvi96533 years ago Thanks for the video.
your new subscriber from pakistan.
@

@abch65982 years ago Thank u so much this tutorial is helpful.
@

@kevin-xr1wf2 years ago A perfect tutorial with live errors solving.
@

@saudkhan10803 years ago More redux projects plz waiting < 3!
@

@mostafasalah65773 years ago I love you man you are very helpful thank you for this video wait another awesome videos like you. 1
@

@user-ur7mt9mj8b8 months ago Thank you so much for this tutorial i was able to complete the app but noticed
that i am only able to search for shows/series on the homepage i . ...Expand
@

@nageshworshah83142 years ago Rtk query vs thunk which is good to use as a middleware in react.
@

@DipeshMalvia3 years ago Guys, if the video is helpful to you or you learned something than please appreciate and add comment hit the like and subscribe button and help this channel to grow. 1
@

@vhsphshbs3 years ago It was great. Waiting for more depth on this. 1
@

@GowriSankar-mc2uc7 months ago U r a great teacher ever. Keep rocking. 1
@

@gobindasaha76522 years ago Hello sir! I love your videos. I learnt a proper project structure from your tutorial. But if you could show the user login with a proper auth, token validation . ...Expand 1
@

@shivaramr7042last year Very nice video, good tutorial, its really hard to find such good tutorials on youtube these days, some of them only half way you realise either the package . ...Expand
@

@sajjadkazemi2 years ago Thanks for this really helpful project i learned redux toolkit from this
for the developers who can' t deploy their projects on netlify id="hidden10" or something with this api, you just need to change the base url protocol toand that' s it. ...Expand 1
@

@TheWorldlife833 years ago Very helpful video, thank you. @42. 07 it should be immer.
@

@nawazishali274last year The best explanation of redux toolkit. 2
@

@harshilgandhi43972 years ago Hey buddy! Brilliant explanation! Its quite hard to search a practical project explained in so much excellent way! Understood it fully!
really thank you so much for adding this video!
you actually inspired me in correct way to use hooks rather than class components and use redux toolkit! Thank again!. ...Expand 7
@

@prakashsubedi99802 years ago Thankx for the detailed explanation on the various topics. At this day, theof theversion 5 didnot work for me (don' t has worked in my previous projects) so, i had to change theto version 6. But, the video is informative. Thankx!. ...Expand 1
@

@sandeepkdasari80062 years ago Dipesh, if you would added the firebase authentication slice as well, then this video will be the best explained and useful video in this world!
@

@blaslorenzo79062 years ago Hey dude i love your videos, are really helping me! 1
@

@Sm123bg3 years ago Thank you for your video! Ive struggled with this a lot lately. How relevant is redux with the shift to server side frameworks like next, remix, etc? Is it only applicable to spas? Thanks for any help. 6
@

@shohagkhan36773 years ago Thanks for the complete video. Have you ever used zustand for global state management? Really confused, what we should use, zustand, rtk query, react query, swr which one is good and why. 2
@

@nhgghnbfjjbfelast year If you are getting this error -is not exported from(imported as
use routes instead of switch. 1
@

@phamngocangkhoa13942 years ago Good video for redux beginner! But, i suggest you should remove thebecause it will send an error about the usedispatch method and the fetchmovies. 2
@

@siddharthpunmiya274410 months ago at we dont have to spread the state right? becuase immer.js handles the state mutation
@

@Sandeepkumar-ny7bd3 years ago Thanks for detailed video. You should use latest router v6 in this project. 1
@

@l.seciltuncay79212 years ago Could you please addfavorites" thanks. 1
@

@aniketbhalla15212 years ago Next. Js can fetch the data of shows and movies at build time on server and pass it the props of react component and thus we won' t see any delays in data fetching when the page loads for the first time. 1
@

@cagrizorkol3 years ago Thank you for video. Let me ask question. Which one is the best? Zustand or redux toolkit? What do you think? 1
@

@nidhi57672 years ago If i am uploading the api key it does not showing me the movie info please help. 1
@

@pratixYT2 years ago 1. Import {routes} intead of {switch} and use it instead of switch
2. In v6, you can' t use the component prop anymore. It was replaced in < routeelement={< home. ...Expand 2
@

@souravchatterjee59317 months ago The omdb api key has not been received with my mail id.
@

@syedalirazarizvi96533 years ago Why did you choose to use scss? I think you can do the same work with css as well.
@

@ja_user8 months ago I' m unable to fetch the api key. It says no patron was found. How to resolve?
@

@pasumarthylakshmi9582 years ago I am getting imdbid as undefined so i am unable to fetch the data inam getting error asfrom string .
@

@akashsonar71612 years ago Sir i uploaded this project on netlify and heroku too but it' s not showing any results it saysin redux extension help me to solve this.
@

@mbm.editzz3 months ago I tried hiding my api key by using thein the. Env file and tried the process. Env but it isnt working.
@

@karachiintermediatemaths70062 years ago I got error connect time out when fething api.
@

@muhammadmoeez55522 years ago List of error occur when installing node sass.
@

@kamalrenu1588last year How to dispatch synchronously in redux toolkit.
@

@ravoluzen2 years ago Getting a ' cannot read properties ofselectmovieorshow)#39; error when navigating to the movie detail page, trying to debug for quite a while, anyone else faced this?
@

@pedromanuelcamargomendez65203 years ago Excuse me, this video is old, change version 6. 2. 1, but is cool, thank you, this is a great video. 1
@

@slmshady5393 years ago Bro ye toh maine dekha hai. But anyway to those watching it for the first time. Go for it, it' s amazing. 1
@

@parinrajpara83123 years ago Plz make a video on redux saga it' s very useful to new devloper.
@

@dhanarajccs3 years ago Could you please teach a tutorial on react e-commerce project?
@

@doobtom2712 years ago When u say " this is a too ass long react video forit is so funny hahaha xd. Great video, very useful, thank you.
@

@gopireddy95082 years ago Hii bro iam facing below error while ejecting
this git repository has untracked files or uncommitted changes:
m Json
m yarn. Lock
remove untracked files, stash or commit any changes, and try again. ...Expand
@

@nasarshaik52072 years ago Hi sir, facing issue when i try to install sass package, any body facing same issue?
npm err! Pathnpm err! Command failed
npm err! Command/d /s /c node . .
. ...Expand
@

@GaneshSingh13 years ago Could you please upload video redux toolkit with redux saga.
@

@sahibjadatalibansari73652 years ago I want to react on this video and thunk you for this video.
@

@sanketkondhalkar6553last year How should i get api key, you are not mentoined api key in github, please be mentioned there.
@

@adityagupta12132 years ago idk why my show cards have overlapped with movie cards.
@

@user121304last year I am getting this error while using useparrams(
from stringdid anything change? I also saw some other people getting this error in your other video part -2 showing the same thing. This video is the combination of your part 1 and part 2.
why aren' t you replying? Please reply, i want to complete this. ...Expand
@

@PIYUSH-lz1zq3 years ago Is it different from the movie app you created earlier that was also using toolkit. 4
@

@reactjs53503 years ago Waiting for node. Js and mongo db full course. It is possible? 1
@

@taruntomar79472 years ago I need your help,
i have a message while calling api
that api call is undefined?
plz give me some suggestion.
@

@tkot78576 months ago
ons"> (done)
(done)
(done)
(done)
(done)
(done)
(done)
(done)
(done)
(done)
(done)
.. ...Expand
@

@piyushaggarwal52072 years ago You solve your bugs like you put them there deliberately
or maybe you mistyped a thing and don' t correct it immediately to make us ponder.
@

@areebascreation383last year Switch is not supported now
i have invested more than half hour doing it.