How to get free YouTube subscribers, likes and views?
Get Free YouTube Subscribers, Views and Likes

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

Follow
Dipesh Malvia

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 NodeSASS 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 reactslick library and build a responsive movie carousel.

Node.js: The Complete Guide to Build Backend Projects [2023]
Link https://www.dipeshmalvia.com/courses/...

⭐GitHub link for Reference⭐
https://github.com/dmalvia/React_Redu...

⭐OMDB API⭐
https://www.omdbapi.com/

⭐ Support my channel⭐
https://www.buymeacoffee.com/dipeshma...

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 ?    • React JS Roadmap for Developers | Rea...  
React Fundamentals Project    • Learn React JS Fundamentals With Proj...  
Learn React Redux with Project    • Learn React Redux with Project | Redu...  
What is Redux ?    • Understanding Redux Concept in 5 Minu...  
Learn React Redux Thunk with Project    • Learn React Redux Thunk with Project ...  
Learn CSS GRID Tutorial    • Learn CSS GRID Tutorial | CSS GRID Cr...  

Social Medias
Twitter:   / imdmalvia  
Facebook:   / programmingwithdipesh  
Instagram:   / dipeshmalvia  
LinkedIn:   / 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.

posted by gasgediig