Part 6 of The MERN Stack Project Series - This video focuses on the building the React app for the frontend of our MERN Stack. We will set up Redux and RTK Query in this video. This tutorial is not for beginners. If you are a beginner, check out my full courses all in one playlist here: ruclips.net/p/PL0Zuz27SZ-6M1Uopt6_VL3gf3cpMnwavm
@jabin v Yes, I do cover that as this series continues. The default duration to unsub is 60 seconds. We can set keepUnusedDataFor to change that setting in the slice. Keep going and you will see how I keep the notes and users subscribed and available as needed.
What an in-depth teaching of a complex subject like RTK with all its intricacies!!! Can't believe you are doing this all for free! There are many redux videos and none of them is as advanced as yours. God bless you, Dave.
I can't express how grateful I am that you created this awesome series covering stuff that almost all other instructors miss out, and is SO important when it comes to holding your own in a dev job. Could you clarify one thing, Is the implementation of "ValidateStatus" correct? Typescript was complaining, so I checked the docs and it looks like it should be set as an option in the "query". 🤷🏾♂
Hi Steve, I think you are asking about the query option validateStatus. Let me know if I'm mistaken. The docs touch on it here: redux-toolkit.js.org/rtk-query/api/fetchBaseQuery#handling-non-standard-response-status-codes
@@DaveGrayTeachesCode Yes, that is what I'm referring to. You've implemented it differently and I was wondering it was deliberate as the type definitions say that "validateStatus doesn't exist there? 🤷🏾♂
@@stevereid636 I just checked the link I provided, and I'm not sure what I have implemented differently? It is a property of the builder.query object. The example of validateStatus and my code look the same to me?
@@DaveGrayTeachesCode In the docs, it says "validateStatus" belongs in the "query" property. In your code "query" just returning the url string? But it's no biggie really, I was just trying to gain a better understanding.
@@stevereid636 I see! Good catch! This is honestly something I missed and will revisit in the "refactor" phase before deployment! I will likely simply remove validateStatus as our REST API does provide standard responses.
I was racing through this project until I got to this part about configuring the Redux store. It looks like I've missed studying the final three chapters of your React Redux course, Dave! Back to the Blog project for me 😭
I love the content, very good how everything is being taught, only thing i will say is that since this episode i am kinda discouraged to continue watching cause its becoming like every other tutorial, "let me paste this here" "let me paste this there" etc etc, i understand its for time saving and that we can find your code on github, but for interactive experience its terrible, the initial way of up until this lesson was absolutely perfect
Hi Dave, been watching your videos for quite some time, you are the best tutor in web dev that I could found on youtube. Thanks for all the great tutorial. Also, will you consider teaching typescript at any time soon?
Hi Dave, I am huge fan of your work . If possible do consider making tutorial on Advanced Mongoose/Mongo for insane amount of data for eg (RUclips, Insta, etc). Waiting patiently for same.. fingers crossed :).. Thanks again for the content so far. Will surely buy you a coffee ☕
Hey , just wanted to say i'm really enjoying the series so far but i am curios why do you still choose to use Redux for state management over the React hooks approach which seems to be more common practice now ? is it just preference at this point or performance or something else ? would love to hear your thoughts
Hi Kev - yes, it will. Earlier in the series I mention that the goal here is to get the app functioning and then apply the login and protected routes. We are very near to that point of the series now! 🚀
I followed your Redux and RTK tutorial right when you suggested it here and it definitely helped! Something I think I missed there and here...when setting the tags, what does 'LIST' do? Is that an inherent option that tells RTK to do something? If so, is there a reference list somewhere of other options?
help . . . how to create new note with postman ? i m trying { "user":"__userId__", "title":"hello","text":"this is hello" } . sending request taking a really long time . other methods are working fine.
When I saw RTK Query I was like surprised how Dave gray dive quickly into using the approach. Nice one Dave but would have preferred Redux and Redux toolkit without RTK Query. Anyways I have already seen your video on RTK Query. Just wondering how others who are just getting to know Redux and Redux Toolkit will take in this new concept of RTK Query.
Hi Kelvin - I assume by Redux Toolkit with RTK Query, you prefer creating async thunks to make the API requests. RTK Query is part of Redux Toolkit now, and I see it as providing a separate API layer which is a good thing. Of course, you can get by without it if you want to.
@@therealdevopsintern but you would be missing the point.. using RTK query on this project allows the app to 'refresh/update' the content of certain areas once there has been a change in them.. thats one of the advanced things RTK query does for us without having to code it.. that way the user won't have to refresh the page to get the most updated content..
Please compare to my source code at the course resources link in the description. My username data does not hold open or completed. That is a separate field.
Sir, RTK query is difficult to write. Is there any big benifit to use it in place of axios data fetching . Axios is more time saving and easy to write.which you like most?
Axios is used only as a fetch replacement. RTK Query is more than that. It caches data and is used for state management. That is needed in this project.
I would need to review the code to remember, but you can answer this quickly by checking the Note schema to see if a Note has a userId property and a username property.
hey dave...your videos have been a great help to me,but my backend and frontend localhost can't work together,i have to stop one for the other one to respond
how much can this affect because nothing is showing when i open my notelist also in my frontend,does the memory also affect that process too?@@DaveGrayTeachesCode
Yes, this is because our data is normalized with the entity adapter. You can check my source code at the link in the description to see how I did it. You grab the data by using a selector in the note component.
For people having the same issue: If you are trying to create a new note and Postman just hangs: It is because mongoose-sequence is no longer supported, and doesn't work with mongoose 7+. Replace mongoose 7+ with mongoose 6.12.0 by entering "npm install mongoose@6.12.0" Then make sure that your package.json & package-lock.json say "mongoose": "^6.12.0"
That number is not a count of my VS Code extensions. It is the number of file changes for git. In the course resources, there is a section that shows several of the VS Code extensions I frequently use. 🚀
@@DaveGrayTeachesCode Number of files change was 48 that is different. I am talking about extension part. Just curious to know useful extension which can boost the productivity. Just asked out of curiosity. Feel free to share else ignore.
HI Dave - I've followed your course and have been creating MERN stack applications of my own. I keep having bugs though with the feature slices, specifically with the selectors created by the created adapters with getSelectors. For example I have a feature called Areas and useGetAreasQuery works fine. But selectAllAreas doesn't work. I have another feature Plantings but selectPlantingById doesn't work. Is there a guide to debugging these? Are there common issues that trip people up? I'm not seeing error messages, just not getting data returned.
There is some good documentation on the official site: redux-toolkit.js.org/ ...that said, I see you are not all the way through this series. By the end, I do a refactor to only use the RTK Query hooks.
@@DaveGrayTeachesCode yes it's true. I got about up to the JWT part - figured I'd tackle that once I had the "slice" queries and selectors part down better. Also gonna review your other series on the reduxjs toolkit with react - see if that helps. Thx
Hi Dave. I have a issue which is slightly confusing me. While creating a note using postman, the postman just gets stuck at loading. But this happens when I use mongoose version 7.0.3. But when I downgrade it to 6.0.5, the one that you have used in the course, it works fine. If possible , can you provide an alternate solution? I searched a lot for the solution, but couldnt find it.
In my Discord, some devs have noted that the dependency mongoose-sequence does not work with Mongoose 7. You discovered the fix. By rolling back Mongoose to v6, it works together.
Hi Dave, I am trying to post a note in Postman, but the error message is passing back 'all fields required'. I have created a raw JSON with user (with id from created user) title, text, and completed fields. What am I missing? TIA Sai.
I can only guess about what is different in your code. You can view my source code in the course resources to compare. Pay special attention to the backend endpoint controller that expects to get specifically named fields and returns that error when it does not. Insure your frontend code matches those specific data names.
@@DaveGrayTeachesCode Thank you Dave! Was not a coding error. I did not change the tag from 'text' to 'json' in Postman. All working correctly now. Thank you for all your tremendous content!
Hello. First of all, thank you very much Sir Dave Gray. You're awesome teacher. I got an error during rewrite your code. The error is: { "message": "Cast to ObjectId failed for value \"64c2b9795b2d842b5b692999\ \" (type string) at path \"_id\" for model \"User\"" } Anyone help me, please? Thank in advance for any helping. Happy coding.
I'm trying to create a note by sending { "user": "645bxxxxxxxxxxxxxxxx188d", "title": "title", "text": "description" } to /notes but postman is stuck at "Sending request..." and at this line of code: const note = await Note.create({ user, title, text }) I checked the code is almost the same as Dave's so I suppose is there a different way I should send the request? I have tried a few things but can't seem to get through.
@@DaveGrayTeachesCode There is no error in the log files or console. Commenting out this piece of code is making it work: noteSchema.plugin(AutoIncrement, { inc_field: 'ticket', id: 'ticketNums', start_seq: 500 }) but I shouldn't?
@@muhammadaiman8772 @tanishqa-sv Kindly check your package.json, If the mongoose version is > 7.x.x then one quick solution would be to downgrade the mongoose version to ^6.x.x You can run the below steps:- 1. npm uninstall mongoose 2. npm i mongoose@^6.5.0 (This is the version used in Dave's package.json) It will work with this, however, this is a quick workaround, Would need to dig into why it isn't working with latest version, will give an update on it later.
Hi! I cover Mongoose for this project in lessons 3 & 4. I cover it in more detail in my Node.js course listed as a pre-requisite in the video description, too. 🚀
Thanks for the great tutorial! 7:30 const initialState = usersAdapter.getInitialState(). I notice we don't need to provide any initial state. Is that because we are using default values for everything including isLoading etc?
The initial state in this example at 7:30 comes from the entity adapter which is referred to as usersAdapter. You can see just above that we set it to an empty object at first. After we fetch data, the object will hold an ids array and an entities array.
Guys, how can we select value according once the state value is changed in useGetUsersQuery(‘stateValue’) and updated accordingly the usersApuiSlice.endpoints.getUsers.select(“valueWillChangeIfStateUpdate”) Because I’m passing query in the useGetUsersQuery(‘valueWillChange’) If the select() is empty or hardcore value that cannot retrieve the correct cached value from the redux store once the state is updated
There is a refactor lesson later in this series that switches to a full implementation of RTK Query. My suggestion is to keep going with the project as-is and you will see how it all comes together.
Part 6 of The MERN Stack Project Series - This video focuses on the building the React app for the frontend of our MERN Stack. We will set up Redux and RTK Query in this video. This tutorial is not for beginners. If you are a beginner, check out my full courses all in one playlist here: ruclips.net/p/PL0Zuz27SZ-6M1Uopt6_VL3gf3cpMnwavm
@jabin v Yes, I do cover that as this series continues. The default duration to unsub is 60 seconds. We can set keepUnusedDataFor to change that setting in the slice. Keep going and you will see how I keep the notes and users subscribed and available as needed.
What an in-depth teaching of a complex subject like RTK with all its intricacies!!! Can't believe you are doing this all for free! There are many redux videos and none of them is as advanced as yours. God bless you, Dave.
Thank you for the kind words!
OMG! 🤯 "Multiple cursor case preserve" has changed my life. Thank you so much! 🙏🏾
Glad it was helpful! It changed mine when I found it, too! 💯
I am surprised that you are doing this for free. Yes, some people has deep knowledge but everyone doesn't possess the teaching style.
Thank you for the kind words 🙏
I can't express how grateful I am that you created this awesome series covering stuff that almost all other instructors miss out, and is SO important when it comes to holding your own in a dev job.
Could you clarify one thing, Is the implementation of "ValidateStatus" correct? Typescript was complaining, so I checked the docs and it looks like it should be set as an option in the "query". 🤷🏾♂
Hi Steve, I think you are asking about the query option validateStatus. Let me know if I'm mistaken. The docs touch on it here: redux-toolkit.js.org/rtk-query/api/fetchBaseQuery#handling-non-standard-response-status-codes
@@DaveGrayTeachesCode Yes, that is what I'm referring to. You've implemented it differently and I was wondering it was deliberate as the type definitions say that "validateStatus doesn't exist there? 🤷🏾♂
@@stevereid636 I just checked the link I provided, and I'm not sure what I have implemented differently? It is a property of the builder.query object. The example of validateStatus and my code look the same to me?
@@DaveGrayTeachesCode In the docs, it says "validateStatus" belongs in the "query" property. In your code "query" just returning the url string? But it's no biggie really, I was just trying to gain a better understanding.
@@stevereid636 I see! Good catch! This is honestly something I missed and will revisit in the "refactor" phase before deployment! I will likely simply remove validateStatus as our REST API does provide standard responses.
I was racing through this project until I got to this part about configuring the Redux store. It looks like I've missed studying the final three chapters of your React Redux course, Dave! Back to the Blog project for me 😭
I know you'll get it! Keep making progress! 💯
same here 😂
I love the content, very good how everything is being taught, only thing i will say is that since this episode i am kinda discouraged to continue watching cause its becoming like every other tutorial, "let me paste this here" "let me paste this there" etc etc, i understand its for time saving and that we can find your code on github, but for interactive experience its terrible, the initial way of up until this lesson was absolutely perfect
Depends who you ask as I have also received replies that they like this better. I'll never make everyone happy. Enjoy!
Hi Dave, been watching your videos for quite some time, you are the best tutor in web dev that I could found on youtube. Thanks for all the great tutorial. Also, will you consider teaching typescript at any time soon?
Thank you for the kind words, David! 🙏 Yes, a Typescript series is coming very soon! 💯
Hi Dave, I am huge fan of your work . If possible do consider making tutorial on Advanced Mongoose/Mongo for insane amount of data for eg (RUclips, Insta, etc). Waiting patiently for same.. fingers crossed :).. Thanks again for the content so far. Will surely buy you a coffee ☕
Thank you, Ameya! I appreciate your request, too!
Your stuff is too good. Thanx for the content. It's exactly what I wanted.
Glad to hear it!
Your tutorials are really wholesome. Thanks SIR 🙏
Thank you, Siddiq! 💯
You are excellent teacher!!!!
Hey , just wanted to say i'm really enjoying the series so far but i am curios why do you still choose to use Redux for state management over the React hooks approach which seems to be more common practice now ? is it just preference at this point or performance or something else ? would love to hear your thoughts
good day mr.dave...is it a must that the react(frontend)needs the backend to function properly
Yes, it is.
Hi Dave thanks again for a great video, will this series or a future tutorial cover how the auth process can be integrated with RTK query?
Hi Kev - yes, it will. Earlier in the series I mention that the goal here is to get the app functioning and then apply the login and protected routes. We are very near to that point of the series now! 🚀
I followed your Redux and RTK tutorial right when you suggested it here and it definitely helped! Something I think I missed there and here...when setting the tags, what does 'LIST' do? Is that an inherent option that tells RTK to do something? If so, is there a reference list somewhere of other options?
You define LIST so you can invalidate the complete list with it.
help . . . how to create new note with postman ? i m trying { "user":"__userId__", "title":"hello","text":"this is hello" } . sending request taking a really long time . other methods are working fine.
i commented noteSchema.plugin(AutoIncrement and it working fine. ????🤷♀🤷♀
Thank you for making it so easy to follow along. Better than my professor. Could you make Java tutorials ?
Thank you, Vic! No immediate plans to cover Java here, but I won't say never.
When I saw RTK Query I was like surprised how Dave gray dive quickly into using the approach. Nice one Dave but would have preferred Redux and Redux toolkit without RTK Query. Anyways I have already seen your video on RTK Query.
Just wondering how others who are just getting to know Redux and Redux Toolkit will take in this new concept of RTK Query.
Hi Kelvin - I assume by Redux Toolkit with RTK Query, you prefer creating async thunks to make the API requests. RTK Query is part of Redux Toolkit now, and I see it as providing a separate API layer which is a good thing. Of course, you can get by without it if you want to.
Exactly, you have said it all... I'm using async thunk at the moment to rewrite the project
@@therealdevopsintern but you would be missing the point.. using RTK query on this project allows the app to 'refresh/update' the content of certain areas once there has been a change in them.. thats one of the advanced things RTK query does for us without having to code it.. that way the user won't have to refresh the page to get the most updated content..
How did you assign the notes ?
so.. at the end of the video, why the username says Open or Completed? shouldn't that be the status ?
Please compare to my source code at the course resources link in the description. My username data does not hold open or completed. That is a separate field.
yea, its a typo on the NotesList.js on line 32, on the JSX table head.. should be Status..
Dear Sir, Love you from Bangladesh
Thank you, Mohammad and hello to Bangladesh! 👋
Sir,
RTK query is difficult to write. Is there any big benifit to use it in place of axios data fetching . Axios is more time saving and easy to write.which you like most?
Axios is used only as a fetch replacement. RTK Query is more than that. It caches data and is used for state management. That is needed in this project.
@@DaveGrayTeachesCode Thank you for your reply ❤
Hi Dave, amazing classes! One question... does just using the 'userid' referenced in Notes collections allow using 'note.username'?
I would need to review the code to remember, but you can answer this quickly by checking the Note schema to see if a Note has a userId property and a username property.
This stumped me as well I checked his repo and he adds code to the getAllUsers controller to add the username to the returned JSON.
hey dave...your videos have been a great help to me,but my backend and frontend localhost can't work together,i have to stop one for the other one to respond
My only guess is that your computer may be running out of memory for your dev environment?
how much can this affect because nothing is showing when i open my notelist also in my frontend,does the memory also affect that process too?@@DaveGrayTeachesCode
why my grid is empty and it is not showing any data can anyone please say
Can you do a tutorial on PDF generation using node js? Or is there any library which you can suggest? Thanks
Thanks for the request! A quick search of npmjs.com shows this top result: www.npmjs.com/package/pdf
This was great.... Dave Sir
Thank you, Adarsh! 💯
Hi dave thanks for your efforts!
Please how can we grab the username from note, We only store the user key with id of the user (in the Note.js)
Yes, this is because our data is normalized with the entity adapter. You can check my source code at the link in the description to see how I did it. You grab the data by using a selector in the note component.
I can't POST notes to database, It keep loading not stop.
For people having the same issue:
If you are trying to create a new note and Postman just hangs:
It is because mongoose-sequence is no longer supported, and doesn't work with mongoose 7+.
Replace mongoose 7+ with mongoose 6.12.0 by entering
"npm install mongoose@6.12.0"
Then make sure that your package.json & package-lock.json say "mongoose": "^6.12.0"
@Dave Gray will you please share the list of extension installed in vscode. It would be great. I saw 39 extension was installed.
That number is not a count of my VS Code extensions. It is the number of file changes for git. In the course resources, there is a section that shows several of the VS Code extensions I frequently use. 🚀
@@DaveGrayTeachesCode Number of files change was 48 that is different. I am talking about extension part. Just curious to know useful extension which can boost the productivity. Just asked out of curiosity. Feel free to share else ignore.
HI Dave - I've followed your course and have been creating MERN stack applications of my own. I keep having bugs though with the feature slices, specifically with the selectors created by the created adapters with getSelectors. For example I have a feature called Areas and useGetAreasQuery works fine. But selectAllAreas doesn't work. I have another feature Plantings but selectPlantingById doesn't work. Is there a guide to debugging these? Are there common issues that trip people up? I'm not seeing error messages, just not getting data returned.
There is some good documentation on the official site: redux-toolkit.js.org/ ...that said, I see you are not all the way through this series. By the end, I do a refactor to only use the RTK Query hooks.
@@DaveGrayTeachesCode yes it's true. I got about up to the JWT part - figured I'd tackle that once I had the "slice" queries and selectors part down better. Also gonna review your other series on the reduxjs toolkit with react - see if that helps. Thx
Hi Dave. I have a issue which is slightly confusing me. While creating a note using postman, the postman just gets stuck at loading. But this happens when I use mongoose version 7.0.3. But when I downgrade it to 6.0.5, the one that you have used in the course, it works fine. If possible , can you provide an alternate solution? I searched a lot for the solution, but couldnt find it.
In my Discord, some devs have noted that the dependency mongoose-sequence does not work with Mongoose 7. You discovered the fix. By rolling back Mongoose to v6, it works together.
@@DaveGrayTeachesCode Thank you .😃
Why can I not post to "/notes" endpoint?
Look at the update in the comments or description of Video #3 in this series.
Please,I have been trying to add to my notes,but it’s not responding,please help
same issue with me
Hi Dave, I am trying to post a note in Postman, but the error message is passing back 'all fields required'. I have created a raw JSON with user (with id from created user) title, text, and completed fields. What am I missing? TIA Sai.
I can only guess about what is different in your code. You can view my source code in the course resources to compare. Pay special attention to the backend endpoint controller that expects to get specifically named fields and returns that error when it does not. Insure your frontend code matches those specific data names.
@@DaveGrayTeachesCode Thank you Dave! Was not a coding error. I did not change the tag from 'text' to 'json' in Postman. All working correctly now. Thank you for all your tremendous content!
Thank u Dave !
Welcome!
Hi Dave, I try to move it into NextJs , the API return status 304 instead of 204 or 200. It will be work in different way in NextJs?
Consider Googling http status 304. Next.js is different from this app. You will likely have to adjust several things.
@@DaveGrayTeachesCode thanks sharing your thought and time.
I wish this tutorial was done with typescript.
Maybe another one in the future. Typescript series coming very soon. 🚀
Where can I get tutorial for RTK Query, I'm lost here
Course resources link. Then in the README find the prerequisites and the link to Redux Toolkit course: github.com/gitdagray/mern_stack_course
@@DaveGrayTeachesCode many thanks
Hello.
First of all, thank you very much Sir Dave Gray.
You're awesome teacher.
I got an error during rewrite your code.
The error is:
{
"message": "Cast to ObjectId failed for value \"64c2b9795b2d842b5b692999\
\" (type string) at path \"_id\" for model \"User\""
}
Anyone help me, please?
Thank in advance for any helping.
Happy coding.
is it happening on your postman or your vs code
I'm trying to create a note by sending {
"user": "645bxxxxxxxxxxxxxxxx188d",
"title": "title",
"text": "description"
} to /notes
but postman is stuck at "Sending request..."
and at this line of code: const note = await Note.create({ user, title, text })
I checked the code is almost the same as Dave's so I suppose is there a different way I should send the request?
I have tried a few things but can't seem to get through.
Did you check your Node.js console for an error? Sounds like there must be one.
@@DaveGrayTeachesCode There is no error in the log files or console.
Commenting out this piece of code is making it work:
noteSchema.plugin(AutoIncrement, {
inc_field: 'ticket',
id: 'ticketNums',
start_seq: 500
})
but I shouldn't?
@@tanishqa-sv did you figured it out already? I face the same problem here
@@muhammadaiman8772 @tanishqa-sv Kindly check your package.json, If the mongoose version is > 7.x.x then one quick solution would be to downgrade the mongoose version to ^6.x.x
You can run the below steps:-
1. npm uninstall mongoose
2. npm i mongoose@^6.5.0 (This is the version used in Dave's package.json)
It will work with this, however, this is a quick workaround, Would need to dig into why it isn't working with latest version, will give an update on it later.
Thanks 🙏
You're welcome!
Next content Mongoose 🥰
Hi! I cover Mongoose for this project in lessons 3 & 4. I cover it in more detail in my Node.js course listed as a pre-requisite in the video description, too. 🚀
25:50
TOP!
🚀🚀🚀
{2023-02-28}
Thanks for the great tutorial! 7:30 const initialState = usersAdapter.getInitialState(). I notice we don't need to provide any initial state. Is that because we are using default values for everything including isLoading etc?
The initial state in this example at 7:30 comes from the entity adapter which is referred to as usersAdapter. You can see just above that we set it to an empty object at first. After we fetch data, the object will hold an ids array and an entities array.
Guys, how can we select value according once the state value is changed in useGetUsersQuery(‘stateValue’) and updated accordingly the usersApuiSlice.endpoints.getUsers.select(“valueWillChangeIfStateUpdate”)
Because I’m passing query in the useGetUsersQuery(‘valueWillChange’)
If the select() is empty or hardcore value that cannot retrieve the correct cached value from the redux store once the state is updated
There is a refactor lesson later in this series that switches to a full implementation of RTK Query. My suggestion is to keep going with the project as-is and you will see how it all comes together.
@@DaveGrayTeachesCode Ok. I learn a lot from this channel. Thank for your time to created all the videos.
Thank you sir
Welcome!