ReactJS Course [14] - Redux Toolkit Tutorial
ฝัง
- เผยแพร่เมื่อ 21 ก.ค. 2024
- React Beginner to Advanced Course 2022! In this course I will be going over everything you need to know to go from a complete beginner in react, to being able to create big projects on your own.
Course Code/Exercises: github.com/machadop1407/React...
Course Discord: / discord
🚀 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
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
* Ep 14 - Markers
00:00 | Intro
01:02 | Project Introduction
02:02 | Package Installation
02:39 | What is a Store?
04:07 | Store Configuration
05:30 | Provider in Redux
07:01 | Creating Reducers for the Store
07:27 | What is a Slice?
08:52 | Creating the Slice
15:29 | Configuring the Login Page
24:22 | Typescript In Redux
Tags:
- ReactJS Tutorial
- ReactJS Course
- React Course
#reactjs #course - วิทยาศาสตร์และเทคโนโลยี
![ReactJS Course [15] - Firebase Social Media Project (Part. 1) | Authentication](http://i.ytimg.com/vi/jUBc7K9XCcU/mqdefault.jpg)
![ReactJS Course [15] - Firebase Social Media Project (Part. 1) | Authentication](/img/tr.png)
Thanks to you, now I become React native developer. I'm going to work tomorrow.
Thanks, one of the best Redux Toolkit explanations you can find👍
So I have obtained recruitment project, deadline 31 march, use React, Redux Toolkit(I have newer used it but I know context API so here I go) and testing library. React Front position, wish me luck!
Good luck! You got this
This course is going crazy
Thank you!! I hope u mean cray in a good way hahaha
Guess I'm not the only one
@@PedroTechnologies This redux is not good. Down to my 2 brain cells trying to wrap my head around it.
Only tutorial i could understand and apply to my project. Thank you and respect for not using counter as an example ❤
Tank you Man you make it really clear
Hi Pedro, great work!
I have one question. Is there a particular reason why you used type assertion (as UserState) instead of type annotation ( : UserState) on timestamp 27:20 ?
Thanks!🦾
Great job!💪 Can You show us how to work with ESlint/Prettier in this series?🙏
Hi Pedro, your tutorials is very helpful.
In Login component while getting name from redux store we have not defined the type for state for timebeing it was given any. Should we just we just give a string ?
Thank You, very good job 💪
It is a completely new concept to me, so I needed to rewatch it to kinda get it. This topic was hard, frankly, and I don't feel I can just use my knowledge. Will try watching your dedicated redux video. Otherwise a very fun and enriching course. Thank you from the bottom of my heart!
same feeling
Same😂
Its redux, its very hard for experienced devs to, dont worry about it, it will come with a lot of practice.
@@eshw23 Same bro. I have watched it 2 or 3 times now. Building a sketch on how it builds up step by step. That helps. Then would recreate it while explaining it to myself. Then build a similar project for myself using the concept
same
Bro keep continuing this kind of tutorial like basic to advance. All my knowledge in web dev comes from your video and I love it so much. Next tutorial make a node js and express tutorial basic to advance like this vid. Good job bro my classmates keep watching your vid
great video
Good video! Small tip: You can click anywhere in any line then press Alt + Shift + ArrowDown to copy that line down, no need to copy paste :)
In my keyboard I needed use 4 buttons.. alt, shift, s AS arrow down button, function key for activate arrow key.. but I am now used to it.
I use Custom key For Ctrl+D Its a lot convenient rather than that annoying Default set key.
Wow, This course going awesome ❤
❤️
Thank you so much Pedro!
hi pedro thank you for your course
what course in your channel should i take after i finish this playlist course to be more advanced in react
thanks that was great, just what I wanted
❤❤❤
Superb. Thank you very much sir.
Hey Pedro! I wanna ask something that is redux being used further in the final project of this playlist? Cause I'm having a bit problem in understanding it...if it's necessary so i will focus on redux for a while.
Great JOB!
Awesome!
Been following you since day one of coding and I must say you’ve helped me get far and past imposter syndrome. First I have is, if I payed attention, I see you have only the store.ts file for redux. Is this correct? Second question is, so do we just create multiple slice functions, forgive me if that’s the incorrect vocab, for whatever we need to have flow with redux?
Very useful tutorial thank you
The entire course is really amazing, but am I the only one who is having issues understanding Redux :)
Same bro 😢
Thanks Pedro! I liked how you explained everything so clearly. I haven't worked with React in a long time so this was a big help. You've earned yourself a new subscriber :) Anyway, back to studying! So many new things to learn!
Great course
Please after this, teach us how to work with AsyncThunk with redux toolkit, I found so many tutorial out there but it's so hard to understand the concept, trust me I'd massively appreciate for that 🙏
Im making an individual video for that!! The course will end with a project and a video on testing!
Hello , PedroTech. Ty for you great work.
Could you help me with one problem? I can't figure out why did you use word "as" to assign interface for initialValue of slicer. What's the point and what is the rule? I can't find related info in documentation.
you are amazing thank you for this awesome video
It is worth mentioning that when you write your reducers logic and update state you do it by directly mutating it.
As we know that practice is strictly forbidden in React, but Redux uses a library called Immer under the hood to make it possible.
Could you give an exmaple of the correct way to mutate the state? I'm new in react jeje
Muito bem explicado!
Hey Pedro do we have to know redux ?
To understand redux/toookit
13:00 would'nt in reducer return { ...state, changeProperty } would be better for immutablity.
Thank You.
Nice video bro🙂
Hello Pedro, thank you for giving the best courses ever !
Everything is clear and well explained !
I have a question, I have an error when I am trying to add a type "PayloadAction" for the action in the store
It seems like "PayloadAction" can't be found.
Do you, by any chance, know how to solve this ?
Thanks !
Questions can come in⬆️
Also had the sae issue.
This is absolutely the best video about RTK on TH-cam. I like the way he tackles the problem where in Redux you have multiple concepts that depend on each other and you sort of need to learn them all at once. Most YT tutorials fail to be good because of this issue. Here however Pedro nicely goes just as far as needed with one concept then jumps to another, and when you follow it sort of always makes sense what he is doing. +100
anyone facing Cannot read properties of undefined (reading 'value') issue?
How to sustain the data in the state if somebody refreshes the page?
Use localStorage for persistence.
In the login reducer function, you can do something like this, localStorage.setItem('user', JSON.stringify(state.value.user))
In order to ensure that it can be received before the browser loads, you can do something like this in the initialState,
const receivedUser = localStorage.getItem('user');
{
value: {
user: receivedUser ? receivedUser : ""
}
}
In order to ensure that you can still logout, you can add the following to the logout reducer,
localStorage.removeItem('user') //This removes the user item from the localStorage module.
Pedro, one more comment: for me it seems to be more difficult to use redux toolkid, create context much more understandable and easy to use.
How do u think am i wrong about it?
This is a common thought! Redux is ugly and we all agree that context api looks better. Thing is, whenever a state changes in a context provider, all the components using the context rerenders. So for large apps, just the context api isnt enough. But for beginners it is!
@@PedroTechnologies thanx, Pedro! Good Luck to you, and all your family!
If you had covered data normalization, that would've been super
cool
This is really new to me and I am in a foggy condition. I don't have ant idea about it. I am a little bit disappointed of myself
Hi Pedro - One small tip for you. I would be really nice to have "starter files" so that I can follow what you are doing from the same point as you are in the start of the video. Instead of having to go though all the files and (sometimes guess) what has to be deleted.
TLDR: Starter files would be awesome so it's easier to follow your video - Thanks.
Was thinking the same thing. Other courses I've done provide that. I was sometimes tempted to grab the files to make it easier to do the assignments, but I didn't want to accidentally see the solution.
It ain't that much. Don't be lazy man
Can you tell us what the project is going to be :)
A small social media website! I believe is the best kind of project to teach the fundamentals. EP1 coming out tomorrow!!
First❤
Please do redux toolkit query in next one
Im doing an individual video on that!
caan u make graphQL with React in this series!
+1
I have a graphql course already which includes integration with React!! I would recommend watching that one right after this series 😁
That's where things get very complicated...
What is happening>>>>>?????
This one was kinda confusing
Its tough. I didn't get single thing.
lmao same dude 😭
Tough episode...
deus abençoe
OMG it's the most complicated video on the whole course... This topic needs slower explanation🤔
Good news is, you can watch it many times!
cool