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

Video Description

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 ? - https://youtu.be/06yVj8pcO5c React Fundamentals Project - https://youtu.be/QoJGKwo20is Learn React Redux with Project - https://youtu.be/0W6i5LYKCSI What is Redux ? - https://youtu.be/qNjNn9BCWCc Learn React Redux Thunk with Project - https://youtu.be/JDZRfLGNWdc Learn CSS GRID Tutorial - https://youtu.be/zs7JzkWixPo 🔗 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.