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

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.

⭐️GitHub link for Reference⭐️

⭐️OMDB API⭐️

⭐️ Support my channel⭐️

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***

🔗 Social Medias 🔗

⭐️ 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.

[bigsidetech]

Giving 5+ stars 🌟 to this video for covering the below points:
- Folder/App structuring
- For react routing.
- For extension: Reactjs 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

[giafra]

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 straight and I was amazed by how clear you were in explaining everything to a Redux noob like me. Before watching the video I had a good grasp of how React works, having already developed myself some small projects, but regarding Redux I only had the theorical knowledge without any coding experience; nonetheless, I have found your video perfect for practicing with Redux concepts for the very first time.
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.

[DipeshMalvia]

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😉

[subhamgupta]

An Excellent video to watch !!!! Must watch video for redux-toolkit.

[mahammadmansurali]

Thank you so much , A much needed video. ❤️

[ChethanK-fdmq]

Its super clear, keep educating. thank you!

[b_namrathasairam]

Best video on the internet for react and redux beginners. Please continue making more such videos. Learnt a lot

[skskssss]

thanks man! this was really helpful. By far this is the best video that is actually for beginners.

[RobiulIslam-dnmm]

thanks. i learned a lot from this video about redux toolkit.

[daffahanz]

thanks for this tutorial, it helped me a lot to understand redux toolkit😁

[AjayKumar-idmb]

I really like your especially 1 hour video.
All the main concept are covered in 1 hour.

[abch]

Thank U so Much This tutorial is Helpful ❤❤❤❤❤❤

[tantangunawan]

Wow, thanks for your video sir, this is great 👍👍 ..

[astroboy]

Just finished, this is one of the best redux video on Youtube, thank you so much 🌱🙏

[mostafasalah]

i love you man you are very helpful thank you for this video wait another awesome videos like you

[kevin-xrwf]

A perfect tutorial with live errors solving

[saudkhan]

More Redux projects plz waiting <3 !!

[muhammadshahnawaz]

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 😍😍

[ak_ros]

Thanks a lot Dipesh i learnt a lot from this video, actually this is the video i looking for till now SUBSCRIBED..!

[rimpysaini]

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