React Redux Toolkit with Project | Redux Middleware Thunk | React Redux Tutorial For Beginners - 2

Подписаться 82 тыс.

Просмотров 30 тыс.

50% 1

In this video we are going to learn about React - Redux using Redux toolkit by build a project movie rating application from scratch. 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 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.
We will continue to enhance the application we will see how we can convert a synchronous action creator into a asynchronous action creator using Redux Middleware Thunk.
You will find the topics covered in the timestamp below.
🔥 Unacademy 👇
Use my code "dipesh01" to get 10% discount
You get all of this and much more for a nominal fee of Rs999/- for the entire year and with my code you get this for Rs 899!
Career as a Developer: unacademy.com/goal/career-as-...
Placement Tips & Hacks: bit.ly/Unacademy-Anshul-Softw...
⭐️React Redux Toolkit with Project - Part 1⭐️
• React Redux Toolkit wi...
⭐️GitHub link for Reference⭐️
github.com/dmalvia/React_Redu...
⭐️OMDB API⭐️
www.omdbapi.com/
⭐️ Support my channel⭐️
www.buymeacoffee.com/dipeshma...
**React Roadmap for Developers in 2021**
How to Learn React JS ? - • React JS Roadmap for D...
React Fundamentals Project - • Learn React JS Fundame...
Learn React Redux with Project - • Learn React Redux with...
What is Redux ? - • Understanding Redux Co...
Learn React Redux Thunk with Project - • Learn React Redux Thun...
Learn CSS GRID Tutorial - • Learn CSS GRID Tutoria...
**Checkout these video to understand better**
JavaScript ES6 Arrow Functions - • JavaScript ES6 Arrow F...
JavaScript Higher Order Functions & Arrays Methods - • 13 Must Know JavaScrip...
JavaScript ES6 Destructuring - • JavaScript ES6 Destruc...
🔥 Video contents... ENJOY 👇
0:00:00 - Intro
0:00:24 - Application Demo
0:02:23 - Unacademy Promo
0:05:00 - Code Walkthrough Sync Action Creators
0:05:30 - Redux Middleware Thunk - Redux Toolkit
0:06:36 - Create Async Action Creator
0:08:57 - Create extraReducers
0:09:22 - Async Action Creator Lifecycle
0:13:41 - Async Action - Fetch Shows
0:15:53 - Add Shows to Movie Listing Component
0:18:57 - Add CSS Transition
0:20:13 - Navigation - Movie Detail Component
0:23:19 - Async Action - Fetch Movie Details
0:25:49 - useParams Hook
0:30:00 - Movie Detail Component with SCSS
0:42:10 - UseEffect Cleanup Function
0:43:00 - Sync Action - Remove Selected Movie/Show
0:45:04 - Conditional Movie Detail Loading
0:47:33 - Outro
**More videos**
JSON Crash Course - • Learn JSON in 25 Minut...
Asynchronous Vs Synchronous Programming - • Asynchronous Vs Synchr...
Async JavaScript Callback - • Async JavaScript Callb...
Async JavaScript Promises Tutorial - • Async JavaScript Promi...
**Checkout my crash courses for get started with web development**
JavaScript Tutorial For Beginners - • JavaScript Tutorial fo...
HTML5 Crash Course in 1 Hour - • HTML5 Crash Course for...
CSS Crash Course in 1 Hour - • CSS Crash Course For A...
🔗 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.

Опубликовано:

30 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 80

@DipeshMalvia 2 года назад

Guys, if the video is helpful or you learned something than please appreciate and hit the LIKE and SUBSCRIBE button and help this channel to GROW😉

@qiqiliang7793 2 года назад

hello, can this project deploy on the server like goDaddy or herokku since you use third party omdb api?

@vimz92 2 года назад

Hey Dipesh, I'm your subscriber. I have one issue. I tried to upload to git and later to Netlifty. However I get Error in Netlifty but it works fine in Local host. Please help me. How do I fix this? Error: Uncaught TyprError: Cannot read properties of Undefined(reading: 'Response')

@waseemnasir999 Год назад

Kindly ! give source code of this

@joseraimondi5447 2 года назад

This is so insane!! Thank you for sharing your knowledge!

@ChartChain 2 года назад

Completed the projected,There was some problems with the router version but still completed the whole project.Thank you for your effort

@adrianmartinez3965 2 года назад

This a masterpiece for tutorials. Thanks So much

@nandamvyshnavi5075 2 года назад

You are the best tutor for React indeed..Thanks for the tutorials

@DipeshMalvia 2 года назад

You are welcome!

@sinxenon3181 Год назад

Thank you!! Great explanation! Topnotch content

@princekumarsingh2440 2 года назад

Thank you so much, now I utilise my upcomming weekends to learn this

@DipeshMalvia 2 года назад

Best of luck! Have Fun!

@azimkhan3927 2 года назад

it is really nice I followed the complete tutorial and implemented successfully, now redux toolkit is very much clear, thanks Dipesh.

@DipeshMalvia 2 года назад

Glad to hear that

@elsadbedel7369 Год назад

Thanks so much mr.Dipesh. Greetings from Azerbaijan.

@DipeshMalvia Год назад

Welcome!

@idevbrandon 2 года назад

Thank you so much. It helped a lot to understand async thunk properly

@DipeshMalvia 2 года назад

Glad it helped!

@PIYUSH-lz1zq 2 года назад

Thanks bhaiya this was soo good tutorial . being watching your playlists 👌👌❤❤⭐⭐⭐⭐⭐⭐ make a playlist or a post on reactjs interview questions based on lasted version and recent development !!

@aimalkhan8698 Год назад

great to explain redux ...😍

@DipeshMalvia Год назад

Thanks!

@munapadhi8723 2 года назад

Your video outstanding bro, thanks for your hard-working

@DipeshMalvia 2 года назад

I appreciate that!

@pulkitnangia5788 2 года назад

This project video was really helpful. Thanks a lot. Could you please implement same project using Toolkit and Redux Saga also. If you can create a whole playlist using Saga and toolkit then it would be really helpful to us.

@markdenvermanuel8493 2 года назад

Thank you so much!

@abhimanyuarora9262 2 года назад

Hi Dipesh, thank you for the tutorials. they are really helpful. Kudos to you! :) Can we please see inclusion of auth to this project in part 3? Authentication is the most crucial part of an application. There are so many react tutorials but only a few(or may be not even one) talk about "perfect authentication implementation in react" specially using access/refresh tokens. If we have that in this series, it will connect all the dots for any beginner who is watching this. Thanks a ton.

@DipeshMalvia 2 года назад

Working on a separate video for Authentication with React + Firebase.

@v1r47 2 года назад

There is no "perfect authentication implementation in react", you will have to get comfortable with one.

@ma.fernanda. 2 года назад

Thanks!!

@prashanthrh6011 2 года назад

Hi Dipesh, great video can you please also implement search option where we can able to search movies asynchronously.

@kevinkiumbe5620 4 месяца назад

I hope to do this exact project on my machine

@babakdorani5914 2 года назад

Thank you man this video was so good

@DipeshMalvia 2 года назад

Glad you enjoyed it!

@nargizgasanova6222 2 года назад

thanks

@mohamedyoussef8835 Год назад

Awesome teaching +++++++++++++++++++ 😃

@DipeshMalvia Год назад

Thank you! 😃

@jamesalanmikal 2 года назад

I'm sure that there is an easy explanation for this question and I just can't figure it out, but how would one make an API call to all movies, not just 'Harry' ?

@waqas8333 2 года назад

wao

@rajapboyev3928 2 года назад

good

@hikmatullah2131 2 года назад

Wow sir very nice thanks

@DipeshMalvia 2 года назад

Most welcome

@Ganesh-ld8ph 2 года назад

Hi bro, What is the different between createslice vs createreducer what to use and which is better, please explain in your style.

@vinaykumar6916 2 года назад

Please make a video on how to use redux rtk query with tookit combined way

@md.saifurrahaman223 2 года назад

Dipesh Malvia brother can you tell me please why &i=${id} is getting undefined while requesting for a get request?

@ramubhukya3238 2 года назад

Can you give me a suggestions for how to deploy our react into firebase . Pls give me sample code to post a react to firebase👏👏

@prasadmn5634 2 года назад

Please do vid on server side searh,dropdown filter,dialog in redux

@Arabian_Epileptic 2 года назад

Bro where did you get that mic from? It is very good. Please post link so I can buy or give name brand please. Thank you

@surafelnegaalemayehu1080 8 месяцев назад

thank you bro

@DipeshMalvia 8 месяцев назад

You're welcome!

@monibbormon6406 2 года назад

Thanks

@DipeshMalvia 2 года назад

Welcome

@qiqiliang7793 2 года назад

hello, can this project deploy on the server like goDaddy or herokku since you use third party omdb api?

@mdnurullah9882 2 года назад

your talk and face very nice

@guptaramdulare Год назад

Please help to undestand extrareducer part and

@shivajimk 2 года назад

Add pagination and sort by option also please

@georgemuncal534 2 года назад

Thank you for the tutorial, and I just want to ask. How to prevent to many request, calling many APIs and search filter. using the axios

@DipeshMalvia 2 года назад

You can try using cancel token in axios - github.com/axios/axios/issues/1714

@ProssCraft Год назад

Hi there, anyone knows how to solve this problem: {"Response":"False","Error":"Conversion from string ":1201607" to type 'Double' is not valid."} Im on a part MovieDetail trying to fetch the data into JSX elements, and that's what console.log(data) gives me.

@user121304 Год назад

Did u get a chance to resolve the issue? I am stuck too

@princekumarsingh2440 2 года назад

Humbly request brother please make video on formik.

@DipeshMalvia 2 года назад

Will try

@gotaeri 2 года назад

after I add cleanup code " return () => { dispatch(removeSelectedMovieOrShow()); }; " in the useEffect, Iam getting this error, TypeError: Object(...) is not a function. Is there any solution?

@DipeshMalvia 2 года назад

Can you take reference from the GitHub link added in the description of the video.

@mayurdv5766 2 года назад

thank you really useful video, would be great if you could give the link of source code

@DipeshMalvia 2 года назад

Please check the description I have added the GitHub link.

@hadeedtmgggg5837 Год назад

My movies are not set in movies after extra reducers anyone can help me?

@hadeedtmgggg5837 Год назад

After 3 hours of debugging I found that I am use Fetch Data instead of fetch movies in pending or fulfilled state😓🤣

@areyoukidding6274 2 года назад

why do u say it as synchronous action creator and asynchronous action creator .. thats wrong i think... both are asynchronous .. the difference is one is made from component and the other one is made from redux store.. please correct that because it will confuse the beginners.. btw good video..

@lisandroancewicz7821 2 года назад

Guys, the useParams is returning undefined. I tried everything. I'm even trying with the Dipeshs files. Please help! I wanna finish this turorial. Thanks

@DipeshMalvia 2 года назад

Did you define the parameter name properly and used the same name in your useParams ?

@lisandroancewicz7821 2 года назад

@@DipeshMalvia Hi Dipesh, first I want to thank you for your work and the tutorias which are great. Yes, they are the same. I even copy and pasted from you GitHub. The App that generates the Route and the Details companent.

@lisandroancewicz7821 2 года назад

here is the console print: {"Response":"False","Error":"Conversion from string "undefined" to type 'Double' is not valid."} Thank you Dipesh

@santiagoguastavino346 2 года назад

@@lisandroancewicz7821 Hello. Did you find a solution to this problem? I'm having the same issue and can't seem to find a workaround. Thank you in advance.

@santiagoguastavino346 2 года назад

@@lisandroancewicz7821 I used a rather raunchy workaround as a solution until I find more info on that bug. What I did was use the useLocation hook from react-router. Then I did: let imdbID = useLocation().pathname.slice(8) That gives you the code as a string, clean and ready to use. It's really bad code, but I want to finish the app lol.

@santiagoguastavino346 2 года назад

Hello Dipesh. I'm learning to use Redux with your videos. Thank you very much. I've recently encountered a bug that another viewer has asked for a solution here in the comments. Could you shade some light? It's about the line and usage of the hook useParams from react-router. let imdbID = useParams() // undefined let { imdbID } = useParams() // {"Response":"False","Error":"Conversion from string "undefined" to type 'Double' is not valid."} I'm going to look further into it tomorrow and post an update if I find a workaround. Good night. Regards!

@santiagoguastavino346 2 года назад

As of today I could kind of move forward with the app. I used a rather raunchy workaround as a solution until I find more info on the mentioned bug. What I did was use the useLocation hook from react-router. Then I did: let imdbID = useLocation().pathname.slice(8) That gives you the code as a string, clean and ready to use. It's really bad code, but I want to finish the app lol.

@user-ss3ih5cx3w Год назад

Короч, у кого проблема: {"Response":"False","Error":"Conversion from string ":1201607" to type 'Double' is not valid."} допиши в MovieDetail, в useEffect так: useEffect(() => { dispatch(fetchAsyncDetail(imdbID.slice(1))) }, [dispatch, imdbID]) console.log(data) Допишите .slice(1) к imdbID