React Redux For Beginners | Making an API POST Request

place so we have created tea on tax change and on submit of functions for this add user component next what we'll do is we'll create action and we'll create a reducer for this so let's start with the action add user this will get a user object here okay so we'll use the same Axios to add the user to the JSON server so we'll return a function to redux middleware textures so now we use the post method because post is to post the data so the end point is going to stay the same nobody need to pass the user object here let's console.log this can and will dispatch connection life will be adduser what you can do is we you can create a separate file for keeping this constant so that you can you don't have to write this in both the places like you're writing this here as well as you're writing this in the reducer so you know in order to avoid spelling mistakes you can create a separate file and you can import it from there so since because application is very tiny I'm not doing it very low then if the response door data also put the cache block we'll just control of it but you can also do exception handling and error handling and you can also dispatch actions in this sketch case also as well but for now we won't be doing it we won't go very much deep into this things so yeah so so our action is done we will go to the rotational with this we create a new case you we have to return the state and since the new user will be coming we have to add that new user to this users list so we create a constant users is equal to state dot users user top users contact and we will add this new user action got PU okay and really pass this users here so ask this this list of users will be appended to a new object new state object and that this is done we can call this user action where is it here we can call this add user in our user file so let us then pour connect first we poured the actions okay no we knock it down and now we'll call this Naidu sir we will pass the state so once we have submitted the data we have to set the status set this as empty like this dot set state you just copy this and paste it because we need to keep it back okay so this is done so let us just check independent so we'll add here God's tourism daily see he's a mutator stick on reducer function okay cash we need to put it outside not inside so you know status is that it has been created but it is not displaying here will you go we'll check this why it has not being created in the next video

Channel: Cross Coders

Views: 6,913

Rating: 4.7849464 out of 5

Keywords: react redux, redux for beginners, react tutorials, redux tutorials, how to create a redux application, redux middlewares, mapstatetoprops, mapdispatchtoprops, redux dev tools, why redux, reducers, createstore, combinereducers, component lifecycles, local state, component did mount, redux thunk, redux, react, tutorials, react series, redux series, redux complete tutorial, full stack developer, frontend development, javascript, javascript frameworks, modern web development

Id: -YXb03hhKh4

Length: 7min 11sec (431 seconds)

Published: Sun Apr 05 2020