React Save Form Data to MongoDB Database | React JS Hook Form POST Submi...

In this tutorial video you will learn how to do react bootstrap redux form validation, post / send form data using axios, redux-thunk, dispatch redux action creator, create redux reducer from React to NodeJS backend API endpoint on Express server, perform server side form input validation, error handling and save data in MongoDB Database and access redux store state, and redirect on successful form submission. In this example we will be coding a real life project and handle ReactJS Form submit. We will be using react hooks, react bootstrap, redux, axios, mongoose, mongoose schema, user model, react js user sign up / registration form, nodejs api, api post data useState hooks, useEffect, useSelector, useDispatch, react-router-dom useNavigate, mern stack and more/ #reactjs #api #post #mongodb #form #axios #javascript #mern

Coding Money

tags: save form data to database,react form submission,react hook form,react form,react bootstrap form,react form hook,react form validation,react form submit,react submit form,react form submit example,react input,mongodb,mongoose,axios,how to post form data to api with react js,post api javascrit,post and get api,submit form data with react js,react save form data to mongodb,formik,react final form,form validation in react js,user signup,user registration form

In this video we're gonna save form data from react js into mongodb database. we have already done input validation for this form in my last video. If you want to learn how to create  and validate this form then I highly recommend you watch my last video on my youtube chanel. youtube.com/codingMoney and find video titled React Bootstrap form validation example. It was actually one of my subscriber Anshul Manapure  who requested me to make a video where you send data to database through backend. BTW, I read and respond to all the comments so feel free to leave me a comment. by the end of this video, you will be able to handle form submit, POST data to the end point API and perform backend data validation and then saving data into mongodb using mongoose. so lets get started! 

Before we start coding, lets take a look at this diagram and really grasp the concept of what we wanna do here. so after the user fills out the form and as soon as the user clicks submit button  a function will run called handleSubmit, this function checks if the input data is valid and if it is,  I wanna call a function called registerUser(formData) with the form data passed into it as an object. 

this function will post the request to the backend api endpoint /api/users/register

In the mean time we will show a loading icon to let the user know that the request is being handled. here at the backend We will have a specific function that will handle this request and perform further server side validation , if the data is valid we will use mongoose to save the data into mongodb database and show a success message or redirect user to another page, if the request fails due to some reason we will let the user know by showing the error.

So basically we will handle 3 types of action , we will dispatch USER_REGISTER_REQUEST as soon as the user clicks the submit button 

will dispatch success incase the request was successful

USER register fail incase the request failed 

now lets start coding.

dispatch(registerUser(formData)) special function react-redux function.. redux is a seperate topic, which is beyond the scope of this video. i will explain it a bit but won't go into details otherwise the video will be too long. 

This where we left off in my last video, check that video out if you wanna follow along, i will leave card link on the screen so that you can easily find it. 

This is the handleSubmit which is invoked as soon as the user clicks the submit button, it checks for errors and if there are no errors we can submit the form by creating a function called registerUser(form) and passing form object in it. But this will not be a regular function, it is a special redux function called the action creator so to be able to call such a function we need to use dispatch from react redux.

action creator code

constants are imported from the contants file.

reducer code 

backend api endpoint code already written to save time

i exported this function to be used in routes file and i have imported the routes file into the main server.js file. 

Lets do a test, 

There you go. smsbing is a real project and i will post to youtube if you want ... subscribe..