React Redux Toolkit with Project | Redux Axios Tutorial | React Redux Tutorial For Beginners - 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.
You will find the topics covered in the timestamp below.
Node.js: The Complete Guide to Build Backend Projects [2023]🔥
Link - www.dipeshmalvia.com/courses/...
🔥 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-...
Accelerating Development: bit.ly/Unacademy-AnujGarg-Sof...
⭐️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:04:48 - Code Walkthrough
0:07:54 - Installed Packages
0:08:32 - Movie Application Structure
0:09:54 - Creating Folder Structure and Files
0:14:10 - Adding functional component snippets
0:15:50 - OMDB API Key and usage
0:18:14 - Add Routing to Project
0:22:18 - Header Component with SCSS
0:27:49 - Adding common CSS to App.SCSS
0:29:41 - Footer Component with SCSS
0:31:36 - Home Component with SCSS
0:32:51 - Use Axios for API Call
0:37:44 - Adding Redux to Project
0:38:10 - Configure Redux Store
0:39:22 - Provide Store to App Component
0:40:30 - Redux Toolkit documentation walkthrough
0:42:28 - Create a Movie Slice
0:48:40 - useDispatch to dispatch action
0:51:10 - useSelector to access state
0:53:04 - Movie Listing Component with SCSS
0:58:22 - Movie Card Component with SCSS
1:05:29 - 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 | Part 1 - • JavaScript Tutorial Fo... JavaScript Tutorial For Beginners | Part 2 - • JavaScript Tutorial Fo...
JavaScript Tutorial For Beginners | Part 3 - • JavaScript Tutorial Fo...
JavaScript Tutorial For Beginners | Part 4 - • 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.

[@DipeshMalvia]

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]

I want to truly thank you for this video bc this is exactly what i have learned and need a project for axios, react-redux, redux toolkit, router-dom. Thank you so much again

[@prasankumar4306]

Super Explanation - No Lag - I loved your teaching ❤❤

[@saviourjoshua9129]

thank you Dipesh. am a beginner and your react-redux tutorials has really helped my personal development.

[@neerajgoswami2897]

You makes everything easy 💙

[@moustaphatoure370]

AWESOME !!! THANKS A LOT IT'S CRISTAL CLEAR FOR REAL !!!

[@wilsonmwangi8647]

Very good redux toolkit tutorial. Was really helpful. Thanks

[@subhashgn1775]

Very well explained Dipesh. Thank 🤝👍

[@akhror-oshie]

Thanks, Dipesh for the amazing class series and keep up the good working

[@WillSmith-qt7me]

Great and useful video!

[@frankfarfan3107]

Thank you so much bro, you was very clear and helpfull :D

[@saqlainkhan9924]

You are doing amazing work bro I learning a lot from you Thank you🎉🎉

[@akshitsanwal3548]

In react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from import { Switch, Route } from "react-router-dom"; to import { Routes ,Route } from 'react-router-dom';

[@DipeshMalvia]

Thanks for the updated code

[@shrishalini4715]

Have you completed doing this video?

[@qiqiliang7793]

This is AMAZING!!! thank you so much for sharing!!!!!!! it helps me A LOT

[@DipeshMalvia]

Glad it helped!

[@badrinathchenna2209]

Great video

[@pateljay5351]

Great work ❤️

[@robiparvez]

In terms of react snippets, nothing beats ES7 React/Redux/GraphQL/React-Native snippets

[@jijinprabhakar6111]

Thanks for the amazing video !!! When you are going to upload the next part !?? Please add the search functionality also.

[@brkkmrc]

by the way thank u man you are amazing :) clear easy and usefull

[@DipeshMalvia]

Glad it helped!

[@teminoah2960]

I just listened for only few minutes and I already knew its a great video by great instructor. well done

[@PIYUSH-lz1zq]

Bro , what's difference between redux and redux toolkits

[@chinnichandhana9085]

@@PIYUSH-lz1zq redux will come with huge boilerplate code which is reduced to a lot of extent in redux-toolkit

[@sarfarazpycoder7870]

I am following this project

[@ma.fernanda.]

Thanks!!

[@mohamedakhib7379]

Now I'm learning redux perfectly by reffering your video's 🎊 Thank you so much 🎊

[@DipeshMalvia]

Superb!

[@PIYUSH-lz1zq]

bro , why he has put ?apiKey=${APIKey} shouldn't be it like apiKey=${APIKey}

[@SamruddhaShah]

Thanks for making such a quality videos

[@DipeshMalvia]

Welcome!

[@olesyakostina3724]

Thank you ❤️ it's really best content 😊

[@DipeshMalvia]

Most welcome 😊

[@mahendranath2504]

Thank you so much 👍🏼🙏🎉

[@DipeshMalvia]

You are very welcome

[@imkir4n]

Thanks for the video ❤️

[@DipeshMalvia]

You’re welcome 😊

[@kishoreweb6689]

Its really help me a lot thank you bro

[@DipeshMalvia]

Welcome!

[@18.j]

Thank you bro very appreciated

[@DipeshMalvia]

Welcome!

[@niravsanepara3934]

awesome

[@saifansari201]

Waah! What a great video. Learn a lot.

[@DipeshMalvia]

Glad you liked it!

[@PIYUSH-lz1zq]

bro , why he has put ?apiKey=${APIKey} shouldn't be it like apiKey=${APIKey}

[@akshayrr3061]

Amazing video sir!!

[@DipeshMalvia]

Thanks!

[@52nevil36]

Thanks for making such a GOOd videos

[@DipeshMalvia]

Glad you like them!

[@PIYUSH-lz1zq]

bro , why he has put ?apiKey=${APIKey} shouldn't be it like apiKey=${APIKey}

[@hikmatullah2131]

Love it

[@DipeshMalvia]

Glad you enjoyed!

[@princekumarsingh2440]

Great stuff brother 🙏

[@DipeshMalvia]

Thanks !

[@aburaihan-py4vi]

Excellent!

[@PIYUSH-lz1zq]

Bro , what's difference between redux and redux toolkits

[@akashkulkarni4878]

Thx bro great work 👏👏 Actually I am restarting to learn React and this project is the perfect start.

[@DipeshMalvia]

You can do it!

[@PIYUSH-lz1zq]

Bro , what's difference between redux and redux toolkits

[@user-rp8oy2kf5d]

Thanks bro! This video vas very helpful! Cheeers from Russia

[@DipeshMalvia]

Welcome and Keep watching!

[@sonamohialdin3376]

So good tutorial thank you

[@DipeshMalvia]

Glad it was helpful!

[@hontran9103]

Thank you so much.

[@DipeshMalvia]

You're welcome!

[@manikandann1202]

Hi, I learn Everything react from your channel. Thanks.

[@DipeshMalvia]

Thanks for supporting the channel.

[@chiranjeevichowdary5948]

Whatta explanation!!!

[@DipeshMalvia]

Thanks Chiranjeevi!

[@sinaukode]

I like it, how you explain everything from scratch, some other tutorial just start to code, and write some alien's code that we don't understand

[@DipeshMalvia]

Thanks! keep watching 😊

[@michaelmilstein5179]

Thank you so much it’s an amazing video. Can you do one with toolkit and typescript🤞🏻

[@DipeshMalvia]

That's the plan.

[@PIYUSH-lz1zq]

bro , why he has put ?apiKey=${APIKey} shouldn't be it like apiKey=${APIKey}

[@mohamedyoussef8835]

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

[@DipeshMalvia]

Thank you! 😃

[@AhmedIbrahim-wx8sm]

Mr I follow your course but with a different API, I minute 53 when I git all movies it returns an empty object? why is it that you think and when I use "useselector" to get all the movies all the designs like header and footer is disappear

[@user-qo7ls9fh7z]

Will you record a video about RxJS with React? Maybe a stopwatch or other app ? Also thanks a lot very good explanation 👍

[@SamruddhaShah]

Please use redux persistent storage as well

[@vinaykumar6916]

Please make a video using redux rtk query Nd toolkit with authentication waiting for your response@deepesh

[@mohamedsamy2315]

can we used RTQ query or RTQ only will be enough ????.... and if we can how can we make this if you have already etrareducers

[@Glitchnavigator]

you can write "rafce" to no need to write component name inside div.

[@slmshady539]

This was really a very well-organized video dipesh. Amazing work.

[@PIYUSH-lz1zq]

Bro , what's difference between redux and redux toolkits

[@slmshady539]

Bhai redux is the main thing, global state management solution.. but it was a little complicated so the redux team has released redux toolkit to do the same thing... So what you ideally need to do is, go through redux tutorials first and why we need redux, and after that you can refer to redux toolkit to make your life easier... Even if you don't learn redux toolkit, it's all fine... You'd still be able to do what you need to.

[@PIYUSH-lz1zq]

@@slmshady539 bhai kitna padhre !! har dusre din koi development aajati hai !

[@PIYUSH-lz1zq]

@@slmshady539 college me , dayananda sagar , tum

[@PIYUSH-lz1zq]

@@slmshady539 nice , mebhi banglore me ! konse stack me kam karte ho ? may i know your location ...

[@tarunkovvuru8741]

Waiting for Nodejs also

[@iamkrunal]

Thank you Dipesh for your video. When are you releasing the second part? Are you going to do any video with RTK Query?

[@DipeshMalvia]

RTK Query added to my list.

[@PIYUSH-lz1zq]

bro , why he has put ?apiKey=${APIKey} shouldn't be it like apiKey=${APIKey}

[@DipeshMalvia]

@@PIYUSH-lz1zq the question mark is for adding query parameters in the URL.

[@PIYUSH-lz1zq]

@@DipeshMalvia does it depend on api and its parameters ?

[@tarunkmr145]

what's difference between import and @import. why did you use @import

[@prajwalpatil8579]

[Violation] 'setTimeout' handler took 246ms hey bro i am following your tutorial i am gettng above error could you please help me on this?

[@anshikayadav9048]

Idea(redux store):- / small form app which have 3 pages journey ( 1st and 2nd page have form page and 3rd on is dashboad the form data) -- So on the first page when user loads the page api should call the pre-filled the fields and now user try to edit form and proceed then calling the api when api get success user will navigate user navigate to separate route means 2nd page. -- Once user come in 2nd page if user try to back to the previous route then api call should not be called and the data should be pre-filled whatever user modified on proceed.

[@DipeshMalvia]

Interesting 👍

[@diegoalejandrotororeyes5895]

hi, I don´t speak english, espero me puedas leer, soy totalmente nuevo con redux toolkit, y tengo un error que desconozco pero es al momento de pasarle datos al reducer mediante axios, no me deja ocupar async/await y tampoco me deja utilizar promesas de la manera tradicional de vanilla, me da el siguiente error; error revoked get onlineService(payload) // my function api query users .then(({ data }) => { state.user = { online: true, content: data.data, token: data.token, }; }) .catch((err) => console.log(err));

[@akhileshmishra5559]

sir please stripe payment with node js and react or next js in one videos

[@regilearn2138]

Hi thanks for video,can you use thunk example and saga example both,bcz saga example are very rare.

[@DipeshMalvia]

Great suggestion! I don't like saga and more comfortable with using Thunk. Still I will take a note and make a video with saga example.

[@regilearn2138]

@@DipeshMalvia appreciate your reply. thunk is my choice,but some company's use this generator function and saga with redux is bit hard to understand,we are waiting :)

[@rohankurane45]

hey dipesh plzz made video on contact form in pure usestate without classes

[@DipeshMalvia]

Already have a video on useState - kzbin.info/www/bejne/hmOXdqiAobt-mJI

[@rohankurane45]

@@DipeshMalvia ok thank you 🙏🏼

[@saqibghouse5440]

Can you make redux tutorials?

[@CTILET]

where you get an API key

[@harshitrathi3077]

Next Video Plz On React Redux

[@DipeshMalvia]

On Thursday 😊

[@harshitrathi3077]

@@DipeshMalvia Okay waiting , will it be the last part ?

[@niravsanepara3934]

🤙🤙🤙

[@nirajsali6939]

login with email but not work OMDb API

[@Ozoocats]

please,Can you help me my keyApi doesn't work ? and console give me error Unchecked runtime.lastError: The message port closed before a response was received. what can I doing?

[@abhiramsathiraju6276]

you should activate your Api key if you didn't know.

[@siddharth3419]

should have pagination also

[@kavyab6405]

Hi @Dipesh, Thanks a lot for the video. My get API is getting called twice, in the network Tab and I get two responses also. How can I avoid that

[@DipeshMalvia]

I think somewhere your useEffect is getting called twice based on the dependency array. Can you put console log and do debugging.

[@kavyab6405]

@@DipeshMalvia Its the new React version feature, that mounts and unmounts the component, which calls my API twice, I guess

[@codingpotato813]

use useEffect within useRef hook. It will allow useEffect to render only once

[@BerkhofOfficial]

what react version is this ? it feels outdated because i get lots of errors (eg: react-router-dom) :(

[@DipeshMalvia]

You can take reference from the github link added in the description of the video for versions.

[@thefrustratedboyy]

dipesh your redux tutorial is amazing but your code is showing an error with regard to arrow function in movie listing i saw your code again and again and mine is absolutely identical but still an error is coming that arrrow function expects a return statement

[@DipeshMalvia]

Can you download the source code from github and do npm install and then npm start and check do you get such error.

[@andreiflorian01]

did you fix it? I'm having the same issue

[@thefrustratedboyy]

@@andreiflorian01 yes just give it a return statement and it's fixed

[@andreiflorian01]

@@thefrustratedboyy it worked, thanks ! :)

[@bijendernagar15]

Thank you so much sir g 🙏🙏🙏 can we use redux toolkit instead of thunk

[@DipeshMalvia]

You need to use THUNK only when you want to have Async action creators. We will see how we convert Sync action creators into Async in second part of this video.

[@bijendernagar15]

@@DipeshMalvia 🙏🙏🙏🙏🙏

[@PIYUSH-lz1zq]

bro , why he has put ?apiKey=${APIKey} shouldn't be it like apiKey=${APIKey}

[@timeonnerworld4687]

sir i need the zip file of that project , can i get it from you

[@abdulrahmanraziq809]

Can we OMDB for free

[@letsdoit7040]

I am getting error it is showing moviesReducer module not found

[@whitykhan-ny3oi]

Did u solved it

[@toannew]

21:39

[@timeonnerworld4687]

i am facing some error

[@tapasdutta3595]

I don't understand, why we have used redux in this project.

[@rakeshbaghel9126]

Sir appne product details page nhi bataya jo apne demo me bataya h

[@DipeshMalvia]

Check part2 of the video

[@tapasdutta3595]

Miss use of redux

[@ronytesler]

The code in the link is different than what you have on this video.

[@abhiramsathiraju6276]

Its the whole code, like the series contains 3-4 videos of full project, so better check the code after completing every video.

[@projectbasedcoding]

Where is part 2?

[@DipeshMalvia]

Here you go part 2 - kzbin.info/www/bejne/fJa8hYCpjNWah9E part 3 - kzbin.info/www/bejne/jHbTapeNZbKYeqM

[@bharathboyapati3539]

It will be much more easier if we are using fetch instead of axios

[@ALoordAhmedYT]

axios is more easy my son

[@relghost]

you skipped so many thinks if i didn't already know it i would call you a bad teacher but who am i to talk I'm horrible at teaching to

[@DipeshMalvia]

Thanks for feedback, I will try to improve.

[@gauravprakash8080]

* * * * *

[@DipeshMalvia]

Thanks Gaurav for 5 stars

[@musakurel]

Dude, you're saying too many "alright" don't do that! :D

[@vaishnavi12138]

Both not working :(

[@DipeshMalvia]

If you are using React Router Dom V6 then these will not work. You can take reference from my other video how React router v6 works - Code Refactoring : Context API | React Router V6 | Learn React JS with Project in 2 Hours kzbin.info/www/bejne/kIuynHaohpecgs0

[@vimalpawar9840]

Hi @Dipesh I followed you till time stamp 55:33 but later on I faced issue in code renderMovies = movies.Response === "True" ? ( movies.Search.map((movie,index) => { })): (Error) It was not able to render MovieCard compoent was not able to display component checked everything but not helped Thanks .

[@niravsanepara3934]

you have to write render in the map function before curly brackets if you don't want to write return then remove curly brackets your problem will be solved

[@anshul9680]

I didnt get my API Key , i mailed , still nothing @DipeshMalvia