72. Design Create Post form and submit post data into database using redux thunk in React - ReactJS

hi friends this is leela welcome to my channel leela webb dave in this video we will try to create a post we will try to create a post form we will design a post form and we will try to submit the post uh submit the post into the database using the red x tank now let's try to create the create post form so here i am going so here we will be having that one so one second where do i be opening and here i'll be having one form in this form we'll be having one input so one label title and for the title we will be having the do so that input type is equal to text and the class name we as we are using the what i can say tailwind css we can have border we need to mention the border border hyphen gray iphone 500 let's try to keep it like this let's see the output how it will look like afterwards we'll create afterwards creating the text area so here this is the description so this is the description and i can change it to text area sorry text area and we can remove this one all so now we are having like this and i can have another one finally button type is equal to submit this is the button so what i can do to create post i will add create post okay so while adding the create post what i can do here we will add a class name so class name is equal to pxi function py hyphen 1 bg hyphen red hyphen 500 text iphone white whatever the thing you want we can give it so design is not our friday great priority so now the form looks like this one so the text area and the input box is somewhat looking weird so i will try to increase the and here i can do something like w hyphen full so that it will take the entire screen and width it will take sorry so here also i am keeping now if i try to say it's fine right so somewhat it is looking fine so let's try to add some if i am adding anything so it is coming somewhat weird so what i can do so inside this one i can write something like p exception one and here also i can write p x hyphen one okay we can mention the height also high type one something like uh 28 or something like this so let's try to see the output how it will look like yeah fine right so somewhat it's okay so what i can do here so let's try to give some class name is equal to mti fun2 okay or otherwise my iphone 2 so the top and bottom here yeah so now i am giving the title and the description when i am trying to give the title in the description we need to submit it in the back end through the redux thunk so now what i will try to do here we are having so let us create with the capital okay so now here i can give constant title set till oh sorry set title is equal to use state of empty first time it will be empty so next one will be description so let's create a description state also description so here i will be having description find right so two state variables i am creating the two state variables and here i can come to the input and here i can add the value control components these are you need to remember so here i can write title and here on change i can do on change is equal to so this one will be something like i can add set title title of e dot target dot value so we'll be having the e dot target dot value and we will be getting the target so here this e will be having this one as a parameter the same thing we can repeat it here automatically as a control components so here i can go description these are all things we have already discussed in our previous videos so that is the reason i am not explaining anything so we are going on directly writing the code set description of e.target.value so now we have said that so whatever the data we are changing here it will be stored it be storing in the respective title and the description variable now state data so now what i will try to do here i will create a on submit okay on submit is equal to so on create form okay on create post i can add something like oncreate push let's try to create a function here at the top on create post how it will look like so here i will be creating function on create post you will be having the e as a synthetic event so now e dot prevent default okay so now here we need to dispatch an action so that is nothing but dispatching we can use in another thing uh instead of using this connect wrapping the function have using higher order connecting we can also use something like constant dispatch is equal to we'll be having a hook for this one use dispatch so this should be imported from the react redux use dispatch and now here what i can do so let's frame the data constant post data is equal to we'll be having title and also description so i am taking the type sorry description okay so this is the post data now let's go to the post actions so here here is our post actions right in this post action i will be calling this create post action okay i will be calling this create post action so instead of having this create post action so whoever calls this action so we will be having uh what i can say here we will be having written uh dispatch so here we will be returning the dispatch and we need to call create post okay so create post we don't have so let's go to the services and what we can say post service i can write something like export function create post so let's take the post data here okay so post data it will take and the same thing what i will try to do is i will try to write here and this one will be the post action and here let's try to send the post data okay so that's it so we have created a service create post so now let's go to the post action here i will be using this create post so now this one will be imported from the here from the services create post off so here you will be having host data we need to send that post data and let's send this post data okay so when it is submitted then we get the promise response so just we'll try to console.log response.data that's it right now we have dispatched an ad so we have created a post action now let's try to call it here uh dispatch post data we are having so now we can use dispatch action and you can call create post action okay we need to send the data so what is the data we need to send here post data this is supposed right so we will be sending this post data that's it so now let's try to take this one create post action yeah that's it so now after dispatching this action what we need to do we can move something like props dot history history dot what is that one ah history dot push to slash pose so we can we can after completing this one we can push it now if you try to see the output so now if i try to refresh this one it will work not a problem so i am trying to create a title description sorry hello world i will try to create hello world or something like this okay so now here i am trying to create hello world and i will try to create a post if i am try if i create a post it went to here but here i am able to see only dasd something like this one only i am not able to see the hollow world when i try to refresh this page let's try to see and i try to refresh this page now i am able to get this hello world c so what is happening here what is happening is so here we got something wrong so description value description yeah we are trying to set correctly only let's try to see yeah so now what is happening here so we are dispatching an action so without waiting for the success we are we are going to the we are pushing back to the old page so what we can do here is so let's push this props dot history okay so to that place and so that post in the post actions you will be getting another parameter nothing but the let's think that it is in history so when this one is completed you can do history sorry history dot push history dot push off slash pose so here after getting success only i'm pushing this one now if you try to see the output let's see how it will look like so i am refreshing the page up to now here no problem now here i am creating so hi so hi leela i am creating now if i try to create a post so it will create a post and it will go obviously i really am able to see but i don't know why this description is not coming so let's try to see whether we are trying to submit the description or not the post data we are able to get so let's try to see here the post data title and description we are having set description we are having this one like this so here in the text area value is equal to description we are populating and on change we are writing oh for the button we have written on change c so my mistake this one so we need to write for the text area right so i think hope this one is correct let's try to submit it again for the final time so this is the final time so it will work i hope okay so this is the post i am creating let's create the post perfect so we have created the title and the description both are coming working fine so this is how we will be using the using the redux thunk so we were posting the creating the post so in this way we will be getting the post and also create the post so for example if you see we are able to see one one improvement we can make it so if you try to see the code if you try to justify it you will you will be able to observe that we are using the redux library right so we can do we can do some improvements also for example i am creating a post here i am not making any calls but i know that the posts are already i called it from the database and and i have it in my store but now when i am trying to create it again on store okay so here okay fine so post action we can make it but after moving after going back to the post page i already have the data with me but still i am making and unnecessarily getting all the posts again so if it is better that i already have the post in my thing in my in my store so just after creating the post just append that store append that post into the store me so that there is no need to call for us the again the post thing post json right so let's try to do the refactoring in the next video i hope that you understood about this think library how to use this redux thank library for making the post request creating post also and also after submitting that one so redirecting to the home page also we have seen redirecting to the post dashboard pair also we have seen so this is how we will be making the uh create a create a create post thing okay if you have any doubts or any suggestions please post the comments below to this video and if you like this video please do support me by subscribing to my channel thank you

Channel: Leela Web Dev

Views: 1,109

Rating: 5 out of 5

Keywords: leelawebdev, leela web dev, react, react tutorial, redux, redux tutorial, react redux, react redux tutorial, reactjs tutorial, redux thunk, redux thunk tutorial

Id: MYAKjpdya2s

Length: 12min 24sec (744 seconds)

Published: Tue Mar 09 2021