A 50 second intro followed by 4 hours of code and instruction to help you learn about modern Redux with Redux Toolkit and RTK Query. I bookmarked all 7 chapters in the description. If you complete one lesson per day, you'll complete the full course in one week. Join my Discord server to discuss and ask questions: discord.gg/neKghyefqh
Hiya! I'm the primary Redux maintainer and creator of Redux Toolkit. Thank you for putting this video together! In fact, I see that the source code is straight from the docs "Redux Essentials" tutorial I wrote... and that's GREAT! That means it's the same examples I want people to learn from! :) I've been thinking of doing a video series based on the "Essentials" tutorial myself at some point, and I still might. (Eventually! When I have time! HAH!) But until then, this appears to be a great quick intro to Redux Toolkit and React-Redux, the way we _want_ people to learn and use them today. So Dave, thank you for taking the time to make this video!
Thank you, Mark. I noted I wanted "to give credit where credit is due" in the video series (playlist: th-cam.com/play/PL0Zuz27SZ-6M1J5I1w2-uZx36Qp6qhjKo.html) and also that I modified a few things for the tutorial like starting with a bulletin board example, connecting to the jsonplaceholder site and populating reactions it doesn't provide. I'm glad you like it, and thanks for providing a great foundation in the docs! 💯
Hey Mark. When you do the tutorial please just don't do tutorials like every other YT channel. Please stress on the terms that you have used in the documentations. Also it would be great if you walkthrough your thought process while making the docs.
@@emmanueloluwafemi7236 Context and Redux are entirely different tools that solve different problems, so that's not a good comparison. Context is a Dependency Injection tool for a single value. Redux is a tool for predictable state management outside React. Context is already built into React, whereas Redux is a separate library. So yes, they _do_ have different setup, because they're not the same thing.
@@markerikson3383 yes I know but they do the same function when you apply useReducer with useContext.. It's the same function with redux. It's faster and more efficient than redux toolkit.... Redux is to manage state and also to make the state global to other components. This is the same work with useContext and useReducer... I don't see any reason I should abandon context Api for redux toolkit yet. I'm sure you know what I mean... I'm a full stack dev
you are actually a generous man beside teaching, you also foster me to read the document and find out the way to learn another stack by myself. Thank you Dave
I paused the video just to tell you're an amazing instructor. I can't believe I watched the whole course for free! I'll definitely recommends your channel to my friends. The amount of time and effort you make this video, you're truly a godsend.
Given that I am an hour away from completing your React course(it is really nice), which I take daily from 4:30 am to 7:00 am for a month now, this Redux tutorial will be another nice tutorial to solidify my React knowledge.
Dave you're a godsend, you take from your time and make these masterful videos to teach us how to code. Other teachers should be like you. If there's anyone who contributed a lot to this world's future by raising a lot of skilled coders, it'll be you, thanks a lot! ❤️🙏
Well i simply wanted to learn Authentication in React.... and ended up watching Node 7 hours Course, React 9 Hours Course and right know learning Redux 4 hours course. Life can be surprising !!! I am so happy that I have opportunity to learn from well organized tutorials, and don't have to bother about outdated knowlage.
At 26:00, How come the function receives state as a parameter? how does redux knows that the state needs to be passed. Also, for the state, why we are getting the value of state by writing state.posts even though we are exporting reducers, not the actual value from the store. It's confusing...
Thank you Dave, I can't believe you are putting such an amazing tutorial with simplicity for free on youtube. other creators make things complicated to show that they know something which is not true but only confuse learners.
For those of us in 2024, you may need this bit of additional code for part 3 to filter out the duplicate posts from the API. Not sure what happened, but I am getting 2-4 of each posts in my request and I copied exactly from the source code. let content if (postStatus === "loading") { content = "Loading..." } else if (postStatus === "succeeded") { const orderedPosts = posts .slice() .sort((a, b) => b.date.localeCompare(a.date)) const preContent = orderedPosts.filter((val, i) => { if (i !== orderedPosts.length - 1) { return val.id !== orderedPosts[i + 1].id } return val }) content = preContent.map((post) => ( )) } else if (postStatus === "failed") { content = {error} }
You can also use Set to filter out the duplicated posts by ID, I dont know if this the better approach, Can someone explain why this duplicating is happening const uniquePosts = Array.from(new Set(posts.map((post) => post.id))).map( (id) => posts.find((post) => post.id === id) ); let content; if (postStatus === "loading") { content = Loading...; } else if (postStatus === "succeeded") { const orderedPosts = uniquePosts .slice() .sort((a, b) => b.date.localeCompare(a.date)); content = orderedPosts.map((post) => (
@@atanassolakov3289 It seems like it is because we are using react.strictMode. In strict mode everything is rendered twice to help spot errors, but its really messing this project up. I'm not sure why Dave didn't have the same problem as us though as he is also using strict mode. I'm also not sure of the best solution.
@@atanassolakov3289 Ok I just changed state.posts.concat(loadedPosts) in the postsSlice file to state.posts = loadedPosts. That way when the second array of data is retrieved it will overwrite the first array rather than being added onto the end. I am fairly new to react but I'm pretty sure this is an acceptable solution.
With the first lesson i understand how the redux works and with the second lesson i understand how to implement it in a project Thank you for the great tutorial i will keep watching
this course is really really good but i wont recommend to absolute beginners,because the guy explains things nicely but he kinda assumes that most of us already know some basic of react-redux and reduxtoolkit .This video was definitely good for me because already watched some tutorials before jumping onto this video .This video will definitely helps those guys who have some what knowledge of reduxtoolkit thanks a bunch and awesome tutorials🔥🔥🔥🔥🔥
Dave, This tutorial is perfect for beginners and your explanation is good to get understanding. The topics you are covered are most asked for job interview. Thank you I have learnt redux with this video and I just need to contribute in projects.
Wow, just finished this after i think 2 weeks cuz i was on and off. I now understand redux, redux thunk, rtk query and have a deeper understanding of react in general. Thank you very much.
As a beginner in redux, I've got complete disorientated after the first lesson. The second lesson has too much information without explanation and I expect the rest of them to be the same. After all, I appreciate the time spent doing the video, but this guide is for more advanced than beginner people.
I would advise you to get more familiar with reducers (useReducer hook) before starting this tutorial. If you are familiar with reducers then it wouldn't be too difficult for you to follow the tutorial.
One of the best coding tutorial I have every seen. Though I have already some past experience with React and Redux, the way you present and explain is superb and deepen my understanding. Thanks! :)
Just finished it right now in 4 days and I was really needing to learn redux for an application that I am creating and in the of this I am really sure I came to the right place... Congrats Sir @Dave Gray
Thank you too much Dave, there isn't much tutorials on the internet about redux toolkit, I've got troubles learning redux toolkit with typescript, specially data fetching part, could you make tutorials on that topic, thanks again for your effort!
Thank you, Adrian - this course shows various ways of fetching data, but it does not include Typescript. I'm getting enough requests that I may need to do one with TS in the future. 💯
FYI! There is an extension for the useState statement that you have to install and that is very helpful. ush I heard an advice, being a developer try to automate things as much as you can especially the repetitive tasks.
For anyone not able to get the username inside the PostAuthor component at 51:23, you might need to enter "userId: parseInt(userId)" inside of the postsSlice prepared statement.
Good day Dave Gray, what a nice redux toolkits tutorial, but I have a comment on the way majority of you expert programmers do teach programming, this is something practical, it would be better if you have an application you want to clone, and then put it aside, work with the documentation, as you are teaching, lets know the reason why you are using particular hooks, I think by that, no body will come here and feel like "oh no am not gaining anything here", because as you are writing the codes without documentation makes it a little bit difficult, because I personally feel like that, can't talk about other people....... If you are writing the code with documentation, then everybody will flow, and know the reason why you are using a particular hooks
THANKS so much for you redux tutorials , been watching alot of videos on redux and even on Udemy and your course is just way better, thanks for helping me in my career.
For those of us who struggled to find why posts are duplicating after Chapter 3 ( lesson 3) just remove the react's strict mode, it helped me cause it doesnt do the rerender i think :)
at 17:47, we could have simply given and it would only take numbers in input. If you type any letters, the textarea won't show anything. Loving this course by the way.
Thank you, Basuki! 🙏 Personal preference, but I do not like how the number inputs look with the arrows for up and down on the right when it has focus. You do mention a valid option though! Example: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
Thanks for the course. But I would have really loved this course if you dive deeper and told us why you are writing some codes. Sometimes I dont even know what a line of code is doing. But watching this video and searching the codes I dont understand in the google helped me!
Thanks a lot Dave ! I appreciate it from heart. Watching your MERN full tuts and end up here , totally worth the time. In my opinion very few have the quality to explain things with no sweat and you are one of the best.
Thanks Dave, you are an outstanding teacher, I highly recommend checking out the Redux tutorial. As someone who has experience with Redux, I found the tutorial to be an excellent resource that helped me deepen my understanding of the core concepts and best practices of Redux. One thing that I particularly liked about the tutorial is that it strikes a good balance between theory and practice. The explanations of the core Redux concepts (thorough) are excellent with examples to reinforce your learning and apply the concepts to real-world scenarios.
this tutorial took me 7 days to complete 😂, because I am practicing in parallel with the docs and chat gpt to answer to my stupid questions, so I can get the idea how the things works in deep and be confident in my knowledge
hey dave i apprecite your work you are ding great can you explain me the 37:40 why did you this postAdded: { reducer(state,action){ state.push(action.payload) }, prepare(title,content){ return{ payload:{ id : nanoid(), title, content } } } } istead of just addPost:(state,action){ state.push(action.payload) }, is there any video that you recommed or any part of this video that you would tell me listen to?
Hey Dave, thankyou for your tutorial. But I did not understand everything properly because there was lack of explanation for example what does useSelector do and all. It is just a healthy advice no criticism at all, but it was hard and had a feeling I might have to memorize everything .
Good question! We have named the slice "counter" - refer to the name property of the counterSlice.js - and therefore, we access the count state in the function passed to the useSelector hook with state.counter.count 💯
Unsure if this is an API change since the video has released, but at around 8 mins the increment, and decrement reducers should be updating state.value not state.count
I think you misunderstand the concept. You can choose what to name the property you are updating. If all state could only be named value, you could only store one thing. In this example, I chose to name the property we are updating count. Follow my example and you will see that it works.
Hello! Thank you so much for this lesson! This lesson (and others) helped me a lot on my actual school project! I'm studding to reorient professionally to frontend developper and your lessons helped a lot through this journey 🐣 Thank you so much for sharing all this knowledge ❤🙏
thank you Dave. you have clarified a confusion that I'm faced with. thank you very much. please could work with this same project and teach us unit testing.
Thank you very much Dave! Your tutorials are amazing. At 2:05:43 instead of navigating to the home page, could we navigate to the SinglePostPage for the new post? I was going to try that but realized I had no way of getting the ID of the new post that the API should return.
I think the id should be the userId we provide, i hope with that we can navigate ("posts/${userId}") . Since we provide the new id using nano id and it is temporarily stored in api
Hello Dave, thank you so much for this tutorial! It is really what I need to finish my own project. I am in the end of the chapter 3 now and have the following problem - fetch is getting called twice which is followed by getting error for having elements with same key for each element. However, if I remove strict mode, fetch is getting once as should be. Is there anyway to do it with the strict mode on?
Yes, React 18 introduced this issue. Strict Mode is only in use in dev mode as well so this is not an issue after creating a production build. That said, I have a video on how to handle the React 18 strict mode issue: th-cam.com/video/81faZzp18NM/w-d-xo.html
I just love the way you narrate and explain. Thanks a ton for all the wonderful content !!! If possible kindly do a series/comprehensive tutorial on 'styled components'. thanks again :)
@6:14 what is the point of the export const counterSlice = {...} ? Couldn't we just const counterSlice = {...} w/o exporting? We are already exporting counterSlice.reducer and destructured actions from counterSlice.actions so why do we need to export the slice as well?
Good question, Nelson! The export may not be necessary in this specific example, but it is a good habit to always use export with your slice. As the lessons progress, you will see that we can extend a slice to extra files.
The advanced part was literally overwhelming it felt like I was being bombarded left and right with so much information that it was too much to take it all in! Wish you could explain and break down each line of code a little bit more in depth. But overall, this is a great tutorial, I think I learned so much up until the "advanced" section.
Thanks! And I agree - this is complex stuff! You can review again - but I also recommend looking at the official docs linked in the description. More than one explanation can help.
@@DaveGrayTeachesCode Thanks for the reply :) Not only I referred to documents but also tapped into ChatGPT's explanations which helped me quite a bit. Can I ask a question though? In addReaction query we followed a different method using onQueryStarted function, why didn't we just use invalidatesTags instead? I tried that and it worked just fine
Thank you, Nelson! If you provide a timestamp, I can address the specific part of the video. In general, the docs may help describe the prepare function use here: redux-toolkit.js.org/api/createAction#using-prepare-callbacks-to-customize-action-contents
Such a great vid just like your others! My question is do we really have to keep the post list in the state? I saw all other vids all keep the long list in the state as well. From my prev experiences i only store data in db then on entity page we retrive the latest data from db for view or edit. Could you advise that? Thanks so much!
Hi Dave. Thank you for this great lesson. We wrote the same codes repeatedly in the editposform and addpostform components. Can we turn these into hooks?
If you can abstract it into something reusable for both, go for it! My answer to "can we" do x or y is always - give it a try! Absolutely the best way to learn! 💯
Awesome tutorial thanks! In case I missed it, can I stuff a class with array of images in to redux state? Say If I have gallery view that is pury memory based and no files on hdd. Would it be able to take dict with bytes/images?
This is not something I have done myself, but I quickly found an article to help you out: medium.com/@gabriele.cimato/on-how-to-store-an-image-in-redux-d623bcc06ca7
A 50 second intro followed by 4 hours of code and instruction to help you learn about modern Redux with Redux Toolkit and RTK Query. I bookmarked all 7 chapters in the description. If you complete one lesson per day, you'll complete the full course in one week. Join my Discord server to discuss and ask questions: discord.gg/neKghyefqh
Thank you, do you have any resources on Django React Authentication?
Hiya! I'm the primary Redux maintainer and creator of Redux Toolkit. Thank you for putting this video together! In fact, I see that the source code is straight from the docs "Redux Essentials" tutorial I wrote... and that's GREAT! That means it's the same examples I want people to learn from! :)
I've been thinking of doing a video series based on the "Essentials" tutorial myself at some point, and I still might. (Eventually! When I have time! HAH!)
But until then, this appears to be a great quick intro to Redux Toolkit and React-Redux, the way we _want_ people to learn and use them today.
So Dave, thank you for taking the time to make this video!
Thank you, Mark. I noted I wanted "to give credit where credit is due" in the video series (playlist: th-cam.com/play/PL0Zuz27SZ-6M1J5I1w2-uZx36Qp6qhjKo.html) and also that I modified a few things for the tutorial like starting with a bulletin board example, connecting to the jsonplaceholder site and populating reactions it doesn't provide. I'm glad you like it, and thanks for providing a great foundation in the docs! 💯
Hey Mark. When you do the tutorial please just don't do tutorials like every other YT channel. Please stress on the terms that you have used in the documentations. Also it would be great if you walkthrough your thought process while making the docs.
Mark.. The set up for redux toolkit is more complex than Context Api.. Frameworks should be created to make things easier than the existing ones
@@emmanueloluwafemi7236 Context and Redux are entirely different tools that solve different problems, so that's not a good comparison.
Context is a Dependency Injection tool for a single value.
Redux is a tool for predictable state management outside React.
Context is already built into React, whereas Redux is a separate library.
So yes, they _do_ have different setup, because they're not the same thing.
@@markerikson3383 yes I know but they do the same function when you apply useReducer with useContext.. It's the same function with redux. It's faster and more efficient than redux toolkit.... Redux is to manage state and also to make the state global to other components. This is the same work with useContext and useReducer... I don't see any reason I should abandon context Api for redux toolkit yet. I'm sure you know what I mean... I'm a full stack dev
I watched your playlist on redux toolkit. They are great and no room for any confusion. Thank you for your help 🙏
Thank you for the support! 🙏
you are actually a generous man beside teaching, you also foster me to read the document and find out the way to learn another stack by myself. Thank you Dave
Glad to hear that!
I paused the video just to tell you're an amazing instructor. I can't believe I watched the whole course for free! I'll definitely recommends your channel to my friends. The amount of time and effort you make this video, you're truly a godsend.
Thank you for the kind words! 🙏
Given that I am an hour away from completing your React course(it is really nice), which I take daily from 4:30 am to 7:00 am for a month now, this Redux tutorial will be another nice tutorial to solidify my React knowledge.
Thanks a lot
Thank you for the support!
57:11 sort by date
1:09:50 createAsyncThunk
1:29:00 ['array','apple','fruit'].every(Boolean)
1:31:25 redux-toolkit add unwrap()
2:55:00 RTK query -> isLoading, isSuccess, isError, error
Dave you're a godsend, you take from your time and make these masterful videos to teach us how to code. Other teachers should be like you. If there's anyone who contributed a lot to this world's future by raising a lot of skilled coders, it'll be you, thanks a lot! ❤️🙏
Thank you for the kind words, Ibrahim! 🙏
sir , I am Indian doing self study for web development, & you are the best resource that I found on internet for web dev.
Thanku very much sir 🙏🙏🙏🙏🙏
Thank you for the kind words!
Well i simply wanted to learn Authentication in React.... and ended up watching Node 7 hours Course, React 9 Hours Course and right know learning Redux 4 hours course. Life can be surprising !!!
I am so happy that I have opportunity to learn from well organized tutorials, and don't have to bother about outdated knowlage.
You're welcome! 💯
same here :D
At 26:00, How come the function receives state as a parameter? how does redux knows that the state needs to be passed.
Also, for the state, why we are getting the value of state by writing state.posts even though we are exporting reducers, not the actual value from the store.
It's confusing...
Thank you Dave, I can't believe you are putting such an amazing tutorial with simplicity for free on youtube. other creators make things complicated to show that they know something which is not true but only confuse learners.
You're welcome! 🙏
For those of us in 2024, you may need this bit of additional code for part 3 to filter out the duplicate posts from the API. Not sure what happened, but I am getting 2-4 of each posts in my request and I copied exactly from the source code.
let content
if (postStatus === "loading") {
content = "Loading..."
} else if (postStatus === "succeeded") {
const orderedPosts = posts
.slice()
.sort((a, b) => b.date.localeCompare(a.date))
const preContent = orderedPosts.filter((val, i) => {
if (i !== orderedPosts.length - 1) {
return val.id !== orderedPosts[i + 1].id
}
return val
})
content = preContent.map((post) => (
))
} else if (postStatus === "failed") {
content = {error}
}
Thank you!
You can also use Set to filter out the duplicated posts by ID, I dont know if this the better approach, Can someone explain why this duplicating is happening
const uniquePosts = Array.from(new Set(posts.map((post) => post.id))).map(
(id) => posts.find((post) => post.id === id)
);
let content;
if (postStatus === "loading") {
content = Loading...;
} else if (postStatus === "succeeded") {
const orderedPosts = uniquePosts
.slice()
.sort((a, b) => b.date.localeCompare(a.date));
content = orderedPosts.map((post) => (
));
} else if (postStatus === "failed") {
content = {postError};
}
@@atanassolakov3289 It seems like it is because we are using react.strictMode. In strict mode everything is rendered twice to help spot errors, but its really messing this project up. I'm not sure why Dave didn't have the same problem as us though as he is also using strict mode. I'm also not sure of the best solution.
@@atanassolakov3289 Ok I just changed state.posts.concat(loadedPosts) in the postsSlice file to state.posts = loadedPosts. That way when the second array of data is retrieved it will overwrite the first array rather than being added onto the end. I am fairly new to react but I'm pretty sure this is an acceptable solution.
Duplication is happening due to effects and components being rendered twice due to StrictMode, if you remove strict mode this vanishes..
With the first lesson i understand how the redux works and with the second lesson i understand how to implement it in a project Thank you for the great tutorial i will keep watching
this course is really really good but i wont recommend to absolute beginners,because the guy explains things nicely but he kinda assumes that most of us already know some basic of react-redux and reduxtoolkit .This video was definitely good for me because already watched some tutorials before jumping onto this video .This video will definitely helps those guys who have some what knowledge of reduxtoolkit
thanks a bunch and awesome tutorials🔥🔥🔥🔥🔥
This channel brings the best content there is out there. Every time I need a specific content I come here to see if there is an explanation of it.
Thank you, Gabriel! 🙏💯
Man, you are doing God's work by putting out such accessible quality content and that too for free!
Dave, This tutorial is perfect for beginners and your explanation is good to get understanding. The topics you are covered are most asked for job interview. Thank you I have learnt redux with this video and I just need to contribute in projects.
Wow, just finished this after i think 2 weeks cuz i was on and off. I now understand redux, redux thunk, rtk query and have a deeper understanding of react in general. Thank you very much.
You're welcome!
You are genius as well as kind-hearted man sir...that's why uploading very high quality vedios
As a beginner in redux, I've got complete disorientated after the first lesson. The second lesson has too much information without explanation and I expect the rest of them to be the same. After all, I appreciate the time spent doing the video, but this guide is for more advanced than beginner people.
I totally agree with that.
💯 true!!
I agree
I thought i was way less than beginner 🥲🥲
I would advise you to get more familiar with reducers (useReducer hook) before starting this tutorial. If you are familiar with reducers then it wouldn't be too difficult for you to follow the tutorial.
watched this in Jan 2024, A great course. Thank you Dave.
I am heading to zerotomastery Asap.
One of the best coding tutorial I have every seen. Though I have already some past experience with React and Redux, the way you present and explain is superb and deepen my understanding. Thanks! :)
Glad it helped!
Just finished it right now in 4 days and I was really needing to learn redux for an application that I am creating and in the of this I am really sure I came to the right place... Congrats Sir @Dave Gray
Happy to help!
When i become a decent web developer, my next mission will be to find this man and buy him a drink and a car. what a guy
Thank you too much Dave, there isn't much tutorials on the internet about redux toolkit, I've got troubles learning redux toolkit with typescript, specially data fetching part, could you make tutorials on that topic, thanks again for your effort!
Thank you, Adrian - this course shows various ways of fetching data, but it does not include Typescript. I'm getting enough requests that I may need to do one with TS in the future. 💯
yes, typescript +1
Same thing in Typescript and we have perfection. Thanks Dave!
You're welcome and thank you for the request! 💯
Your way of writing code is so elegant, I love it!
Your course is absolutely amazing 👏
Best Redux course on the internet all that is missing is the using Redux with TypeScript part.
The TS addition will make a good future video. Thanks! 💯
This along with Codevolution one is a complete package
Great video I understood every detail you taught. Thank You
Dave you are such an amazing teacher thank you for making this course available for us new devs for free i will recommand your channel for my friends
Thank you for the kind words!
FYI! There is an extension for the useState statement that you have to install and that is very helpful. ush
I heard an advice, being a developer try to automate things as much as you can especially the repetitive tasks.
I followed you Dave within entire tutorial. GJ!!! TY!!!💙💛
Thanks man. I actually had no idea where to start with learning redux until this video.
Glad I could help!
For anyone not able to get the username inside the PostAuthor component at 51:23, you might need to enter "userId: parseInt(userId)" inside of the postsSlice prepared statement.
bro i need a help can you help me..??
You have taught very well, thank you Sir!
Good day Dave Gray, what a nice redux toolkits tutorial, but I have a comment on the way majority of you expert programmers do teach programming, this is something practical, it would be better if you have an application you want to clone, and then put it aside, work with the documentation, as you are teaching, lets know the reason why you are using particular hooks, I think by that, no body will come here and feel like "oh no am not gaining anything here", because as you are writing the codes without documentation makes it a little bit difficult, because I personally feel like that, can't talk about other people....... If you are writing the code with documentation, then everybody will flow, and know the reason why you are using a particular hooks
WOW! Exactly what I needed, just on the right time! :D Thank you so much for such great content and dedication to share your knowledge! 👏
You're welcome, Eduardo! 💯
Same feeling 🥰🥰🥰🥰🥰 and thanks a lot Dave gray...
My best tutor of all time, special thanks for this wonderful video.
THANKS so much for you redux tutorials , been watching alot of videos on redux and even on Udemy and your course is just way better, thanks for helping me in my career.
You're welcome, Douha! 🙏
You know me! Liking the video before even starting to watch it because I know the content will be great as always
I appreciate that!
Best ever tutorial on redux toolkit explanation is 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥. Thanks Dave for a such effort
For those of us who struggled to find why posts are duplicating after Chapter 3 ( lesson 3) just remove the react's strict mode, it helped me cause it doesnt do the rerender i think :)
at 17:47, we could have simply given and it would only take numbers in input. If you type any letters, the textarea won't show anything.
Loving this course by the way.
Thank you, Basuki! 🙏 Personal preference, but I do not like how the number inputs look with the arrows for up and down on the right when it has focus. You do mention a valid option though! Example: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
Thanks for the course. But I would have really loved this course if you dive deeper and told us why you are writing some codes. Sometimes I dont even know what a line of code is doing. But watching this video and searching the codes I dont understand in the google helped me!
Yes, I'm glad you searched. Combining this course with the official docs should help, too.
Thank you very much for your kindness .... no one teach better than you with every step explanationn thank you very much
You are welcome!
Thank you Dave! You have no idea how helpful this series has been
You're welcome! 💯🚀
thank you for making this course!
it was great!
the best React tutorial I've seen, best practices and clean architecture. I am impressed
Thank you for the kind words!
Thanks a lot Dave ! I appreciate it from heart. Watching your MERN full tuts and end up here , totally worth the time. In my opinion very few have the quality to explain things with no sweat and you are one of the best.
Thank you for the kind words!
Thanks Dave, you are an outstanding teacher, I highly recommend checking out the Redux tutorial. As someone who has experience with Redux, I found the tutorial to be an excellent resource that helped me deepen my understanding of the core concepts and best practices of Redux. One thing that I particularly liked about the tutorial is that it strikes a good balance between theory and practice. The explanations of the core Redux concepts (thorough) are excellent with examples to reinforce your learning and apply the concepts to real-world scenarios.
Thank you!
Hey Dave, I came across this video after lots of videos and gotta say this is the best one I've watched.
Thanks for such a wonderful video.
Glad it was helpful!
Your delivery is so brilliant, thank you for this course!
You're very welcome!
this tutorial took me 7 days to complete 😂, because I am practicing in parallel with the docs and chat gpt to answer to my stupid questions, so I can get the idea how the things works in deep and be confident in my knowledge
Thank you Dave for providing high quality content. You're a wonderful instructor.
Thank you for the kind words, Ali! 🙏
hey dave i apprecite your work you are ding great can you explain me the 37:40 why did you this postAdded: {
reducer(state,action){
state.push(action.payload)
},
prepare(title,content){
return{
payload:{
id : nanoid(),
title,
content
}
}
}
}
istead of just
addPost:(state,action){
state.push(action.payload)
}, is there any video that you recommed or any part of this video that you would tell me listen to?
Hey Dave, thankyou for your tutorial. But I did not understand everything properly because there was lack of explanation for example what does useSelector do and all.
It is just a healthy advice no criticism at all, but it was hard and had a feeling I might have to memorize everything .
hi dave, 15:29 line 7th why are you using state.counter.count? state.count gives the value right?
Good question! We have named the slice "counter" - refer to the name property of the counterSlice.js - and therefore, we access the count state in the function passed to the useSelector hook with state.counter.count 💯
@@DaveGrayTeachesCode thanks dave
Unsure if this is an API change since the video has released, but at around 8 mins the increment, and decrement reducers should be updating state.value not state.count
I think you misunderstand the concept. You can choose what to name the property you are updating. If all state could only be named value, you could only store one thing. In this example, I chose to name the property we are updating count. Follow my example and you will see that it works.
Hey thank you for this tutorial. I like how you go over each line of the file. Also your explanation is perfect, especially at chapter 5.
Glad it was helpful!
Thanks Dave for great lecture and excellent examples that explain step by step redux and redux toolkit from zero to hero
Thank you for the free course, I got full help and I finished it
Special thanks for that "Performance" section, pretty useful
Cheers!
Glad you liked it!
Yo, Thanks for your efforts, I have a little question, There is any difference between using the redux toolkit with react vs next?
Yes, Next.js is server-side so there are some considerations to be made.
Great work. Nice that you combine all parts in one video)
Thank you! 💯
It's just the best Redux toolkit tutorial ever, awesome!!!!, thanks a lot.
You're welcome!
This will be a great resource for many developers during this year ... Great Dave 👏🏻
Thank you! 🙏💯
@@DaveGrayTeachesCode Hey Dave i know redux but i only need the way to use redux in class based components have you deal this
Dave, you're a good teacher and thank you for your courses.
I just wish you could reduce your speed a bit. Your courses are helping me a lot
You're welcome, Emmanuel!
Dave i believe you are a master class level >>> happy to follow you
Hello! Thank you so much for this lesson! This lesson (and others) helped me a lot on my actual school project! I'm studding to reorient professionally to frontend developper and your lessons helped a lot through this journey 🐣 Thank you so much for sharing all this knowledge ❤🙏
You're welcome!
Wow! Again, thank you for this! You're the best teacher I've ever had.
Thank you for the kind words, Peter! 🙏🙏
1:19:16 my postExcerpt comp not showing up , check slice and comp and nothing is wrong , is anyone having this same problem?
By far, the best redux tutorial. Thanks for sharing!
Thank you for the kind words! 🙏
thank you Dave. you have clarified a confusion that I'm faced with. thank you very much. please could work with this same project and teach us unit testing.
You're welcome and thank you for the request! 💯
this course covers all the things i need to know thanks dave . ☮ from India
You're welcome! And hello 👋 to India!
I needed to implement this on my projects, thank you for this wonderful intro to Redux.
You're very welcome!
a new sub here. love to find this channel.
Welcome aboard! 💯🚀
@@DaveGrayTeachesCode Thanks Dave
thank you so much , ive been waiting for someone to expalin it in a good way and here you did , thank you Dave , its really so helpful
You're welcome, Sam! 💯
first 20 minutes was all i need :)
Thank you Dave, you are such an amazing tutor with good contents, you have really lifted us the jnr Devs in good ways, keep it up, Nigeria ....
Thank you, Gerald! And hello to Nigeria! 👋
Thank you very much Dave! Your tutorials are amazing. At 2:05:43 instead of navigating to the home page, could we navigate to the SinglePostPage for the new post? I was going to try that but realized I had no way of getting the ID of the new post that the API should return.
I think the id should be the userId we provide, i hope with that we can navigate ("posts/${userId}") . Since we provide the new id using nano id and it is temporarily stored in api
Hello Dave, thank you so much for this tutorial! It is really what I need to finish my own project.
I am in the end of the chapter 3 now and have the following problem - fetch is getting called twice which is followed by getting error for having elements with same key for each element. However, if I remove strict mode, fetch is getting once as should be. Is there anyway to do it with the strict mode on?
Yes, React 18 introduced this issue. Strict Mode is only in use in dev mode as well so this is not an issue after creating a production build. That said, I have a video on how to handle the React 18 strict mode issue: th-cam.com/video/81faZzp18NM/w-d-xo.html
@@DaveGrayTeachesCode I’ll check it, thank you!
This issue definitely upgraded my debugging skills I have to say :)
@@DaveGrayTeachesCodethank you sir.
Your channel is like a treasure for developer 🔥
Thank you for the kind words, Yeasin! 💯
I just love the way you narrate and explain. Thanks a ton for all the wonderful content !!! If possible kindly do a series/comprehensive tutorial on 'styled components'. thanks again :)
You're welcome, Chethan! 🙏 And thank you for the kind words and request!
@6:14 what is the point of the export const counterSlice = {...} ?
Couldn't we just const counterSlice = {...} w/o exporting?
We are already exporting counterSlice.reducer and destructured actions from counterSlice.actions so why do we need to export the slice as well?
Good question, Nelson! The export may not be necessary in this specific example, but it is a good habit to always use export with your slice. As the lessons progress, you will see that we can extend a slice to extra files.
The advanced part was literally overwhelming it felt like I was being bombarded left and right with so much information that it was too much to take it all in! Wish you could explain and break down each line of code a little bit more in depth. But overall, this is a great tutorial, I think I learned so much up until the "advanced" section.
Thanks! And I agree - this is complex stuff! You can review again - but I also recommend looking at the official docs linked in the description. More than one explanation can help.
@@DaveGrayTeachesCode Thanks for the reply :) Not only I referred to documents but also tapped into ChatGPT's explanations which helped me quite a bit. Can I ask a question though? In addReaction query we followed a different method using onQueryStarted function, why didn't we just use invalidatesTags instead? I tried that and it worked just fine
@@rnytpl The reactions were an example of optimistic updates.
I've created separate object "reactions", to not repeat myself, and there was no problem with wrong reactions list, in my case😁
Dave
Cmon
Stop reading my mind
😅😅😅😅😅😅
This is amazing
Thank you, Richard! 🙏🙏
Great tutorial so far!
When should we use the prepare callback in general... I'm having a little trouble understanding when that's necessary.
Thank you, Nelson! If you provide a timestamp, I can address the specific part of the video. In general, the docs may help describe the prepare function use here: redux-toolkit.js.org/api/createAction#using-prepare-callbacks-to-customize-action-contents
I can surely say that you are the best. Guru, my teacher
Such a great vid just like your others! My question is do we really have to keep the post list in the state? I saw all other vids all keep the long list in the state as well. From my prev experiences i only store data in db then on entity page we retrive the latest data from db for view or edit. Could you advise that? Thanks so much!
Different approaches do exist and can work. At the time this tutorial was created, it followed the official docs project.
Thank you sir for fast reply!
Hi Dave. Thank you for this great lesson. We wrote the same codes repeatedly in the editposform and addpostform components. Can we turn these into hooks?
If you can abstract it into something reusable for both, go for it! My answer to "can we" do x or y is always - give it a try! Absolutely the best way to learn! 💯
Wow this is how some concept should be taught...... An awesome Hand-On experience... Thanks @DaveGray
You're welcome! 💯
Thank you Dave!
Waiting for Next js and Strapi full course
Thank you for the requests! 🙏
Thanks for this tutorial Dave. You are a very important person.
Glad it was helpful!
Thanks Dave, such a wonderful videos' is there any typescript version available ?
Not right now, but I have read they are updating the official docs to show TS throughout. That will be good!
awesome video on Redux! one of the best ive seen. killer content as always Dave.
Thank you! 💯
Awesome tutorial thanks!
In case I missed it, can I stuff a class with array of images in to redux state? Say If I have gallery view that is pury memory based and no files on hdd. Would it be able to take dict with bytes/images?
This is not something I have done myself, but I quickly found an article to help you out: medium.com/@gabriele.cimato/on-how-to-store-an-image-in-redux-d623bcc06ca7