Redux CRUD Tutorial in React - Redux Toolkit Tutorial

In this video I will teach you all how to code a CRUD (Create, Read, Update, Delete) application using Redux in React. I use redux toolkit to make this happen :)
CODE: github.com/machadop1407/redux...
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Business Email: [e-mail]
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#reactjs #redux

[@murat6018]

I really enjoy your tutorials man. You're really, really good at teaching. Everything is simplified and easy to follow. You deserve more views IMHO.

[@randerins]

Justamente o video que precisava pra concluir meu bootcamp. Valeu Pedro!

[@ajitshaw1936]

You are the most awesome teacher I have seen, I have been trying to learn redux for a long time and now after this, I can proudly say I have learned it.

[@ismetomerkoyuncu1179]

i just found you in this monday and you are just amazing, i mean its like your advices and tutorials are more effective.

[@shinobi_coder88]

Thanks for making me addicted to your contents bro, I'm a frontend dev and discovered great opportunities in many of your videos. Easy to understand and very straightforward! Keep making new amazing videos and help your subscribers to achieve their goals ✌️

[@PedroTechnologies]

Hahahaha it makes me happy to know your liking the content! Good luck on ur journey :)

[@shinobi_coder88]

@@PedroTechnologies Yo Pedro, I just got curious in some ways about your blog tutorial with firebase v9 Auth and Firestore in React. Is it possible if I create a similar project with Next.js, Firestore, and NextAuth instead of Firebase Auth??

[@vjp2866]

Man you are a treasure I found in the internet !!! Keep it up bro, im seeking lot of react tutorials from you. Hope you are getting enough payments from youtube, you need a lot of payment !

[@mouhanedakermi4019]

Absolutly amazing like always Pedro ! You made me fall in love with your content ❤

[@josesantillan732]

Amazing Pedro!! Killing it, man. Keep it that way

[@youngfather320]

Good job Pedro! Thank you for your awesome tutorial. Keep doing it!!!

[@syedabdulsuboor1415]

Hey Pedro, Just wanna say that I was just struggling to understand Redux by watched around 4-5 videos, but that weren't as easy as yours. Thanks a lot of man !

[@storyPlus12]

Perfect explanation. Thanks mate 🙏

[@mansoob]

Great tutorial, cleared many ambiguities. You presented it in a quite logical way the app should have been developed. Quite simplified.

[@oscaranillo7131]

Pretty awesome, clear and very well explained! Keep up the good work!

[@woofcode3383]

Thanks so much Pedro, another great tutorial!

[@ThColinPereira]

Super helpful, thanks Pedro!

[@holderchannel4393]

Thanks so much for your dedication! I love this video. I am a react developer and I really love using Redux to manage states in my applications.

[@vichesayolana1738]

Thankyou sooo muuuch Pedro! I really love your explanation.

[@SvetaSveta-ms4hi]

Thanks a billion! 🙏 Extremely useful.

[@hardwired89]

waw my requestt last month, thank you pedrooo ❤️

[@PedroTechnologies]

Hope you like it!

[@surajsoni3678]

Amazing video. you made every concept easy. God bless you

[@luckystr1k3]

Man this tutorial is very clear even for those who know nothing about react

[@aaxxll3550]

thank you so much for all the effort you put into your videos, you don't know how much you've helped me!

[@WellMetMunro]

Nice CRUD app that covers everything I wanted to know. Thanks.

[@donnazukowski]

I love your channel because you ARE a programmer who works with this tech stack. You layout your videos as to what a programmer would need. I loved your React/Firebase tutorial. Is it possible to do that one again using Redux?

[@connergoldberg]

Awesome stuff Pedro! Could you perhaps do a tutorial on using redux-thunk in order to integrate async middleware into redux through the use of apis?

[@rahulsutar6263]

yes please

[@ericmomoh7927]

Connect with me on LinkedIn

[@ericmomoh7927]

@@rahulsutar6263 hope you have found out

[@rahulsutar6263]

@@ericmomoh7927 no could you plz share

[@hamzashaikh571]

Awesome video, learnt a lot

[@ManfredAlberto]

Great tutorial, thanks!

[@faris.abuali]

Thanks Pedro!

[@shivanshpatel4072]

Awesome video Man

[@aryamitrachaudhuri6564]

Thank you Pedro!

[@rahulsutar6263]

awesome i love it, thank you so much for this video

[@danlleo]

Thanks! Great as always 😊

[@PedroTechnologies]

Thank you!

[@deepaknarayanchilmule2767]

Very helpful bro. More on redux please...

[@giorgikiladze1151]

thanks was really helpfull

[@georgeasv.4214]

Top content as always !!

[@sumairimtiaz4545]

Thank you very much sir.

[@dalandan8300]

I'm "mukbanging" your videos this year and become a better programmer.new subscriber here from Ph

[@PedroTechnologies]

Hahaha glad to hear! Thank u for watching :)

[@ujenbasi9495]

@@PedroTechnologies sir, today i just completed the graphql video. I really enjoyed that video. Can you please make more videos on graphql??

[@jason96G]

I would reccomend using a forEach method instead of map method in the updateUsername action. This will eliminate any console warning about not having a return in the map method.

[@Kamim78]

Great, Thanks so much :)

[@owltrades]

Thanks Pedro ❣

[@francogaliotti3837]

You are the best pedro

[@kelvintafadzwamaringire4504]

Great content great music ❤‍🔥❤‍🔥❤‍🔥🔥🔥

[@AlEgorova]

Thanks! Very helpful!!! Can we have a bigger CRUD project with backend and redux?

[@andrewsmal5173]

That’s amazing thx

[@abhishekrawat8579]

great video sir❤️

[@naveenkarthik4495]

Thanks a lot!!!!

[@please_pin_me]

awesome stuff I get a job!

[@murali7370]

Thanks Pedro

[@JamesSmith-yj7wq]

Hello pedro, awesome video.. can you please also advise how can we persist the data in a storage because currently when we refresh the app, the store is refreshed?

[@viniciussantosaguiar9543]

Super!! Very Cool!!!

[@johnsunday3548]

Great content mentor...more Grace sir...pls redux toolkit , react and firebase.

[@inihood]

I love this 😍

[@Star-hw8bh]

Thank you so much. I wonder why there's not timestamps in this one

[@MashxuraXakimova-si4le]

Good job 👏 👍 👌

[@codemize]

Well done👌🥳

[@iam_djumanov]

I Really fan of your videos .... Pedro Is it all about Redux Toolkit ? Thanks for answers .....

[@amrutkhot992]

Thanks for this Video.. ! Your Previous video on redux was also Good....! Btw, which theme you are using for VSCode ?

[@ManfredAlberto]

Palenight Theme and Material Icon Theme.

[@nargizgasanova6222]

thank you

[@cuneytdonmez214]

Thanks...

[@patrickudeh5869]

Good one bro.. Any link for full mern stack app?....

[@wotizit]

"He's back" - Minister of magic

[@wotizit]

Might use context api

[@qigongzhu2733]

That's a greet video ,but if you can add some maitain or reserve function will be better ,for example use fireBase Storage, and add fetch logic to make what we created, updated ,deleted ....

[@dkevin1553]

Thanks for the great video. Can you please tell which VSCode theme are you using in this video?

[@ManfredAlberto]

Palenight Theme and Material Icon Theme.

[@marcosmeneghetti3261]

Ola, Pedro, tudo bem? Primeiramente gostaria de agradecer pelos incriveis tutoriais que voce proporciona na internet. Sao muito bons. Mas eu estou tendo alguns problemas que eu gostaria de saber como corrigi-los. 1- SE eu deleto todos os elementos da lista, e quero acrescentar um novo, eu recebo uma mensagem de erro - Cannot read properties of undefined. 2- Se eu coloco Amanda no input de Leanne Graham, ele muda o username de Leanne Graham sem problemas. So que se eu clicar no botao updateusername sem colocar nada no input do Ervin Howell, o username de Ervin Howell tambem muda para Amanda. Tem como zerar os inputs para evitar acumulo de usernames, assim eu consigo fazer update para cada um com o nome correspondente para cada um. 3-Se o input esta vazio, ele tira o username de cada elemento. Tem como fazer si input esta vazio nao mude o username? Mais uma vez muito obrigado pelos incriveis tutoriais.

[@Prince_515]

Hey, what theme do you use? Also, I just started the Graphql course on your YT and the course is really helpful and detailed, thank you for that!!

[@aprovado597]

Same question

[@ManfredAlberto]

Palenight Theme and Material Icon Theme.

[@ManfredAlberto]

@@aprovado597 Palenight Theme and Material Icon Theme.

[@storyPlus12]

How can I store my useState hook in redux toolkit?

[@user-js9pd7cv6g]

I don't understand why you change state strictly. What about immutable? I was teached on my course that we can't change state straight, we should mede copy {... state}. Or maybe toolkit provides us such possibility to change state "right on face"? Thank you for the video!

[@ggrisch]

When you use map function the first jsx element must have unique key prop.

[@mabrarhassan]

i doubt if you change username of first row and then click the update but on second row, the state value will be applied to second row. 😃

[@worldclasscode1847]

Awesome tutorial. Is the state persistent in this tutorial app? If I hit refresh, will the state persist?

[@connergoldberg]

It depends on if you are calling reducers within your parent components which can override state in your child components, but by and large..yes refreshing the ui will still persist the state

[@yasinnkhann]

Do you think it’s worth learning the old redux way? Map dispatch to props and all that? If so, could you make a video on that?

[@137dylan]

It might be useful for legacy code bases and or class components. There are some videos on YT. Overall tho I would focus on modern techniques that include hooks and functional programming.

[@conspirisi]

How to I get a component to rerender everytime a redux store updates and the component reflects the changes of the store? I can get the initial state using useSelector, but after that it doesn't update.

[@alihafezis]

great

[@GreatAdib]

can you do this with django rest framework api and consume this in react with redux with CRUD (image upload also) this would be a nice project👌👌

[@vincent3542]

good explanation pedro, but there is one thing that bothers me. what value does "reducer deleteUser" hold when calling "dispatch" to delete a specific user in App.js? if I try to guess maybe when the "delete user" button is pressed then the "action.payload" in "deleteUser" in "users.js" will be an object with the user we want to delete. Is that true?

[@connergoldberg]

The action.payload will give you whatever information was dispatched by your component. So if a delete button is clicked it will dispatch a payload to the deleteUser reducer and that payload is equal to whatever was dispatched.

[@binitrupakheti4246]

I used valtio for global state management and react query for server state and never looked back to redux.

[@GonzaloGuevaraFreire]

Hola, consulta, el tema de iconos para VSCode que estás usando , cual es ?

[@PedroTechnologies]

Electron

[@itsaaron6423]

TypeError: undefined is not an object (evaluating 'userList[userList.length - 1].id') says so when i delete all the user

[@sayamrahmanrobin2969]

good

[@mohamedyoussef8835]

Awesome video +++++++++++++++++++++++++++++++

[@dheerajtp5701]

Hey pedro can u give an intro to store these items in local storage using toolkit ? Btw thnx for all the videos brother

[@connergoldberg]

In your reducer, just put the item in localstorage if it doesnt exist already and remove whenever you want.

[@dheerajtp5701]

@@connergoldberg ok bro will try thnx brother

[@informationtechtips5391]

Hy Masha Allah

[@nanonkay5669]

Why not use the createEntityAdapter api for crud operations? It works like magic. But it is kinda advanced, I won't lie

[@indiancuriousvoice8773]

Make a industry level mern project

[@manoj-k]

🔥🔥🔥

[@jorgedavalos5663]

can you do this tutorial with recoil? 😬

[@VinciJeremy789]

"dispatch is not a function" -this error is coming. What to do😢

[@ashish_prajapati_tr]

what is the theme you are using?

[@ManfredAlberto]

Palenight Theme and Material Icon Theme.

[@alimozaffari3539]

Thank you for your nice tutorial. I have tried to get data from API instead of local fakeData as you used in this tutorial. But I could not receive data. I faced error of "Uncaught TypeError: xxx.map is not a function at App (App.js:10:1)". Please help guide me what to do. Thanks

[@ericmomoh7927]

Hope you have found out? You can connect with me on LinkedIn if you are still interested in knowing it

[@ichigokuro3986]

What's your vscode theme?

[@ManfredAlberto]

Palenight Theme and Material Icon Theme.

[@percentage42]

Where is the source code for this tutorial?

[@ivanrabelo1558]

vc é brasileiro?

[@saudkhan1080]

Mor react redux plzz ❤️

[@PedroTechnologies]

More to come :)

[@skyhappy]

@@PedroTechnologies Redux can be unnecessary overhead I wouldn't want more tbh

[@tumon001]

Make a simple chat app tutorial. don't need to focus on UI too much. We are waiting...

[@msh_dev]

Theme name?

[@ManfredAlberto]

Palenight Theme and Material Icon Theme.

[@aliomer9049]

😍😍😍😘

[@fatehmr6681]

There are some bugs in your application

[@filipevalentegomes2383]

When you use something like recoil, then you realize how overcomplicated they made redux. Even with redux toolkit, it still looks all over the place. The video was great, redux just isn't.

[@PedroTechnologies]

I guess it depends on what you are used too! Both have very good support, I will make a vid on comparing all the state management libraries.

[@AmpreaRamingo]

Mettetela un po' di pubblicità ogni tanto...

[@osamayousuf6135]