CRUD Operation with Redux using MERN Stack | CRUD Application using MERN Stack with Redux

hello everyone this video is about card operation we're using Redux and but in the Technologies are the Marine stack okay we will use mongodb for the database react is for front end and also the node and express for a server side code okay we will use Redux toolkit in this video and also the modern stack so let's this is the demo that we will perform okay let's first of all create any user new user for example new at gmail.com and it is like 45 let's submitted C then every card has submitted okay so let's for example update this one so let's add update and also Edge chain to the 40 let's press the update button yeah updated see the record has updated okay let's press the delete button that has related so it is a card operation using redacts in modern stack so let's get started before starting if you are new to my YouTube channel don't forget to subscribe it and also like this video and comment down so for this card operation with Redux using modern stack so first of all we should set up our environment we should create our react and server site up so this is the steps that we should follow for creating the apps I have already created the theme okay first you should come in the terminal to the crack folder okay this is an empty folder then you should follow these commands Okay run these commands Okay after running these commands and install finalities uh packages inside that folder and the client which you have created okay these are the reactive data for routing bootstrap access par HTTP request and response and react attacks in the Dax toolkit for these are for the redox then we should move in to create the server side up so for the server side I've again come in the terminal to the card folder then create a new folder for example the by the name of server then run this command inside that and after that run these install these packages Express uses the framework approaches Mongoose for mongodb database cars for to access our apis inside the front end a nerdman which is used to refresh our server side of automatically whenever we make some changes then create a file inside that okay like this okay this index.js Creator file and inside this file you will write our code so this was about the in creating our front end server side app so now let's move to um just come here to the front end so in the front end first of all we will set up our um redx okay the redax spoiler Fleet code that we need okay so for the attacks as you know that the Redux is a state management tool so for that first of all we need a store okay to create a store where we want to store our data so for that let's come here to the SRC folder inside that I will create a new folder by the name of Redux and inside that let's create a new folder store.jsx here I will add the code of Redux store so here first we will import configure store from array Dax Redux is toolkit after importing this let's create now const X store is equal to configure store so let's call this and inside it we will just Define our reducers after defining it so now let's here we should assign our reducer so okay the register that we are creating so we should assign them here right now we didn't create that we didn't we don't have the reducer so later I will import that and I will add that here so now let's export it store this is our code for the store which is you need for every project in the project you need to use the Redux okay so now let's write our store okay our we will just create a slice for that and we will write our code inside that let's name it for example user slice.jsx so for this user slice here we will Define our actions in reducers so let's first of all import the slice slice which is the create slice from Redux toolkit okay after importing it so now let's write it and Define it first of all let's write import user slice sorry I wrote import it is const user slice is equal to create slice and inside that it we will Define now the properties the first one is the name that we should assign to this name is for example users and the second one is the initial State okay so I will just Define that here or I can directly write that here initial state and in the initial State we have users it is an array in empty array with this because we would like to store records of users inside it and after that let's refine our U reducers in the reducers here we will Define our actions what we want to perform for example we would like to fix the record delete update all those methods we will Define them here later we will export them okay just export here I should write the name of the methods that I am writing here I will write them later okay inside this reducers from oh sorry is equal to from user slice dot actions I will export all those methods okay let's write here cast also yeah here I will write the names that I am those methods which I am writing here later I will write them okay and also let's export default user slice dot reducer also export the reducer this radius are now AV will import it inside our store import user reducer from user slice okay now let's write it here let's assign an imp to our store for example the users and let's write user reducer it was the code the boilerplate code that we need in every project okay so after defining all of these so now let's move to our index.js file okay this is our main JX file in this main.jx file I will wrap this up through provider okay we should now export import the provider from a reacted X so let's import that Provider from react Redux this provider means whenever we wrap the component throw from this provider okay all those components which are inside this provider will access the store okay this store will access that store so let's write it here provider how many components we are writing inside this provider those all components will access the store and also let's write store inside this provider first of all we should import the store from my Dax store.j6 and let's pass it here now okay so all components which are inside this provider will access this store so now let's move to the up.j6 inside this app.jsx now we will use yeah before this lets move to the user component I have created this company so these are empty components in this use the component we will pitch all records from our database from mongodatabase so let's create this component user so now let's try the code here in this used component we will display the regards okay in a table so for that I will just write the HTML simple HTML code okay in our so let's import the bootstrap for Designing purpose import bootstraph I have installed the bootstrap yeah after writing this so now I will just write the code to display the users inside a table yeah this is a simple HTML code where we would like to just display our records okay I have just wrote a button where whenever we press that we should create a memory card through that and this is the table okay that we have created this is the header of the table now we will whenever we fix the records from the database we will display them here okay so now let's run the server how it looks like so let's just delete these I will just create a new one and let's move to this client folder first of all CD client and let's write npm run due so it will run our react app our react server now let's move to this URL yeah here right now we don't have anything let's import our export our users that is already exported so let's import it inside the app.js6 let's write that here that is okay so now let's check it okay yeah it looks like this okay so now let's pitch the records and display them here so to pitch the records whenever we pitch the record so we should store them inside our store okay inside our store okay and we should store them here uh then we will pitch theme from this Redux store and we will display them inside these users so first of all I will show you the database the mongodb database so let's come here to the mongodb compass yeah this is the mongodb compass which I have installed and let's connect with this localhost after connecting we will use this database inside that we have these users okay these are the records that we want to pitch okay these three cards so now let's switch them so to fetch them so for that I will just write some code here I will call use effect hook yes effect hook will rendered at the first time whenever we run our application so let's create a function here const which data our users is equal to this will be in a row function and here let's call um we will use axis Library here to call our server side and fix the data from that let's write counts to response is equal to we will use axis Library so let's first of all import the axis import access from axis and let's use it now let's call that git method and here we will write our URL so right now we don't we didn't set up our server side so I will write the URL later okay so now let's move to um let's call first of all this method fetch data wow and this will be a same current function async and here we should try tablet and also let's use try and catch black for the error handling so now let's move to our server side up and we will set up that and we will add the boiler Cloud for that boilerplate code first of all for that let's come here to the server app inside that just come here to this index.js file so first I will write the code that we need for every project I will just write that code so this is the code that I wrote okay first following imported these three then we use name this just I will explain you this sentence this sentence means that whenever we pass data from our front end so that will be converted to the Json format so here we run our server so now let's just run our server okay just come here and let's take a new terminal and let's move to the CD server folder inside that let's drive npm start yeah that is running okay server is running okay one thing else that let's come to the package.json file so before we install nerdman okay we should write like this okay start is in the script area we should try start start not more index.js index is our file okay we should like write like this it will automatically run our application whenever we make any some change in our in this file so now let's write the API to fetch the records so for that let's write app.get so first we should create connection with the Mongoose database okay so to create connection with the mongodatabase let's write mongos dot connectivity just write simple connection so here we should write the connection string so for the connection string just let's come here we should use this connection string okay copy connection string come here and just paste that here is not working but you you can write like this this one so this is the connection with that so now let's write the database okay with the which database we would like to connect create connection so let's write the name of the database the name of database is correct okay before I display you I showed you um this is the credit database okay that we should create connection with that after creating connection so now let's create just the API uh to fit the records before fetching the records we need to create a model for our table okay for this collection we need to create a model in the mongodb we need to create models for every collection okay so to create a model so let's create a new folder for that the name of that would be models and inside that let's create a new one that would be user user.js okay inside the user for the palette import const mongos is equal to require mongoose and after importing the so now let's um create our schema okay const user schema is equal to a new and after that let's define our schema the fields that we want in that table so we want to just Define name field for that name is string with a string type and email which is string type it as and also the Edge Edge is number with us after defining them let's create a model from that const user model is equal to Mongoose dot model here first we should Define our mod collection okay table name if you don't have the table in your database so it will automatically create but right now we have that so let's assign a name to that users and here we should Define the schema user schema after defining game Let's export it now module that exports is equal to user model so now let's import it inside our index.js file just come here import it const user model is equal to require model slash user now we will use this smart user model to just pitch the records or updated delete whatever we want so we will use this user model for that now let's write the API app.get so here let's define this is just for to fix the records we will not specify any name for that and here we will get request and response and let's create this method in beta so here let's uh fix the records okay so picture so to pitch the record we will just use user model DOT fine we will use find method we have other meters where the find is used to fetch all the records that then we will get users so let's return them response dot Json return the users so it will turn all the users to the front inside that cage if there was any error so return result digestion here so now let's move back to our front-end side here we should specify now the URL okay the URL would be http was it localhost then let's define the fourth the fourth was three double zero one okay this is the fourth number that we have okay three double zero one and after that we didn't specify any route for that let's see we leave it empty so then we will get the regards from our server side and we will store them in the response so now let's just um send those to the users to this store okay to store store them here so we will send them okay we will just create a method action here so that would be like git users okay so let's create that it user let's create this action so here we will get just state end action so whenever we call this method okay from our front end here whenever we call that using dispatch so whenever we dispatch this so this state mean the state that we have okay these users that state that we have this is that state and the action is that the the data that we passed and we will get that through this action so now let's do it okay so how to assign the data that we passed to this user okay so let's pass first of all the data from our users so to pass that we will use a use dispatch so let's import first of all that use dispatch hook use dispatch from react attacks after importing that let's create an instance of that this patch is equal to use dispatch just call it after calling this method now let's use it so to use it let's just write here dispatch so to dispatch it we will use that we will just call dispatch that action okay that we have here in this user slice okay this one this get user so let's export it first of all get user and now let's import it here git user from user slice after importing it so let's write it here get user and after that we will pass the data to that response we will get response.data if you are not sure how to write this so just console it first of all check in the console in the response it will show you all the flows so then just you will see that we have data there in the data we have our data that we pitch from the database response.data so it will just pause this data to this action just come here to the user slice and we will get that here so now let's update our this users okay to store the data there so we will simply just use my function for that so to store the data inside this user we will just write state dot users is equal to action dot payload dot map function we will go through all those records here we will get a user and now we will just store that user data inside this okay we will get every user for example you have indic cards we will get 10 records so then we will store them inside this so let's just try it like this return first of all id id would be user Dot idea okay this is the ID name in the the database okay then let's write name and we will get the user.name from database then write email we have these fields there user dot email and after that age user.h so it will update our state so now let's get this state okay the data that we have updated so now let's get that inside the user and find them on the browser so for to get the data from that store from our red X so for that we use um use selector okay so now we will use this use selector so let's to get the data from this use selector we will write like this accounts to users is equal to use selector we will get a state here and from we will get state dot users that users why I wrote like this this is the name of our store okay store okay store users then we will get this user's data okay this user's data from that store so after getting that data so now let's print them use map function for that let's come here to the T buddy inside it will I will print that now let's try it like this users that map will get a user here now let's print that table D let's write user dot name you will just print the name email and age and for this action we want to just display two buttons for a bit and delete first one is for the delete let's write class name for that in button button SM button these are both soft classes Danger this is for the update yeah so now let's move to the browser and how it looks like so let's depreciate what we get in the result we didn't display the data so let's move to the console what where is the error we don't have anything right now here so first let's print it so let's write the console and we will print first of all this data that we are getting is there anything in that or not what we get in the response so let's check it where is the error cannot read properties of undefined leading users it means that user is undefined okay there is no store and there is no data inside that so let's come here and just remove this one sorry this is users start users okay just let's come here now see it now where is let's repeat it so we got this data okay we got this data inside that but we continue just VD we can't display that in the browser where is the hero let's check it now and just come here down a user dot map oh you hear we should rewrite the return statement yeah see we just displayed the regards we have these 3D cards in the database okay these three records we are in the database and we display them here on the browser so it was all about fetching the records so let's just write one class here margin 8 would be 2. for the space okay to take a space so it was all about fetching the records and displaying so now whenever we press this add button we should um add a new record okay so let's add first of all a routing to our front end so in our office we should move to a new uh page so for that let's come here to the app.j6 we will set up our routing using react auto Dom import first of all browser router routes and route from reactive after importing them so now let's use them so for using them let's just try it browser router and inside that let's define routes and also let's define route inside that the route we have to properties parameters the first one is the path path would be like for the users okay for this user that we have created right now so for that we have just this Home Route and the element would be is equal to element is the users so this was for these users and for the create let's create a new route that would be like create and this would be great we should what is the name of that so let's first of all import this create user let's write something inside this create user and now let's come here and just write create user we will import that that has imported and now let's see that create user so let's come here now to the user page back here we will just come here to the top to the button okay in this button we will change it to the link to the react auto Dom link let's import it from react Auto down and here we will specify a property that is 2. is equal to we should move to the create route now let's stick it okay just let's press this button we came to the Creator user so now let's write the HTML code for to create a new Forum okay three that should have three Fields name email and age just come here to the create user I will just create a forum inside this okay yeah I have created a forum that has a three Fields name field email and age build so let's check it it looks like this okay it is simple just HTML code with bootstrap so now whenever we write something inside this input field we should store them in the variables let's create the inputs of all let's create first the const for a name set name is equal to we will use U State hook we will create the states and the state has imported now let's create name for email said email and age we have these three Fields so now let's store values in them so whenever we are writing something inside this so let's store that in that name okay so let's call on change event on change event you will create an arrow function and it's called set name set name e.target whatever we are writing in this input field so that will be stored inside the name so let's copy this one okay and same to this we will do for the email just change this to the city email and also we will do the same for H let's paste it here and let's write sit h whenever we store the video and we press the separate button we should call the function so just come here to The Forum the top and just call unsubmit event handle submit let's create this function now handle submit is equal to elegant event so let's say that prevent default function and also now we will just pass our data into the database and we will store there so to pass the data we will use access Library again access let's import it that has imported that post we will use post method now and the route would be let's define the route so that would be http localhost localhost and the route is 3001 and the router and the final route that would be like create and here we should specify in pass our data the data is the name email and also the edge but then we will get a result let's print the result catch if there was any error cancel that so it will just pass this data to this create route so now let's create this create API okay so let's move to the our server file here we will create that app dot post and the route is clicked with us and here we will get a request and response and after that let's create we will use user model to add a new record user model dot create we will call create method and we will pass request dot body the data that we passed from front end that would be inside request.body that then we will get a result uh users okay user and FB and created successfully so just response.json I turn the user dot cage if there was any error so just response.json return the error so let's come back to our create user so now we just want to just one thing else that I should do that let's move this user component in the user let's move this code the pitch API okay this use effect let's cut it and move to the after jsx file okay of the j6 and let's paste it here at the first time we want to render our data and let's import import use effect and also use sorry react axis and also let's say use dispatch from reacted x one thing else that is git user action so now let's create an instance of let's copy that one yeah this one let's cut it let's come here and create that here so we imported all things yes okay um yes get user response data and let's save it and it's also remove this one let's store it like this this was in the user users so yeah let's remove this git user use dispatch and access and also use it back to all of this code and now let's come back to the create user so whenever we return a from our server side okay whenever we create that that will return a record back okay so now we will add that record to our store okay today attack store so to add that let's come here and here we will just call first we will create a method in our user slice here by the name of um heart user State we will get an action and here we will just use we will just put push that record to this state okay to this variable to the users so to push that state that users dot push and action dot payload you will push that record to the users so after let's come here we will just call that uh from here okay just this add user we will just call this action so first of all let's import it add user so yeah if you didn't export that just come here and Export it get user and let's write add user and just come here now and import that add user that has imported in there so we should import a use dispatch to dispatch that back uh yeah that is the case so let's use now the dispatch yeah const dispatch is equal to use dispatch okay and just come here now we should throw that let's write dispatch and pass a result.data it will just pass this data to that yeah we should call okay sorry add user we should call that and pass the data to that in your repair status one if the card will be added to our Redux store so now let's check it okay to add a new record so let's press this add button yeah we came here and let's write new user and here right user at gmail.com and here write 44 the edges like third 23 let's press the submit button uh the record has not added so let's check where is the error just come here to the console in the console uh where yeah yeah the record has added I think but we should move back to the home page okay we need to add a new record so we should move back to the home page so just come here so far to move to the home page we will just import use to navigate use navigate from reactive to Dom and after that let's create an instance of that const navigate is equal to use navigate and let's use it now let's move back to the we will not print the data and just try to navigate and just go to this home route yeah so that is okay now yeah I think yeah the newly this is the new user so let's press add and let's write like a save passive gmail.com and also the hs8 let's resubmit now see a new record has added here so it was all about adding any record so now whenever we press update button so we should um we should update that record so to press this update button let's move to our code let's come here to the users and to the update button yeah here we should convert change it to the link react auto Dom link that is from and let's add property F2 is equal to it should move to the edit okay and also we should pass the ID to this so to pass the ID let's write like this okay slash a date slash here we will just write our ID the ID is user.id and now let's move back to the link is imported here we have imported that so now let's create this route inside app.jsx just come here and copy this one and just make it a date and we will get an ID here and let's change it to the update let's come here to the update update user and Pepsi and update user yes so let's write something inside this up to date just come here and write instead of Click user with light update a user here yeah let's check it now just come here let's press the update button see we came to the update so now let's write the code for the update for the update we have we should have the same form as we have for the create creating a new record so let's just copy whole code from this yeah I will just copy this code from create user just copy this code look at that the functionality is the same okay we have the same forum for that and let's paste it here and just change this to the update and also just come here add user instead apart we should update it update user and let's copy the states variable here we should copy these variables and also we should copy these yeah we should copy all this code copy this code because we we need to write this code okay for the update also and just come here and paste that code here and let's import all the things that we have copied copy this one and just paste it here I will explain right now okay so whenever we come to the update we should have a forum as we want to create okay in the Forum in these in foot fields in the email name we should have the data that we would like to update okay so to get that data so for that data we need to access our data from our store okay Redux store so Access Data from Redux store just let's um let's import a new selector use selector and yeah you selector as imported so now let's import our data let's write const users is equal to use selector and inside the U selector we will store it and we will get state DOT users dot users whenever we get users from from the data so after that let's get the single user that we would like to update this and ID okay so we have passed a ID to this update component so let's get the ID so to get the ID from the route we should write like this const ID is equal to use param hook okay use Forum hook we should use that is a react auto Dom hook and let's write here a const user single user is equal to and here I will just write users Dot users dot find um index Point by index or just find okay and here I will write user U dot ID was equal to equal to be the ID that we have just extract get that ID and get it to us that record which has the same ID okay and let's cancel the user console.log user what we are getting in the result so I hope everything is okay so let's move to the update this is the update one let's move to the console what we get come here and we got this object okay we got that the user okay that we would like to update okay the same object we got that okay just the idea everything is okay so now let's just write um we would like to update this name the this field I would like to write the default value for this that would be user that name and user Dot email and also user.h I think it will work yeah that is okay ID okay so let's come here now just I should um whenever we come to the update let's add value is equal to with name and here to the email just write value is equal to email and when we come to the edge we should write for the edge also is equal to H let's check it now see we have the data that we would like to update okay so now whenever we make some changes inside this so we should update that Arif yeah let's update it to Salman and this one also to Salmon we never replace this update button we should update the record okay by pressing this button we would like to call a function let's come here yeah here to The Forum handle update we should change it to the handle update button yeah let's move back to the function and handle update just change this handle update here we just want to update this record okay so instead of a post we will use put method okay put and we will just create a new route for update and also we will pass ID to that the ID to write the ID plus the ID that we have we have pitched from our route okay this one this ID and also we want to pass the updated data this is the updated data name email and age and just come here down so whenever we update the data we just want to update that inside our um Redux store also so before updating in the redact store let's first of all write this route this API in our server side just come here we will light up dot put hair down and laptop and our route is update slash we will get an ID and also request and response and let's create it so to update a new record we will just use um the put method for that okay so before calling that method so let's first of all grab the ID that we have here okay from the URL so let's write const ID is equal to request dot params dot ID okay we will just grab the ID from the URL and now let's update the record so let's let's write user model dot find yeah fine let's find by ID and update okay we will call this method and inside it first of all let's define the column in the table that is ID and we will pass the ID that we have and after that let's pass our parameters our new Fields so let's update the name first of all name is equal to request dot party data name and also email is equal to request.body dot email and let's update the age is equal to request.body.h and after that let's call um dot then we will just get a user let's return that response.json return the user that cage if there was any error just response.json here yeah we wrote the API for the application so now let's write the um action the reducer in the user slice for that okay method for that so that would be a update user state in the action and we will update the record okay so let's pause first of all data from our update user so to pass the data we will just first of all export this one this method get a update user so let's write update user and let's import it here right down here add user and let's update user and just come here we will use that now instead of our user let's call update user and we will just pass the data okay the data with us is name email and H so now let's update the data the user here in the update user method we should pass from this update user the ID also so let's pass the ID uh yeah let's write like this ID is equal to with ID that is the same okay yeah let's write it the same yes so now let's come here so first of all to update a new record and let's just write like action I will just find the ID index const index is equal to action dot payload Dot and let's write find index method which is used to return the index of that object so we will just passed x x dot ID was equal to equal to with the um action dot payload dot ID so before this let's first of all console yeah let's leave it okay we will just check it later so it will turn just the index of the items okay so now let's uh update our data yeah but here in state of action dot preload we should write state DOT users state DOT users okay we will bind the index of the record that we want okay based on that ID and now let's update that okay so to update that let's write state DOT users index is equal to Let's assign a new object action dot payload sorry control City pay load Dot name and let's write email and also the age let's change this to the array and let's change it to the area Okay so it is like this uh so now let's check it okay so what happened so we will just check it right now right let's move to the yeah we paste with an error so let's check where is the error yeah it says that cannot reach properties of undefined reading name at update user so let's move back to else appreciate and let's press the update and let's press it to Salman Khan and let's press update button what we got we got an empty result it means no record let's check the database is it updated there or not yeah here updated the name is updated in the database but in our um this Redux user we have in error here let's see if there is a hero just come here the naughty properties of undefined reading name at update user yeah let's check it out update user yeah in the update user when the trail line number 12 come here and line number 12. yeah we paste with this error user.name it means that it is undefined yeah the problem in updating the record in user in the Redux in the store was that instead of this writing array we should write like this okay first of all we will change it to the object and after that we should just update our data like this okay let's first of all update the ID example action dot below dot ID and also let's write name email and also h so it will update now the data in this store okay so in the database we saw that we we were able to update the record yeah let's close it and let's for example update this instead of this Salman Khan let's write arip and let's update it see we updated This Record see it is the Salman Khan has changed to the Arab so the last functionality is the delete when you will paste this delete button so we should delete the record let's submit one another one change it to the and let's see for example and let's press the update see that has updated so let's come here to the users and just come here and let's make it whenever we click on this delete button so we should delete that record so let's call on a click event on this and click and we should create a function and we will just call handle delete and we will pass the ID user.id to that let's create this function now handle delete just come here and we will create it const is equal to we will get the ID and here now we will use axis to delete our record so let's use axis for that axis dot delete you use delete method and here let's write the URL that is http localhost input is three double zero one and the URL is delete user and also let's pass the ID plus ID and after that yeah just pass the ID dot then we will get a result and let's cancel that clock result dot cage if there was any error console.log here and let's create this API now just come here and let's create it and just called up dot delete and here delete slash ID request and response let's first of all get the ID cast ID is equal to request Dot for ROMs dot ID and after that we will use user model to delete the record let's use user model data find by ID and delete and after that let's pass the ID this is the database side ID and here we should pass our own ID that then we will get a EU response let's return that response.json return the response no gauge a response to Json error so it will delete the record and now let's use create an action here for to delete from the store delete user State interaction so to delete the record first of all let's get the id const id is equal to action that payload dot ID and after that let's use state DOT users Dot and that user is equal to State DOT users that filter we will use filter method filter filter and we will just U dot ID was not equal to equal to with the ID that we have okay just put all assign our loser card to State ad user which has not okay just without that record that will pass the ID assign early card to State art user and let's move back to our users component and here um handle delete we should call that dispatch okay delete user yeah we should export that first of all just come here to the user slides and just export the delete user delete user just come here delete user and also use dispatch that is also put it now let's write const dispatch is equal to use this page now let's use it just come here and call dispatch and call delete user method and pass just the ID to that okay yeah I hope it will work let's save it and let's move now so let's refresh it let's press the delete button so I think the record has deleted but the problem is that we should refresh the page here so how to replace the page so to replace the page we will just try it yeah first whenever I press the delete button so let's cancel these records okay and Tool C ouncil.log Ctrl V okay let's save it just come here and press the page so let's move to the console and here let's press the delete button yeah the delete as we paste within axis error so let's check that okay let's check the axis error access dot delete CSS imported yes that delete HP localhost delete user plus ID we pass the ID come here after delete delete ID so the problem is in route here we have written delete user let's copy this one and just let's paste it here in the yeah let's save it now let's replace it let's press the delete button see the regard has deleted okay that has automatically has gone from the list of the records so it was all about the cloud operation so let's for example add a new one uh most uh gmail.com h for example 59 submit here let's submit it see the record has submitted so now let's update it we paste with an error we never we are updating that yeah and let's for example new new it also change it to the 50 let's press the update button uh yeah that has updated see but let's delete a record deleted C that has deleted so it was all about card operation I hope this video was helpful for you if you like this video don't forget to subscribe our YouTube channel and finally thanks for watching

Channel: Code With Yousaf

Views: 8,540

Keywords: mern stack, mern stack project with redux, mern stack project, mern stack tutorial, mern stack with redux, full stack mern application, mern stack project with redux toolkit, redux, redux toolkit, full stack, crud application using mern stack, how to work with redux application in react, mern stack with redux toolkit, crud application mern stack, mern stack crud application, getting started with redux - mern stack series - 104, react redux

Id: FOK45_sEqK8

Length: 61min 40sec (3700 seconds)

Published: Wed Jun 14 2023