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
Dipesh, I rarely watch coding lessons on TH-cam 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 TH-cam.
@@DipeshMalvia your explanation and content is next level .plz make a tutorial on react with webpack setup I'm not able to find the video which has good explanation on it ..plz...😢
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
Thanks for this really helpful project I learned redux toolkit from this 🙏🏻❤ For the developers who can't deploy their projects on netlify or something with this api , you just need to change the base URL protocol to "https" and that's it.
Thankx for the detailed explanation on the various topics. At this day, the ''Link' of the react-router-dom version 5 didnot work for me (don't know why, has worked in my previous projects). So, I had to change the react-router-dom to version 6. But, the video is informative. Thankx! :)
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 😍😍
Good video for Redux beginner !. But, I suggest you should remove the React.Strictmode, because it will send an error about the useDispatch method and the fetchMovies.
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...🤔
Hey Buddy! Brilliant Explanation! Its quite hard to search a practical project explained in so much excellent way! understood it fully! Really heads up to you! You are explaining in such a clear way! I listened it in 1.25 x speed! Thank you so 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! :)
Thank you for your video! I’ve 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 SPA’s? Thanks for any help
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 it would be a complete helpful tutorial me like learners. Thank you! 🙂
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 am not able to search from the show detail page. I've tried to debug for a while with no luck is this due to react 16 version updates?
Just a quick update... the Switch component was removed in react-router-dom v6 and replaced with the Routes and Route components. To fix this, you'll need to update your code to be compatible with react-router-dom v6. - Replace Switch with Routes. - Update the Route components to use the element prop instead of component.
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 has been cancelled or the person made some mistake while editing, thanks a lot for this tutorial, bro do you have a tutorial for a dashboard that has charts, forms, calendar, kanban? Am really in search of one, please do if you haven't done any, thank you
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.
@@SagarKumar-db2xy We don't need any State Management Tool, especially Redux. Use of useReducer & Context would work same as Redux. Redux increases complexity levels & sometimes it seems unnecessary. And your answer, yes we can do anything with Next.js. Nextjs helps in easy routing, static page generation at build time, so faster page loading initially. And also Server Side Rendering with getServerSideProps. In that case, page will be constructed every time, user requests for it. Rest read Next.js documentation. Gonna help you.
I am getting this error while using useParrams(). {"Response":"False","Error":"Conversion from string "undefined" to type 'Double' is not valid."} Did 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 project.Thanks!
I am getting imdbId as undefined so i am unable to fetch the data in movieDetails.js.I am getting error as "Error":"Conversion from string "undefined" to type 'Double' is not valid.Please solve this issue
Sir i uploaded this project on netlify and heroku too but it's not showing any results it says movie/fetchAsyncMovie/rejected in redux extension help me to solve this
hii bro iam facing below error while ejecting This git repository has untracked files or uncommitted changes: package-lock.json M package.json M yarn.lock Remove untracked files, stash or commit any changes, and try again.
getting a 'cannot read properties of undefined(reading selectMovieOrShow)' error when navigating to the movie detail page, trying to debug for quite a while, anyone else faced this?
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 favor of element:
![[MV] A leap of faith...ความเชื่อใจครั้งสุดท้าย (From "Petrichor the series")](http://i.ytimg.com/vi/U1piZH2CNXA/mqdefault.jpg)
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
Dipesh, I rarely watch coding lessons on TH-cam 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 TH-cam.
Best video on the internet for react and redux beginners. Please continue making more such videos. Learnt a lot
I will continue. Thanks Namratha!
Just finished, this is one of the best redux video on TH-cam, thank you so much 🌱🙏
Wow, thank you!
@@DipeshMalvia your explanation and content is next level .plz make a tutorial on react with webpack setup I'm not able to find the video which has good explanation on it ..plz...😢
An Excellent video to watch !!!! Must watch video for redux-toolkit.
Its super clear, keep educating. thank you!
thanks man! this was really helpful. By far this is the best video that is actually for beginners.
Thanks and glad you liked it!
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
You are most welcome
I really like your especially 1 hour video.
All the main concept are covered in 1 hour.
thanks. i learned a lot from this video about redux toolkit.
U r a great teacher ever...keep rocking ❤
Thanks a ton
The best explanation of redux toolkit 😍
Thanks
Bro ye toh maine dekha hai... But anyway to those watching it for the first time. Go for it, it's amazing
Thank you so much 😀
thanks for this tutorial, it helped me a lot to understand redux toolkit😁
Thanks for this really helpful project I learned redux toolkit from this 🙏🏻❤
For the developers who can't deploy their projects on netlify or something with this api , you just need to change the base URL protocol to "https" and that's it.
did you deploy this project? is it working after deployment?
@@thiyagum8649 yes sir its working well
Thankx for the detailed explanation on the various topics. At this day, the ''Link' of the react-router-dom version 5 didnot work for me (don't know why, has worked in my previous projects). So, I had to change the react-router-dom to version 6. But, the video is informative. Thankx! :)
same bro ..!!
U deserve ❤❤❤ brother ,thanks for the efforts and 🎉 for ur passion
Thank you so much 😀
i love you man you are very helpful thank you for this video wait another awesome videos like you
Happy to hear that!
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 😍😍
Welcome ShahNawaz.
Thank you so much , A much needed video. ❤️
Thanks a lot Dipesh i learnt a lot from this video, actually this is the video i looking for till now SUBSCRIBED..!
Thanks for the sub!
nice tutorial highly recommended
A kind request can you create a more complex project using redux-toolkit
Glad you liked it. Noted your feedback.
Excuse me, this video is old, react-router-dom change version 6.2.1, but is cool, thank you, this is a great video.
It's is combined single video. I know the react-router-dom v5 is used.
Thank U so Much This tutorial is Helpful ❤❤❤❤❤❤
Very helpful video, thank you...@42.07 it should be Immer
hey dude i love your videos, are really helping me!!!!
Glad you like them!
Thanks for the video.❤️
Your new subscriber from Pakistan.
Thanks, You're the best !
Good video for Redux beginner !. But, I suggest you should remove the React.Strictmode, because it will send an error about the useDispatch method and the fetchMovies.
I don't find removing a piece of code a good approach. I think it's here for some reason.
A perfect tutorial with live errors solving
If you are getting this error - 'Switch' is not exported from 'react-router-dom' (imported as 'Switch').
Use Routes instead of switch
3:00
11:46 (done)
16:14 (done)
32:24 (done)
45:00 (done)
1:01:45 (done)
1:17:20 (done)
1:25:00 (done)
1:33:00 (done)
1:39:07 (done)
1:42:00 (done)
1:46:08 (done)
1:50:00
Omg! You are the best!💪💪
Thanks!
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...🤔
Haven't tried zustan and SWR yet but I will have a look on them.
Hey Buddy! Brilliant Explanation! Its quite hard to search a practical project explained in so much excellent way! understood it fully!
Really heads up to you! You are explaining in such a clear way! I listened it in 1.25 x speed!
Thank you so 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! :)
It was great. Waiting for more depth on this
Sure thanks!
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!
More Redux projects plz waiting
Thank you for your video! I’ve 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 SPA’s? Thanks for any help
Haven't spend much time on NEXT and REMIX so it's bit early for me to answer. Will surely do analysis on this.
@@DipeshMalvia Good deal! Appreciate the response and hope you able to provide your thoughts one of these days
Please make a tutorial on Next.js with Redux.
could you please add "add/remove favorites"? thanks
Wow, thanks for your video sir, this is great 👍👍 ..
very informative thankyou
Is it different from the movie app you created earlier 🤔 that was also using toolkit
It's the same but combined video.
Wow perfect time to learn Redux 😀
Awesome!
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 it would be a complete helpful tutorial me like learners. Thank you! 🙂
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 am not able to search from the show detail page. I've tried to debug for a while with no luck is this due to react 16 version updates?
Just a quick update...
the Switch component was removed in react-router-dom v6 and replaced with the Routes and Route components. To fix this, you'll need to update your code to be compatible with react-router-dom v6.
- Replace Switch with Routes.
- Update the Route components to use the element prop instead of component.
Master Blaster
Thanks Sudhanshu!
Excellent
Thank you! Cheers!
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 has been cancelled or the person made some mistake while editing, thanks a lot for this tutorial, bro do you have a tutorial for a dashboard that has charts, forms, calendar, kanban? Am really in search of one, please do if you haven't done any, thank you
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.
Can we build complete full stack app with Next Js? I mean apart from Seo, how Next js helps us?
@@SagarKumar-db2xy We don't need any State Management Tool, especially Redux. Use of useReducer & Context would work same as Redux. Redux increases complexity levels & sometimes it seems unnecessary. And your answer, yes we can do anything with Next.js. Nextjs helps in easy routing, static page generation at build time, so faster page loading initially. And also Server Side Rendering with getServerSideProps. In that case, page will be constructed every time, user requests for it. Rest read Next.js documentation. Gonna help you.
excellent sir.........
Thanks Bala!
did you deploy this project? is it working after deployment?
plz make a video on redux saga it's very useful to new devloper
RtK querrry vs thunk which is good to use as a middleware in react
if i am uploading the api key it does not showing me the movie info please help
You're awesome!
I am getting this error while using useParrams().
{"Response":"False","Error":"Conversion from string "undefined" to type 'Double' is not valid."}
Did 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 project.Thanks!
I'm unable to fetch the api key. it says no patron was found. how to resolve?
Thank you so much sir
Welcome!
excellent teaching my sweet heart
Many many thanks
did you deploy this project? is it working after deployment?
The OMDB API key has not been received with my mail id.
Well done boi!
very gooooooood
Thanks and welcome to the channel!
Loved it 😀😀😘😘
thanks for the video
I am getting imdbId as undefined so i am unable to fetch the data in movieDetails.js.I am getting error as "Error":"Conversion from string "undefined" to type 'Double' is not valid.Please solve this issue
awesome video awesommmmeememme
awesome man
Glad you enjoyed it
Very helpful
i tried hiding my api key by using the REACT_APP_API_KEY in the .env file and tried the process.env but it isnt working
could you please teach a tutorial on React E-commerce project ?
I want to react on this video and thunk you for this video
thank you for video.. let me ask question.. which one is the best? Zustand or Redux Toolkit? What do you think?
Haven't used Zustand yet so can't say much which is better.
Redux toolkit is king as it has a wide community and documentation. But zustand saves you time with less code
Sir i uploaded this project on netlify and heroku too but it's not showing any results it says movie/fetchAsyncMovie/rejected in redux extension help me to solve this
u the best
Thanks!
hii bro iam facing below error while ejecting
This git repository has untracked files or uncommitted changes:
package-lock.json
M package.json
M yarn.lock
Remove untracked files, stash or commit any changes, and try again.
getting a 'cannot read properties of undefined(reading selectMovieOrShow)' error when navigating to the movie detail page, trying to debug for quite a while, anyone else faced this?
Waiting for Node.js and mongo db full course....!!! It is possible???
Yes, that's planned for next year.
Hi sir, facing issue when i try to install sass package, any body facing same issue?
npm ERR! path D:\React\Projects\RTK_MovieRatingApp\movieratingapp
ode_modules
ode-sass
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node scripts/build.js
..
..
..
at 1:07:55 we dont have to spread the state right? becuase immer.js handles the state mutation
Poster is undefined....what to do?
How to dispatch synchronously in redux toolkit
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 favor of element:
Hey, here is the updated video of this tutorial with React v6 and context API - th-cam.com/video/ZZOkCrQ2iLk/w-d-xo.html
Could you please upload video redux toolkit with redux saga
thanks for detailed video. You should use latest router v6 in this project.
Will do soon
👏
great j0b bro
(y)
Thankyou!
when u say "this is a too ass long React video for begging-ers", it is so funny hahaha XD. Great video, very useful, thank you.
1:14:00 idk why my show cards have overlapped with movie cards.
use typescript for projects
I need your help,
I have a message while calling api
that api call is undefined???
plz give me some suggestion
Hi, did you solve your bug? I'm also having the same issue, I get network error trying to call the API even though everything is fine.
HOW SHOULD I GET API KEY, YOU ARE NOT MENTOINED API KEY IN GITHUB, PLEASE BE MENTIONED THERE.
cool
list of error occur when installing node sass
44:00 personal bookmark.. Please ignore 😊
i got error connect time out when fething api
Why did you choose to use Scss? I think you can do the same work with CSS as well.
Yes, but SASS is required by many jobs, the purpose is to give an introduction to the technology, this tutorial is an introduction for SASS and Redux.
You can't do nesting with CSS and that's the major benefit comes with SCSS.
Awesome video ++++++++++++++++++++++++++ 😃
did you deploy this project? is it working after deployment?
Switch is not supported now
I have invested more than half hour doing it.
It is deprecated by Routes
My crome browser not showing redux