Understand Redux-Toolkit and RTK-Query with 2 React Project | Redux-Toolkit Beginner

hello everyone welcome back to my YouTube channel in today's video I am going to give you a very basic working knowledge about reader toolkit along with article query with two very basic projects so this video is basically created for the beginner level in this video our first project will be a very basic blog application using the concept of Redux toolkit where a user can post a blog or he can like or dislike a Blog with the help of this application you are going to have some basic idea about how to work with reader toolkit in a react application we will be using a starter code for both project that we are going to build in this video using starter code we will have an advantage to focus on concept rather than typing unnecessary code we will write with less code in this entire video and don't worry I will provide the overview of each starter code before we jumping and add any code now once we complete our first project then we will move on and create another simple to-do app with the help of article query in this YouTube app user can add item to the to-do list user can delete the item or you can mark the item as complete so you are going to build a very basic current feature using article query in area application and for this project I will also provide a starter code which will be available in the video description so before we move forward and start working on this project if you like my react detox video then please do subscribe my channel and share this channel link with your friend and click now let's move on and work on our very first project with readers toolkit so for first project you have to clone this repository and I will provide the link for this rainbow in the video description so you have to clone this Regulatory and after that you have to do npm install now I will open this GitHub repo in my vs code so let's go into the vs code so before we move on and write some code let me give you a brief overview about this starter code so I have created this project using this Redux plainjs template so you don't have to do this step so let's go back to the vs code so you can see that I have one app.js file and I have also used here bootstrap so that we can avoid writing CSS code so on left hand side we have a block form from that we can publish our blog and on right hand side I am rendering the blog list which is submitted by this block form at the moment we just have a heading and if I go back to the browser so you can see that we have on left hand side we have a Blog form and right hand side we have a blog list in which I am going to render all the blogs now let's go back to vs code again and here we have index.js file and we have a app and feature so in app we have a store configuration so at the moment we don't have any reducer so this is the empty and we have a feature folder in which I have one blocks folder in which I have form and blog list okay so this is a very basic form which I have written here so that the user can publish the blog so here I have just provided you the source code of this all different different file so that we can more focus on learning the reader toolkit concept so here we have very basic form so we have one drop down for selecting user we have the input field for title and we have a body for our blog now we have a blog list as well okay so at the moment I am rendering the two blocks from this component itself okay and here we have a Blog user as well so we are also going to show this blog is created by which user okay at the moment it is just plain okay and we have a response button so here basically you can like or unlike the blog so this is a very basic component now let's go back to this index.js file so here basically we are providing the store to our app so that our component can access the state which we are going to Define in our store and earlier I have already informed you that in this project I am going to use a bootstrap version 5 so I have already pasted the CDN for the bootstrap version 5. so that we can avoid writing CSS code in this project and now let's talk about this package.json file as well so here we have got this redirect toolkit and react Redux which is imported to work with the reader toolkit in a react application so I have already got this two dependent fee Whenever you set up a react project with this command so whenever you create a any react project with this command so you are going to get this true dependency along with that that is react reduction Redux toolkit so this is all about the overview of this blog starter project now let's start working on this simple blog application so first I am going to create a slide here so that will be like blocks life dot Js and I'm going to import a create slides from redirect toolkit so slice basically is used to define our initial State and action and reducer so for that purpose we are creating a slice create slides we need to bring after that what we need to do so here we have to define a Block's life okay and here we can use this create slice which gonna be object and we have to define a like name I'm going to give a slice name here blog and we are going to have initial State okay so let me Define a initial State here only so from this bloglist.js file I am just going to cut this one okay and I'm just going to paste it over here let me rename to initial state okay so we got our initial state now we are going to having a reducer in which we are going to write an action so at the moment let it be empty and let me export this one so export default blogs slice dot reducer so we are exporting this reducer and we are going to hook up this reducer in our store dot JS file okay so let me go back to this app folder and here I am going to bring that block reduce it so block reducer and here we have to go to this feature folder and blocks and we have to use this file now we can hook up our reducer in this reducer object so blocks we can give any key whatever you want so I am giving over blocks and we can just assign blocks reducer so let's save this file and here everything is fine I guess okay now let's go to this bloglist.js file so here first I am going to bring a use selector from react reader because we need to select the state that we have defined in this Block's life so for that purpose we need so let's bring here use selector and then we can have our blog so fast blocks is equal to use selector and here we can access our all block from this state DOT block because our reducer is registered with the key blocks here okay so now we got our all blocks okay and we are using this render block function to render all the block so we have ID title content okay blog user so at the moment we don't have any basically user okay in this life you can see that so it's gonna just render the unknown user okay so we will write the logic for user later in this project so first let's focus on renting the blog in our application so we got this blog from our store and we are rendering the blog using this function so let's go to this app.js file and remove this hard-coded heading and I'm going to bring the blog list component Okay so let me save this file and let's go into the browser so now here you can see that we got our two block that we have defined in this block live.js file okay so we got this to initial block so this part is completed where we have learned how to select the state from the store so this part is over now now before we move forward and use this component we need to talk about this use selector because right now it received the state and then we got State DOT block but if a structure of our state change like right now this component should know something about the state it need to know we go state DOT block it could be state DOT block dot something else in the future so it would be better if you create a selector in this life and then export it and that way if the shape of a state ever change in future we wouldn't have to go through and change each component we could change once in the slide so let's do that in our blocks life.js file so here we are going to create a selector so I am going to export that one file so export pause select all blocks and we are going to have a Anonymous function which going to receive a state and this will be state DOT blocks okay now we can bring this selector in this block list.js file so let me bring that one so from blocks life we need to bring that select all blocks and here we can just pass select all blocks okay so let's save this file and and let's head over to the browser so this is still working with that approach so the selector part is also completed in this application now let's move forward and create a reducer function for adding the blog in our application so I'm going to add an action here inside this reducer object so we are going to have a add blog okay and we're gonna having a like state and action and we can do something like this state dot push and action Dot payload so here XL dot period basically contain the information about our blog which basically contain title body and user ID so this is our action which we have brought in our reducer object now we will talk about this state DOT pose in a second because if you are familiar enough with the react you know we don't usually mutate State and that What DOT push would do in an array so we will talk in a moment so let me first export this function export or and we're gonna having a blog life dot action so here create slides basically generate an action created with the same name which we have defined over here that is ADD blog so so it's going to automatically generate the action creator now let's talk about this state DOT post that we have written over here so we generally used to writing a state like spreading the state and then we have a action payload as a new item instead of state DOT push but Redux toolkit use images under the hood and that allow you to write your JavaScript like this where you would normally be mutating the state but it is not mutating the state emerges create new state underneath now we realize this only work inside of create slide anywhere else in your application you still need to use proper way of not mutating the state however inside create slide you can use state DOT post and you can directly set the state in other way as well and emerges will handle that so it make it easier to handle inside of here so let's move forward and use this action in our form component so let's go to this at blog form.js file and we are going to use this action that we have just created now in our blog slice so we have already a basic form over here you can see that and for now I'm just going to comment this drop down let's just focus on publishing the blog with title and body so we have one on submit in which we have just e dot prevent default we have this handle change for basically tracking the state of each field that is we have over here like input and text area and we are going to write a logic to submit the blog in this on submit only so first we need to bring a huge dispatch okay so we need to bring a huge dispatch from react reduction in order to dispatch an action a huge dispatch and first we have to store the reference of huge dispatch into a dispatch variable so we have to just store the reference of this huge dispatch into this dispatch variable so that we can dispatch an action now here what we have to do first so here I'm just going to check like if you have the title and body then we are going to basically dispatch so dispatch and we have to also bring the action so let's bring the action as well from our block life so add blog I have bring over here and we can dispatch here like add block and here we have to 5 provide the ID so I am going to use a nanoid from Redux toolkit so from Redux toolkit we need basically a unique ID so for that purpose I need to bring a nano ID from Redux toolkit so that every block should contain a unique ID so here we can use nanoid and that will be with parenthesis and now we can send title and body after that we wanted to basically clear the each input field that is title and body so set of so let's make it empty this title input field and body text area after submitting the blog so let's check whether it's working or not so let's go into the browser and here I have forget to bring the component in our app.js file so let me bring the component so add block form now let's go into the browser so there is some issue with the styling so let me see what is going on so we need to add Q styling in our index.chs file so I'm just going to paste those styling so this basic styling we have to add in our index.css file and don't worry this styling will always present in your starter code so you don't have to worry about that part so let's save this one and let's go into the browser so now it's look good okay Let me refresh the application so it's looking good now we have to publish our five blog by dispatching this action that we have defined here okay in our font Summit so let's see whether it's working or not so let me just give here like test okay and let me give here what's going on and let's click on submit so we got some issue let me see Okay so let me see what's going on so here it will be body not content so make sure to change this one from content to body now let's go into the browser and refresh this application so we are still getting the issue so it will be like body not content okay so let's save this one and let's go into the browser now we got our two post okay let me close this one so let's publish our blog with the action that we have just created in our blocks life so let's give you a test test and let's click on submit so you can see that this is working so we have successfully able to add a simple block with our action that we have just created with the help of redef toolkit now our form is working perfectly but it could be better so let's talk about that because right now it needs to know the detail about the state once again in order to send it properly it has to send a properly formatted object and it will be better if we could abstract some of that we don't want to duplicate this type of logic in every component that goes to our Global state so instead we can handle this back in our live with a prepare callback and prepare callback can generate unique ID format the data return the object with payload and that basically kind of what we are doing here so this will really simplify our component and it will handle everything one second back in the slide so let's go to the slides so here we have to modify our ad blog so what we can do over here so let me just cut this one and here we are going to have a reducer okay and we are going to have again the same thing that is State and action and we can just do like State DOT push with action payload go action dot payload now here we can Define our prepare callback so prepare now we can pass the title and body and then we can return a formatted object okay so return and it's gonna return with the payload so payload and again we are going to have ID here so again we need to bring here nanoid so let's bring in Nano ID from Redux toolkit then we can have our title and body okay so what we are missing something over here so I think put comma and something we are missing so let me check so here we have to remove I guess this two thing okay and for return we have to use this semicolon and I think for this is fine let me check okay this is also look good and here we have to add one more okay so let me forward this one so now it's fine you can see that so here we pass the title and body that we would get from the component and then it return the action payload as it need to be formatted so we have returned over here and then we have a payload where we Define ID with nanoid along with title and body so we have modified our slides with the prepare callback now we have to also adjust few things in our block form so from here we can remove this object and we can just pass title and body and the rest of the thing will handle in our life with this prepare callback which we have just defined over here okay so let's go back to this form and the benefit here is that our component once again doesn't even have to know the structure of State at all now everything is handled inside of the slide and we can just send the raw data that we need to so let's try this one in our browser so I'm going back to my browser again so let's refresh this application and let's give some title test and test and hit submit so now you can see that this is working with this prepare callback we have successfully able to publish our blog so this part is completed here so we basically simplify our board little bit in our slice so now we are done with this and we can remove this one we don't need nanoid here because we no longer need the ID for creating blog because everything is handled inside our life so let's get rid of this now before we move forward and work on the user part where we are going to select a user from the drop down let's just talk about the Redux Dev tool so let me go back to the browser and let's refresh this application first and I'm going to open a reductive tool so you can install the reduct capital extension in your browser so I'm going to open to my right okay so let me just refresh this application so here you can see that the state of our application so we got this two Block in our initial state and you can see this state in a different format like chart you can see in the chart and you can also see in the Raw format so you have a different different format to view the state of our application so reductive tool basically is used to track the application State and also you can track the action that you are going to dispatch so let's try to add one block okay again so I'm just going to give you a test again test and let's see our Redux Dev tool so now you can see that we have dispatched our add blog action so in the reduct depot you can also drag the action dispatch so we got this action okay and now we got three blog in our application so you can see the this blog is added so you can see that this newly blog is added in our store and you can also calculate the difference here okay so this newly blog is added in our store and this is action that we have just dispatched by hitting the submit button so this is all about the basic overview of reductive tool and how to use this reductive tool whenever you are using Redux in a react application now I am going to minimize this one now I am going to start working on the user part in this application so that user can able to select the user from the drop down While submitting the blog so I am going to have one more folder inside this features so I'm going to have a folder like users and we are going to have a user place so user applies dot yes and again I need to bring create slides from Redux toolkit so let's bring from Redux toolkit create slice and then I'm just going to place the initial state so we are going to have some default user so that you can select from the user drop down now after that we're gonna have a user slice so you just slice create slice name so we are going to provide the slice name so it will be users and we can pass here initial state and the reducer will be the inputee object now again I am going to create a selector here for the user so export font select all users we're gonna having an anonymous function so it will be state and state DOT users and then we can export our life so export default users like dot reducer and then we can hook up this reducer in our store so let's go to this store.js file and I can just copy this one this important statement and this will be user and it will be coming from user place so we need to change the entire path so it will be coming from users folder and then user slice and here it will be users and users reducer so we are done with the user slice in this application now let's go back to this block form so here we need to bring the all the users so first we need to bring you selected as well and here we can have our all user okay and we can bring the selector that we have just defined in this slice so let's bring this select all user so vs code is going to automatically import for me okay if not importing in your case so you have to import it manually now we got all the users okay and we can just uncomment this line of code and here what we have to do so let's have a user options users option we got all the users and we can map over it user and we're gonna having an option so key will be like user dot ID and we can give here the value user dot ID only and then inside this user dot name so let's use this user option here in the drop down so here we can have this users option so let's see whether we are able to see the user or not in the drop down so let's go back to the browser and here we got our three user that we have defined in our user life that is John Doe Nancy and James Bond so this part is done but still we have to do some modification as well before we publish our new blog with this latest changes so what changes we have to do over here so let's understand that one so while adding the block we are also going to pass the user okay so here what we are going to do so you can see that for drop down uh we are using here handle user so handle user basically is going to uh store the user okay it's going to store the user ID as you can see that here in handle user function Let's uh pass here user ID as well because in initial State we have defined three things like title body and user ID for our blog form so we are passing this user ID and since we have modified this action part while dispatching this add block so we have added one more argument that is user ID like which user is basically publishing the blog so we have to also modify our prepare callback function that we have defined in the block slice so let's go to into that file so let me go back to that file that is block slides so now it's going to receive the user ID okay so user ID is going to receive and it will be user ID okay so we have modify our prepare callback now we have to also do some changes in our blog user component okay so at the moment it's just showing the unknown user we are not displaying the username okay so before we do that uh let's go back to this block list.js file and here you can see that we are passing the user ID so we are mapping each block that we are receiving from our store and we are passing the user ID here okay to this blog user component so we can mention this user ID here okay and after that what we have to do so we need to bring first use selector from react reader because we need to find which user is basically publishing the blog so we need first all the user that we have in our user's life so use selector first you need to bring and then we need first of all all the users so use selector and we can pass here the selector that we have defined in the user slides so select all users so we have support automatically import for me and then after that we can write a basic logic here so we need to find that particular user so we can use here all the users like users dot find and we are going to have each user and we are already receiving the user ID from our blog list component so it will be like user dot ID and if the ID is matched then we are going to grab that user and we are going to show the name so what we have to do over here so let's remove this one and first check if we have the user then user dot name else it will be unknown user okay so let's save this file and let's go to this add block form dot JS file as well and here I'm also going to empty the drop down field as well so user ID and it will be empty after submitting the blog and before we publish a Blog with all these changes I wanted to make the submit button disable until all the field get filled by the user so what I can do so I can have one more is filled so it's going to check whether each input field has some value or not so we can use here Boolean so title Boolean so it will be body and Boolean it will be user ID so this button will be disabled if any input field left empty so we can just check this one okay so let's see whether it's working or not so we need to go back to the browser refresh this one and I'm going to select a user here John Doe let's give a title test let's give a body test now you can see that this button got enabled after submitting the value in each input field so let's click on submit so now you can see that this time we got the username as well that is John Doe okay so this part is also completed over here and you can see that we have successfully able to publish a Blog with the username as well so we are done here with selecting the user and publish the blog with the specific user name so let's move forward and work on the rest of the functionality that we have in this application like we have to also implement the functionality like and dislike so whenever user click on like or dislike button it is going to increase so let's work on that feature as well with Redux toolkit so we need to write a reducer function for that and before we write a reducer function let's modify repair callback again so you can see that in initial State we have a response object with like and unlike so we are going to have the same thing in the repair callback as well so first let's give your response okay and and it will be like so initially it will be zero so all the count will be zero for now whenever a user created a Blog so let's save this one so now let's start writing a reducer function for liking or disliking the post so I'm going to have here response added one reducer function which is responsible for liking or disliking the post so it's gonna having a state and action and from action dot payload we are going to receive two things whenever a user is passed an action while liking or disliking the port so it's going to receive like a block ID and the response so you can see that this component so here we have a name and Emoji so I have used over here like object dot entry because this is a object and we are mapping over it so this name is key and Emoji is value so we are going to pass two things that is uh which blog we are basically liking and the Emoji so we will work later on this component so first let's work on this reducer function so from action.payload we are going to receive two things that is blog ID and response and you have to check existing block state so in this state we have got our all block so state DOT find and we are going to have blog and first we have to basically match the block like which block we are basically liking or disliking so first we have to grab that particular block and here we can give this blog ID so if we have the existing blog then existing blog Dot response and here response and here basically we are going to increment okay what we have to do next thing so we need to bring first a huge dispatch from react Redux so use dispatch and here we need to first store the reference of use dispatch into a dispatch variable and this complete is also going to receive a Blog okay from our blog list okay you can see that at the moment we are not passing anything so let's pass here blog and we can just pass it particular block okay now this response button component is retrieving the the particular block and here what we can do so on click we can basically dispatch an action so dispatch and we can bring the action so we have created the action but I guess we haven't export so let's export this one okay now let's go back to this response button.js and here first we need to bring that one so we need to print that function reducer function so on blog slice we have to bring response added and then we can dispatch this response added so we have to pass two thing that is first block ID uh we are already getting from this blog props blog dot ID and response so it will be name only and we have to also show the count so let's do that one the blog dot response and we can pass here name so let's go into the browser and see whether it's working or not this one so now you can see that initially record the count zero okay and if you click on this one so it's not incrementing so let me see what's going on so we are able to dispatch an action or not first let's see that one so action is not dispatching at all so actually we have write this reducer function outside this reducer object okay so it's closing here so we need to write here actually okay so let's cut this one and paste it over here refresh this one first so this is working okay as you can see that this is getting incremented let's add one block here with Nancy let's give you a test let's give you guys let's just copy this one let's submit and let's see whether we are able to like or not this newly created blog so this is also working you can see that our like functionality is also working in this application with the help of Redux toolkit so it seems like everything is working in this simple blog application so I think that's it from this section we have implemented all the feature that we have discussed in the intro part of this section so we have implemented the feature like how to add block like or dislike a particular block so all this feature we have implemented with the help of Redux toolkit in a react application and I hope this is a very good exercise for you in terms of understanding the basic concept of redact toolkit with react now let's move on and start working on our final project with rtk query now let's understand what is rtk query so article query is a powerful data fetching and caching tool so it is mainly used for fetching the data from server and its cache the data for future use and here it is also mentioned that it is designed to simplify common cases for loading data in web application eliminating the needs to hand write data fetching and caching logic yourself so here we don't have to write logic manually for loading fetching or error part whenever we have to make a API required so generally what happened rtk query will take care all of this task behind the scene so overall rtk query provide a powerful tool set to Define API interface layer for our application and you don't have to install additional package to work with the article query because rtk query is built on the top of the other API in the Redux toolkit package so you don't have to install rtk query additionally in your application now let's see what API include inside this rtk query so first we have a create API so create API is the core of the rtk query functionality it allows you to define a set of endpoint describe how to retrieve a data from a series of endpoint including configuration of how to fetch and transform the data and in most cases we should use this once per app so overall in create API we Define a different different endpoint you can call series of endpoint so this is all about the create API now let's talk about the fetch base query so phasebase query is a small wrapper around face to simplify request so inside this phase based query we Define base URL for our API now let's talk about the API provider so API provider can be used as a provider if you don't have a Redux restore so if you don't have a store in your application so you can use this API provider now let's talk about the last one that is setup listener so it is a utility used to enable Refresh on amount and research on reconnect Behavior so this is all about the article query so to start working on this project first you have to basically download this repository or you can make it clone and I will give the GitHub link of this repo in the description so you don't have to worry on that part so first you have to make it clone or download this repository after that you have to open this repository in your vs code and don't worry I'm going to give you the brief overview about this project so I have written some basic react code to avoid writing much react code in the video so our focus is learning the basic of rtk query so we will be more writing code on that part so I hope now you have downloaded this repo or you have make it clone so I'm going to open this project in my visual studio code so let's go to the vs code so this is to do starter project that I am going to use so I will give you a brief overview about this starter project that we are going to use in this section so let's first have a look into our package.json file so here we just have like react react Dom and this basic thing so this basic thing got generated with the command npx create react Tab and your project name now you can also notice that we have got one db.json file so in this project we are going to use the Json server so that's why I have this db.json file and to run Json server I have added script in my packet.json file so you can see that I have added a script here so our Json server is going to listen on Port 5000. and if you haven't installed the Json server so you have to install the Json server file in order to start working with this Json server in this react project so you can install Json server like npm install Json server hyphen G so you have to install the Json server globally on your machine now let's see what we have in this starter project so we have this app.js file and I have already write some react code in order to save some time so at the moment you can see in my browser that we have got two to-do's okay and these are basically hard coded so if I go back to my vs4 so at the moment we are showing those two to-do's uh hard coded okay and once we integrate rtk query in this project then we are going to show to do our dynamically so at the moment these things are basically hard coded and we have got some basic styling for this uh the add code so we have got some styling in our app.css file so you don't have to worry about all this dialing I have already provided in this starter project so we have this some styling and we are going to write our all code for to-do's in this app.js file so at the moment you cannot add delete or update the to-do so we will write rtk query endpoint to interact with this API so in order to work with article query first we have to install two packages okay so let's install those two packages that is Redux JS toolkit and react reader so I am going to open a terminal here and I am going to install a package here like Redux Js to repeat and react readers so these two packages need to install in order to work with rtk query so let's wait for the package installation and meanwhile I will basically run the Json server as well so I am going to my directory so here I'm going to open a one more command prompt and I will do like npm run okay so let's go back to browser so here we have got our to-do's that we have mentioned inside this db.json file so you can see that in db.json's file we got T to do this okay and you can see that our package also got installed so I'm going to close this terminal okay so here we have already got some basic setup we start working with our very first rtk query project that is produce app now we are going to integrate rtk query in this project so we are going to have one folder here under the source that is featured and in third feature we are going to have one folder called API and inside this API folder we are going to have apis life file so API slice dot Js inside this API slice this is where we will create our method to interact with API so essentially we are replacing something like access and pull that code out of our component logic in this separate API fly and this is the kind of how we name thing in Redux if you have watched my previous project with reader toolkit in this course so I'm going to bring two things from reader toolkit so we have to give this path Adidas toolkit and the path will be query and react so from this path we have to import two things so I am going to import create API for creating a different different API to interact with it and Page based query now after that I am going to export this API slide so export font API live and create API and this is gonna be having an object and inside this I am going to have like reducer path and you can give your name like API so this reducer path is default and if you don't put here then it will okay but I am going to include this one as well after that I am going to Define base query and inside that we are going to have stage query and here we have to provide with URL so we have to specify this URL this Json server URL and I'm just going to remove these to Do's okay so you might have noticed that this is something similar to HCL because in Access also we provide base URL so this is something similar to access only after that we are going to have endpoint for API to interact with it so we are going to write here a builder pattern okay to interact with API so let me write our first query here so our first method will be like get to those okay and Builder dot query and here we are going to have a query and we can have this Arrow function and here I am going to specify the path that is which is going to attach with this base URL so this method basically is responsible for fetching all the to-do's that we have in our Json server okay so let's format this one and this article query is going to basically expose a custom book so let's see how it's look like so exports on and API slice now this article query is going to expose a custom hook based on this method so use get produce query So based on the method name that you have provided under this endpoint so it's going to expose book like this use create to-do's query so whatever the name you have given here inside this endpoint the rtk query is going to export the hook based on this name so suppose if you change this get to those to fetch to do's so this will get change okay so whatever the method you are going to Define inside this end points it's going to expose the question moves based on that so I am just going to revert this one so let's see what this one so our first rtk query is ready okay so before we use this custom hook in our component we have to do some adjustment in our index.js file so let's go to this index.js file and here we have to bring API provider okay so from this path we have to bring API provider and here we can bring that API provider so this slides basically you need to provide to our entire app component so we need here API provided and we are not using here restore so that's the reason I am using here API provider okay now we have to also bring this API flight as well live you can see we have bring this API slides from this part now we have to wrap this our app component with API provider let's cut this one and paste it over here okay and here we can pass our API like like this way okay Now by doing this way we can use this custom hook in our component okay so we have successfully integrated our rtk query in this project and we have also write one query to fetch all the to-do's from our Json fake server so now we have got our one query to face to do from our Json server so let's use this query in our component so what I'm going to do over here so once going to use this use get to those query so make sure to bring this use create to-do's query so make sure to bring this use gate to those query from this part and in my case vs code automatically import this one so in your case may it's not import automatically so make sure to bring this custom Hook from this path now this use get to do query is going to expose some properties so I'm going to export light is going to expose like data and if you just do like control space so you are going to see lot of property that this custom book uh generating so we are not going to use all of this property so I am going to use here like is loading and it is success is error and setup so as you can see that by using this rtk query customer could reduce a lot of Redux boilerplate code okay so we don't have to define a separate state for each loading success error or either so that's why rtk query is preferred nowadays so let's use this one and you can also rename any property if you wanted so I am going to rename this data to to those okay so you can also rename this one now after this I am going to Define one variable okay so let content and here I am going to use this like each loading first so if there is loading so I am just going to give here like content and I'm going to use here V tag you can just give a simple loading with three Dot else is success that means we have got our data from our Json server so in that case we can show our all to do that we have in our DB dot Json file to content equal to and I'm going to use here like to do's dot map and here I am going to use to do and let's user return I'm going to use your fragment and I'm just going to cut this piece of code okay so let's cut this one and I'm going to paste it here so at the moment everything was hard coded so I'm just going to remove this one okay one place item I'm going to remove and here I can give like to do t title so you can see that in db.json we have a title okay now just save this one and we are also going to have one more health so and if there is any kind of error so we can just simply show that error in a keypad and let's use this content here uh below this div okay let's use content here and let's save this file and let's go into the browser so now you can see that we are displaying all the to-do's that we have in our DB dot Json file at the moment it's showing like all to do got completed so let's put a check here in app.js file so so we have to use here template literal in order to apply that so here we have to change this one so if to do T completed and I'm going to use your styling class name that is checked else it will be empty extreme so now let's go back to browser so now you can see that it's working so only if this to do is got completed as per hour DB dot Json file so we have successfully able to fetch the data using our very first article query in this application now next thing I wanted to apply mutation in this to-do's app so I am going to write mutation here inside our endpoint for adding updating or deleting the to-dos so here what we can do I am going to write a one method here like add to do and Builder dot mutation so this time we are basically adding a new to do so we are writing here mutation so this is difference here okay so query is used for fetching the data and mutation that means we are doing some changes in our db.json file whether we are adding new to do or updating it to do or deleting existing to do so all these things come under the mutation so here we have to mention mutation and inside this again we are going to have object and again we are going to use your query and for adding the to-do we are going to receive a new to do from our component so here we have to specify here to do and then here we have to provide URL so this time we are specifying the URL but here we have simply passed the URL in this Arrow function so this is the same thing here we are just dealing with fetching the data from our db.json file but here we have to pass some more parameter that's why we have to go with this way and here again we can mention this path that is produce and here we are going to specify method as well so we are making here post request and in the body so we have to also specify body in the body we are going to pass our new to do so this way it's gonna add our new to do in our Json server now let's save this one and you will notice that this time it's going to expose a different custom work based on this method so it's gonna expose use add to do mutation because we are updating the data in our this DB dot Json file now I am going to write mutation for updating the to-do's as well so I am just going to copy this one and and I'm going to just change this method to update to do but this time URL is going to change here because we have to update the to-do specific to those based on the ID so I am going to use here template little so let's use that one so to do dot ID and here you can use method like patch or put so patch basically is used for updating the RCL information and put basically is used for updating the entire record so you can use either patch or put and in the body again we are going to provide this to do for updating the specific to do now this will again expose a new hook based on this method that is use update to do mutation now I am going to write one more mutation for deleting the to-do so delete to do Builder dot mutation okay and here I can just copy this one okay and this time we are going to receive just ID from our component so we can do structure ID like this way and here we have to just delete the to-do based on the ID we can just pass here like ID and the method will be delete and in the body we have to just provide ID okay now let's save this one and of course a customer for our delete to do as well so use delete to do mutation so we have write our mutation for adding the to-do updating the to-do and deleting the to-do now I am going to use all this mutation in our component so let's go over to the top and here I am going to bring that is add to do mutation then I am going to bring use add update to do mutation and use delete to do mutation okay and here we are not going to expose this property like this way that we have done for this use get to Do's query because we are updating the things in this db.json file so whatever the method we have defined here like add to do date to do and delete to do we are just going to use them okay so here we can just do like this say add to do because this method we have defined inside our API slides.js file and this will be update to do and this will be delete to do okay so let's format this one and first I am going to add our very first to do okay so here we can use that add to do and you can pass here like title and we can pass here this to do so you can see that we have defined a local state for capturing the to-do so you can see that in this input field we are setting this to do and we are just passing that to do in this add to do I hope you are getting this and by default I am making this computed to false okay now let's use this other two method as well so for deleting we can use here one on click method so on click we can use your delete to do and we can pass ID so to do T ID let's format this one and for update the to-do so we can pass here one more on click method and here we can use our update to do so here we are spreading out our to-do and we are just updating the completed okay so here we are just doing the opposite so if it's true then it will become false if it's false then it will become true let's format this one okay and let's save this file now it's time to go back to your browser and see whether it's working or not so let's go back to browser I'm going to just refresh this application okay so I'm just going to give one to do here like eating Apple let's click on ADD so you can see that here our to-do is not getting added in the to-do list and if you try to click this one in order to more completed so this is also not working and if I click to delete so this is also not working so let's understand why this is not working so let's understand the situation here why it's not working after applying mutation so we have to head back to our our API live so what is happening over here like our results got cached and we are not invalidating previous cash so that's the reason it's not showing our new changes in our app so if you refresh this application then you will able to see the latest changes okay so you can see that we have added this eating apple and we have marked this first to do to complete and we have deleted one to do as well from our to-do list so you can see that after refreshing the application it is working as expected but it's not showing our changes on this part by adding to do or updating to do or deleting the to-do so our result got cash but we are not invalidating the previous cash so this is the reason it's not showing our new changes so what we have to do over here so here we have to specify tag types okay and here we are going to give to Do's okay and inside this get to those we have to mention like provides tags okay like this way after this what we have to do so we have to invalidate the to-do cache to this Builder mutation so here we can give like invalidate tax so by doing this it will basically automatically refresh data for us so here again we can mention this to those okay and we can apply this invalidate tag to all mutation okay so we have applied this invalidated tag to other two mutation as well now we can save this file and we can go back to our app again and just refresh this one okay so I'm going to add one more to do here like flipping so you can see that now we are able to see our changes without refreshing the application so now you can see that we are able to see our added to do at the bottom and this time we didn't refresh our app and if you click on this any to do so it will Mark as completed so you can see that this is also working and you can also perform the delete operation as well so by clicking on this text Mark so it's going to delete from our to-do list okay and you have also noticed that here for partial time it's going loading so you might not able to see the loading so we can see that loading by making a delay okay so we can use here like flow 3D okay and then you will be able to see the loading as well so you can see that we are able to see the loading so let's revert this one okay so we have performed all the basic rtk query operation on this to-do list so this to do app is almost completed and you have noticed one thing like whenever we add new to do so let's add one more to do here like waking okay waking up so whenever we add new to do it's adding at the bottom but we wanted this to do at the top whenever we add new to do in our to-do list so let's see how we can achieve that one with rtk query so to achieve that one uh we need to basically transform our response so you can use here like transform response and we got our response and here we can write a basic sort method okay and we can pass one callback method to basically sort our data so B dot ID minus a DOT ID so this way you can also basically transform your response so let's save this one okay and let's go into the browser so you can see that already this waking up got moved to the top and if you add new to do like having lunch something like this and if you click on ADD so it's going to add okay at the top so you have also saw like how you can transform the response so I hope now you have got some basic understanding about how to work with rtk query in a react application I hope guys you have learned some very important concept around reader toolkit and article query with these two project so that's it from this video I will see you in some other interesting video till then goodbye and take care

Channel: CodeWithVishal

Views: 2,224

Keywords: Redux-Toolkit and RTK-Query, redux-toolkit concept, redux toolkit project, redux toolkit in react js, redux toolkit, rtk query redux toolkit, rtk query project, rtk query advanced, rtk query react suspense, Understand Redux-Toolkit and RTK-Query, Redux-Toolkit Beginner, react rtk query example, Redux Toolkit Complete Tutorial, react redux-toolkit, react rtk-query

Id: rNc_MEf2MMU

Length: 88min 32sec (5312 seconds)

Published: Thu Sep 21 2023