Redux CRUD Tutorial in React - Redux Toolkit Tutorial
HTML-код
- Опубликовано: 9 окт 2024
- 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/mac...
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
🐙 GraphQL Course: codedamn.com/l...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Business Email: pedro@pedrotech.co
Tags:
ReactJS Tutorial
ReactJS and MySQL
NodeJS Tutorial
API Tutorial
#reactjs #redux
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 ✌️
Hahahaha it makes me happy to know your liking the content! Good luck on ur journey :)
@@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??
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 !
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?
yes please
Connect with me on LinkedIn
@@rahulsutar6263 hope you have found out
@@ericmomoh7927 no could you plz share
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 !
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.
i just found you in this monday and you are just amazing, i mean its like your advices and tutorials are more effective.
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.
Man this tutorial is very clear even for those who know nothing about react
Justamente o video que precisava pra concluir meu bootcamp. Valeu Pedro!
Great tutorial, cleared many ambiguities. You presented it in a quite logical way the app should have been developed. Quite simplified.
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.
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.
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!
Absolutly amazing like always Pedro !
You made me fall in love with your content ❤
I'm "mukbanging" your videos this year and become a better programmer.new subscriber here from Ph
Hahaha glad to hear! Thank u for watching :)
@@PedroTechnologies sir, today i just completed the graphql video. I really enjoyed that video. Can you please make more videos on graphql??
Nice CRUD app that covers everything I wanted to know. Thanks.
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?
waw my requestt last month, thank you pedrooo ❤️
Hope you like it!
Thanks! Very helpful!!! Can we have a bigger CRUD project with backend and redux?
Good job Pedro! Thank you for your awesome tutorial. Keep doing it!!!
Amazing Pedro!! Killing it, man. Keep it that way
Pretty awesome, clear and very well explained! Keep up the good work!
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.
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. 😃
Perfect explanation.
Thanks mate 🙏
thank you so much for all the effort you put into your videos, you don't know how much you've helped me!
Thankyou sooo muuuch Pedro!
I really love your explanation.
Thanks for the great video. Can you please tell which VSCode theme are you using in this video?
Palenight Theme and Material Icon Theme.
Amazing video. you made every concept easy. God bless you
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?
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 ....
Thanks for this Video.. ! Your Previous video on redux was also Good....! Btw, which theme you are using for VSCode ?
Palenight Theme and Material Icon Theme.
Thanks so much Pedro, another great tutorial!
I Really fan of your videos .... Pedro Is it all about Redux Toolkit ? Thanks for answers .....
"He's back" - Minister of magic
Might use context api
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?
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.
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?
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.
Why not use the createEntityAdapter api for crud operations? It works like magic. But it is kinda advanced, I won't lie
There's a small bug when you delete every item and then try to add a new user.
Fix:
dispatch(
addUser({
id:
userList.length !== 0 ? userList[userList.length - 1].id + 1 : 1,
})
);
Good one
Super helpful, thanks Pedro!
Thanks a billion! 🙏 Extremely useful.
Awesome tutorial. Is the state persistent in this tutorial app? If I hit refresh, will the state persist?
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
Thank you so much. I wonder why there's not timestamps in this one
Top content as always !!
Thanks! Great as always 😊
Thank you!
When you use map function the first jsx element must have unique key prop.
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👌👌
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!!
Same question
Palenight Theme and Material Icon Theme.
@@aprovado597 Palenight Theme and Material Icon Theme.
Good one bro..
Any link for full mern stack app?....
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.
awesome i love it, thank you so much for this video
Great tutorial, thanks!
Awesome video, learnt a lot
Great content great music ❤🔥❤🔥❤🔥🔥🔥
Awesome video Man
Thanks Pedro!
I used valtio for global state management and react query for server state and never looked back to redux.
TypeError: undefined is not an object (evaluating 'userList[userList.length - 1].id')
says so when i delete all the user
Thank you Pedro!
Very helpful bro.
More on redux please...
Hey pedro can u give an intro to store these items in local storage using toolkit ? Btw thnx for all the videos brother
In your reducer, just put the item in localstorage if it doesnt exist already and remove whenever you want.
@@connergoldberg ok bro will try thnx brother
You are the best pedro
Great content mentor...more Grace sir...pls redux toolkit , react and firebase.
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
Hope you have found out? You can connect with me on LinkedIn if you are still interested in knowing it
How can I store my useState hook in redux toolkit?
what is the theme you are using?
Palenight Theme and Material Icon Theme.
Hola, consulta, el tema de iconos para VSCode que estás usando , cual es ?
Electron
Thanks Pedro ❣
Thank you very much sir.
thanks was really helpfull
Great, Thanks so much :)
That’s amazing thx
great video sir❤️
"dispatch is not a function"
-this error is coming. What to do😢
Well done👌🥳
Super!! Very Cool!!!
Thanks Pedro
I love this 😍
Thanks a lot!!!!
Good job 👏 👍 👌
can you do this tutorial with recoil? 😬
thank you
Make a industry level mern project
What's your vscode theme?
Palenight Theme and Material Icon Theme.
Thanks...
Mor react redux plzz ❤️
More to come :)
@@PedroTechnologies Redux can be unnecessary overhead I wouldn't want more tbh
Where is the source code for this tutorial?
Make a simple chat app tutorial.
don't need to focus on UI too much.
We are waiting...
Hy Masha Allah
great
🔥🔥🔥
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.
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.
Awesome video +++++++++++++++++++++++++++++++
good
There are some bugs in your application
vc é brasileiro?
Theme name?
Palenight Theme and Material Icon Theme.
😍😍😍😘
Mettetela un po' di pubblicità ogni tanto...