React Forms with Redux & RTK Query | MERN Stack Tutorial

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Build React Forms with Redux & RTK Query data. In this MERN Stack tutorial, we will use RTK Query for CRUD operations, pre-populate React forms with Redux data, maintain Redux subscriptions, and prefetch data.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React & Redux: bit.ly/AdvReactDev
- The Complete Node.js Developer: bit.ly/CompleteNodeJS
- Jr to Senior Web Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
🚀 Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 All Resources for this MERN Stack Project: github.com/gitdagray/mern_sta...
🔗 Playlist for this MERN Stack Project Series: bit.ly/3Sn4EaI
React Forms with Redux & RTK Query | MERN Stack Tutorial
(00:00) Intro
(00:11) Welcome
(00:23) Suggested Pre-Requisites
(01:01) Starter Code
(01:26) User Stories Review
(03:21) usersApiSlice CRUD mutations
(07:11) notesApiSlice CRUD mutations
(07:53) Routing the Form components
(12:10) Config Roles
(12:59) New User Form
(24:02) Edit User component
(26:07) Edit User Form
(34:09) Start the backend REST API
(34:54) Understanding Redux Subscriptions
(39:00) Maintaining Subs with a Prefetch component
(45:06) Redux Listeners and useQuery options
(48:20) Add More Links
(48:40) Starting the Note forms
(52:05) Student Challenge
📚 Suggested Pre-requisites for this MERN course:
🔗 Node.js for Beginners full course: • Node.js Full Course fo...
🔗 React JS for Beginners full course: • React JS Full Course f...
🔗 Redux Toolkit for Beginners full course: • React Redux Full Cours...
🔗 React Login Playlist: • React Login, Registrat...
📚 Tutorial References:
🔗 Redux Toolkit and RTK Query Official Site: redux-toolkit.js.org/
🔗 Redux Devtools: github.com/reduxjs/redux-devt...
Was this MERN Stack tutorial with React Forms, Redux, and RTK Query helpful? If so, please share. Let me know your thoughts in the comments.
#react #redux #forms

[@DaveGrayTeachesCode]

Part 7 of The MERN Stack Project Series - This video shows how to build React form components to complete CRUD operations in our MERN Stack Project. We are using Redux and RTK Query so this video also shows how these CRUD operations are state mutations for Redux. This tutorial is not for beginners. If you are a beginner, check out my full courses all in one playlist here: kzbin.info/aero/PL0Zuz27SZ-6M1Uopt6_VL3gf3cpMnwavm

[@MrPindro]

The createNewNote controller doesn’t work!

[@DaveGrayTeachesCode]

@@MrPindro Yes it does. The only issue since this tutorial was published nearly a year ago is that the Mongoose sequence package does not work with the latest version of Mongoose. This has been discussed in these comments and in my discord forum. You can roll back to the version of Mongoose that I list in my package.json in the course resources, or you can find an equivalent dependency to Mongoose sequence. Some are listed in both the comments and in my discord.

[@MrPindro]

Oh!! I get it now. Practically everything else works aside from creating a new note. Anyway, i appreciate your response! 🤝

[@MrPindro]

Hey Dave, i can’t seem to find a link to the discord convo you previously mentioned. Mind copy pasting for me? The link that is. Thanks in advance!

[@MrPindro]

Btw, i just fixed it by having the mongoose-sequence definition on the Note.js in the models folder completely wiped. 😅 thanks again good lad! 🤝

[@sailee5208]

Thank you Dave! All up to date and looking forward to continuing the project in the next video.

[@DaveGrayTeachesCode]

Great job! 💯

[@cuentamovil456]

I've finally understood RTK Query thanks to this video and to your Redux-Toolkit playlist. Thank you very very much for your great work!! I hope you reach 500k subs or more before the year ends!!🥳🥳🥳

[@DaveGrayTeachesCode]

You are welcome! Looking like I may hit 100k by year end and I'll be happy with that.. but I'll keep going! 💯🚀

[@codernerd7076]

This series keep getting better, please keep going!

[@DaveGrayTeachesCode]

Thank you! Will do! 🚀

[@TechWithSally4D]

Awesome Buddy! Really Love Your Tutorial, Made as Simple as Possible

[@DaveGrayTeachesCode]

Glad you liked it!

[@vladimirjovanovic3540]

You are excellent teacher!!!!

[@uzomanwanne2751]

Thanks so much for this course Dave.

[@DaveGrayTeachesCode]

Very welcome!

[@teetanrobotics5363]

God level programmer and teacher🤩. Love your content !!

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏🙏

[@annusingh4694]

This course is gold 💯 Beautifully structured and detailed.

[@DaveGrayTeachesCode]

Thank you for the kind words, Annu! 🙏

[@Sylar7773]

YOU are the BEST teacher, thank YOU so much!!!

[@DaveGrayTeachesCode]

You're very welcome! 🙏🙏

[@Pareshbpatel]

I experimented with react-query before I took this tutorial. I will be using RTK Query from now on. Thanks to you, Dave. You have explained the use of RTK Query very well. Thanks again. {2023-02-28}, {2023-03-01}

[@DaveGrayTeachesCode]

Glad it helped!

[@DASDOS]

I love your courses

[@DaveGrayTeachesCode]

Thank you! 💯🚀

[@sonamohialdin3376]

Amazing tutorial thank you very much

[@DaveGrayTeachesCode]

You are welcome!

[@ahmad-murery]

Hello Dave, I haven't bother you in a while, so here I am again 😎 at 19:44 we used the ROLES key for the option text, and that's ok since both keys and values are identical, but just in case we want to localize this app I think we can use ROLES[role] Thanks for your continued efforts to make things easier for us

[@DaveGrayTeachesCode]

Hello Ahmad! Good to hear from you my friend. I hope all is well for you. 🙏💯

[@ahmad-murery]

@@DaveGrayTeachesCode We have survived so far 😐, Thank for asking my friend 🤍

[@kevinalfaro4820]

Hey Dave, loving the content. Any plans on releasing a NEXT Js series? There’s a lot of talk about the T3 stack which utilizes Next, Prisma for database, and tRPC over React Query. Would absolutely love if you could try to do that, you are one of the best teachers on here by far!

[@DaveGrayTeachesCode]

Yes, I do have plans for a NextJS series - and thanks for the detailed request and kind words! 🙏💯🚀

[@kevinalfaro4820]

@@DaveGrayTeachesCode thanks for getting back to me, any idea on when that can be expected Dave?

[@mariusguissou4282]

very very good tutorial thanks :)👍👍👍👍❤❤❤

[@DaveGrayTeachesCode]

You're welcome!

[@fa1con989]

I really enjoyed this course 😇 I just have a small request if possible please make a tutorial on microservices and the CI/CD pipeline.

[@DaveGrayTeachesCode]

Thank you for the request! 💯

[@mahendranath2504]

Thank you so much 🤗👍👏🙌👐🤝🙏

[@DaveGrayTeachesCode]

You are welcome! 💯

[@adarshalone7579]

Sir you explain every single details about MERN stack. And i love the way you explain.... Love from fellow coders..

[@DaveGrayTeachesCode]

Thank you for the kind words, Adarsh! 💯

[@chifou]

Hello. Thanks for your videos. What is the better way to modify _id to id : in backend or frontend like you did?

[@DaveGrayTeachesCode]

Either way works, but I prefer the frontend as shown. It is easy with the transformResponse example.

[@chifou]

@@DaveGrayTeachesCode thanks 👍🏻

[@abdulrahmanagboolaosho3582]

Thanks for the awesome tutorial, I just have a quick question: Is there any reason for someone to want use useLazyGetNotesQuery or useLazyGetUsersQuery

[@DaveGrayTeachesCode]

The "lazy" versions provide "manual control over when the data fetching occurs". according to the docs. This means you would use them when you don't want to trigger the query when the component loads.

[@abdulrahmanagboolaosho3582]

@@DaveGrayTeachesCode thank you so much, you have helped me in ways you can’t imagine I am sincerely grateful to you

[@elAmigo805]

Why do you sometimes destructure an imported hook with an array and sometimes as an object? How do you know when to use one or the other?

[@DaveGrayTeachesCode]

It depends on what you need the hook to return if you write a custom hook. If not a custom hook, the documentation tells you what the built-in hook returns.

[@nicolascohen2465]

Hi Dave, I love your videos. I have a question... How can we implement a debounce strategy to an input of type text using RTK Query? I hope you answer, thanks anyway.

[@DaveGrayTeachesCode]

This would make a good tutorial for not only a useDebounce hook but also for a search input that automatically sends a request to the API when the input changes. Thank you for the request! 💯

[@nicolascohen2465]

​@@DaveGrayTeachesCode Coming Soon? I need to know hahaha. #anxiety

[@DaveGrayTeachesCode]

@@nicolascohen2465 sometime this year!

[@marquessmalley1778]

For some reason at 43:19, after implementing the prefetch component, the data stays on the edit form(which is expected) but after submitting the edited user and going back to the usersList, the edited user doesn't update until I refresh the page again. This was working previously but now I cant figure out what seems to be the problem here??

[@sands570]

Hello, same here... Did you find out ?

[@MrZiyak99]

what is your opinion on storing form data in a redux slice

[@DaveGrayTeachesCode]

Great question! I only abstract state from the component when it is needed globally. If the state is only related to the specific form in the component, I usually keep it there.

[@nimp7582]

In RTK, is every GET operations considered query and everything else is mutation?

[@DaveGrayTeachesCode]

Not just in RTK, but overall, the other CRUD methods all mutate data. You query to Read - but everything else will change the cached data you have.

[@nimp7582]

@@DaveGrayTeachesCode That makes. Thank you so much for the tutorial btw. My only concern is that I dont feel confident about any of the API slices mutations/queries. The syntax and the various names are daunting. If I had to give a suggestion, it would be really nice if you explained more in depth where each of the variables were pulled from for stuff like provideTags, transformResponse, noteAdapter, etc.

[@samiullahsheikh5015]

can you please explain the difference in keepUnusedData and polling?

[@DaveGrayTeachesCode]

keepUnusedData = The amount of time in seconds that RTK Query will keep the data available AFTER no components are subscribed to the data. Components unsubscribe when they unmount. polling interval = The amount of time in seconds that RTK Query waits until it automatically sends another request for that query endpoint. This is important when others may be updating the data - like other employees in this example - and you need to see and work with the most recent data instead of stale data from the cache.

[@breldanmuthaka1120]

Sir, If we are subscribed to the endpoints in the Prefetch component. How come we still query the notes and users in the users and notes lists? Also if we invalidateTags on creating new users and posts, how come we still refresh the queries in the users list and notes list? I’m confused, but I guess that’s part of learning.😅

[@DaveGrayTeachesCode]

Hi Breldan - Question 1) The prefetch component will only fetch once. Your data will become stale if you do not fetch any changes. 2) Good question - the reasoning is we want the data refreshed on all staff members web displays. Invalidating the cache does not automatically update the display of any logged in browser - it only impacts the cache (stored in the browser) of the user who made the update. Refreshing at a regular interval in the app will display new data for all workers viewing the notes or users lists. You're right! It is good that you ask questions - it is part of learning! 💯

[@somebody-17546]

Are there more videos in this course ?💖💖

[@DaveGrayTeachesCode]

I am building this course right now. New videos on Tuesdays and Fridays.

[@mrbilchalan]

Hello Dave, my endpoint get multiple objects, means- {notesPerPage:12, notes:[...]} . I am still looking a way, how to handle notesPerPage. Should have do that by myself but I am not quick or great learner. If you hint something or tut some in your next lessons, it will be great. Thank you.

[@DaveGrayTeachesCode]

It sounds like you are applying pagination. On the frontend, you can handle the notesPerPage value as you see in my pagination video: kzbin.info/www/bejne/b4vFlaqCarOGq7M ...on the backend, if your frontend app sends the value for notesPerPage as part of the request body, you can destructure that value as you see other values have been received in the controller methods.

[@mrbilchalan]

@@DaveGrayTeachesCode I think my question is wrong. ---------------------------------------------------------------- transformResponse: responseData => { const loadedNotes = responseData.map(note => { note.id = note._id return note }); return notesAdapter.setAll(initialState, loadedNotes) }, ---------------------------------------------------------------- here loadedNotes store the notes array and set the initialState. but I have also other objects like notesPerPage and several others. If I set the initialState an array rather than object and destruct my desired objects from responseData and add to initialState along with notes array it doesn't work properly. I don't know if I express myself properly. Sometimes I feel angry why people talk in different languages.

[@agalligani]

This is a follow-up to a comment on another thread where I ask about RTK & selectors created by getSelectors as done in the features slices. My problem is getting the selectors (or state, really) to "hydrate". I realize this can't happen unless the "get" builder query is invoked for the corresponding feature. But how do I force this to happen? For example if I have a feature called "Areas" and I want to us the "selectAllAreas" selector, I can force it to hydrate state by doing this: import { useGetAreasQuery, selectAllAreas } from "./areasApiSlice" and calling useGetAreasQuery first... By invoking useGetAreasQuery, state is hydrated & the selector "selectAllAreas" works. But from another content type, for example as you populate the User drop down in NewNotesForm using selectAllUsers, how does one "force" the state to hydrate? I must be missing something here. Is it in the course dialogue?

[@agalligani]

Maybe this works in your course because the user has to log in first and you "persist" state? Is there a standard pattern to make this occur?

[@DaveGrayTeachesCode]

I think you will find the full refactor to RTK Query that comes in a later chapter (video) helpful. The way to get new data - which is what I think you are wanting when you say "how does one force the state to hydrate" - is to invalidate an existing cache so another query takes place. You are correct that a user must be logged in with this app for much of anything to take place. The persist behavior is only for when a page is refreshed or a user navigates away and returns. Keep going with this project in full before trying to modify or build your own around it. I think RTK Query will be helpful for what you are trying to do.

[@agalligani]

@@DaveGrayTeachesCode OK - I apologize. This is totally on me because I missed the Prefetch.js, skipped it in my application and reviewing the episode again this is what I am looking for. Thx

[@Kay-qg1vn]

Hey Dave, are you familiar with htmx?

[@DaveGrayTeachesCode]

It is interesting. I have not read much about it. I like my HTML to be as clean as possible, and this adds a bit more to it - but I do not know enough about it yet to form much of an opinion one way or the other.

[@Kay-qg1vn]

@@DaveGrayTeachesCode okay i understand, i thought maybe you are familiar with it, you are doing amazing by the way, your HTML and CSS courses are amazing!! Keep doing the amazing work. 👏

[@zahidshaikh3122]

Finally ♥️

[@Norfeldt]

You are a great teacher 🙌 You might wanna checkout the new experimental feature in vscode called sticky headers. I found it useful myself. 🤗

[@DaveGrayTeachesCode]

Thank you for the kind words! 💯

[@rsrinivas6025]

Hii dave i have 6months of experience as react developer. I am requesting you to make one video. How one should understand the complex project (means code already written by some body) recently i moved one of the client location.they just assigning the tasks and they are not going to explain the thing properly. I basically want to know how to debug the project in various places and how to understand the api responses and flow of the project.please i am begging you to make a video on this no one in the youtube made one such video about it.and also my sincere request you to do one react project using complete Antd library video, no one explained Antd any where in the youtube.udey also has no as such course. I am waiting for you reply 😊😊😊 thank in advance

[@DaveGrayTeachesCode]

Thanks for the request! 🙏

[@domjag600]

As of 2023 what are your thoughts on RTK Query vs ReactQuery?

[@DaveGrayTeachesCode]

They are both good!

[@ronitafter2464]

Great tutorial Dave, thank you! I was able to do everything, except adding notes in Postman(didnt know what to add in the JSON format). so unsurprisingly i 'm getting an error that localhost:3500/notes not found. Is there an example for the JSON format?

[@DaveGrayTeachesCode]

Yes, I think you need to go back to lesson 4 in this series to see me do that very thing in a video.

[@ronitafter2464]

@@DaveGrayTeachesCode I'll do that, thanks!

[@AhSoh7091]

Hi Dave. Wish you can giving me some tips. I tried implement more with this to add some default state into userAdapter.getInitialState({ currentPage: 0}). How could I update the currentPage value state in getUsers GET method once the api return the value.

[@AhSoh7091]

I guess i more understanding it now after watched it again. usersApiSlice with adapter only handling the api and created the normalized state. if we want to mutation other state that should create another file like "authSlice" to handle the redux stuff and initialState. Thank you so much.

[@DaveGrayTeachesCode]

Glad you got it!