{"id":54974,"date":"2022-05-01T13:12:09","date_gmt":"2022-05-01T07:42:09","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=54974"},"modified":"2022-05-18T13:12:29","modified_gmt":"2022-05-18T07:42:29","slug":"managing-form-state-in-react-using-redux-form","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/managing-form-state-in-react-using-redux-form\/","title":{"rendered":"Managing Form State In React Using Redux Form"},"content":{"rendered":"<p><strong>What is Redux Form?<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">Redux Form is a HOC(Higher Order Component) which uses react-redux so that the HTML forms in react can store all its state in redux.<\/span><\/p>\n<p><strong>Advantage of using Redux Form?<\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Redux Form is very easy to use and implement, we just have to wrap our form component with the HOC provided by Redux Form and we are good to go.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Applying validation to the form is very easy in Redux Form, we can apply validation to all the fields as well as validations for individual fields.<\/span><\/li>\n<\/ul>\n<p><b>Steps to implement Redux Form in your application<\/b><b><\/b><\/p>\n<ul>\n<li><b>Create a React Project<\/b><b><br \/>\n<\/b> <b><br \/>\n<\/b> <b><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-54962\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/1-300x28.png\" alt=\"\" width=\"300\" height=\"28\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/1-300x28.png 300w, \/blog\/wp-ttn-blog\/uploads\/2022\/04\/1.png 337w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\n<\/b><\/li>\n<\/ul>\n<ul>\n<li><b>Install package<\/b><b><br \/>\n<\/b><br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-54963\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/2-300x22.png\" alt=\"\" width=\"300\" height=\"22\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/2-300x22.png 300w, \/blog\/wp-ttn-blog\/uploads\/2022\/04\/2.png 404w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/li>\n<\/ul>\n<ul>\n<li><b>Creating a Redux Store<\/b><b><br \/>\n<\/b><b><br \/>\n<\/b><b><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-54964\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/3-300x276.png\" alt=\"\" width=\"300\" height=\"276\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/3-300x276.png 300w, \/blog\/wp-ttn-blog\/uploads\/2022\/04\/3.png 468w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/b><\/li>\n<\/ul>\n<ul>\n<li><b>Create a form using redux form<\/b><b><br \/>\n<\/b><b><br \/>\n<\/b> <b><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-54965\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/4-300x23.png\" alt=\"\" width=\"300\" height=\"23\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/4-300x23.png 300w, \/blog\/wp-ttn-blog\/uploads\/2022\/04\/4.png 376w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\n<\/b> <span style=\"font-weight: 400;\">Importing <\/span><b>Field <\/b><span style=\"font-weight: 400;\">and <\/span><b>reduxForm <\/b><span style=\"font-weight: 400;\">from the redux-form package.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span> <span style=\"font-weight: 400;\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-54966\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/5-300x107.png\" alt=\"\" width=\"300\" height=\"107\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/5-300x107.png 300w, \/blog\/wp-ttn-blog\/uploads\/2022\/04\/5-624x222.png 624w, \/blog\/wp-ttn-blog\/uploads\/2022\/04\/5.png 628w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\n<\/span> <span style=\"font-weight: 400;\">Creating form using the <\/span><b>Field <\/b><span style=\"font-weight: 400;\">imported from redux-form.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span> <b>textField <\/b><span style=\"font-weight: 400;\">used to make custom components inside Field.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li><b>Connect the form to Redux-Form<\/b><b><br \/>\n<\/b><b><br \/>\n<\/b> <b><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-54967\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/6.png\" alt=\"\" width=\"288\" height=\"73\" \/><br \/>\n<\/b> <span style=\"font-weight: 400;\">This step will bind the state of the form values to the redux.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li><b>Adding validations to the Form<\/b><b><br \/>\n<\/b><b><br \/>\n<\/b> <span style=\"font-weight: 400;\">Create a <\/span><b>validate.js<\/b><span style=\"font-weight: 400;\"> file<\/span><b><br \/>\n<\/b> <b><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-54968\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/8-300x89.png\" alt=\"\" width=\"300\" height=\"89\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/8-300x89.png 300w, \/blog\/wp-ttn-blog\/uploads\/2022\/04\/8.png 570w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\n<\/b><b><br \/>\n<\/b> <span style=\"font-weight: 400;\">Add the validate function to the <\/span><b>reduxForm()<\/b><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-54969\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/9.png\" alt=\"\" width=\"298\" height=\"94\" \/><\/span><\/li>\n<\/ul>\n<ul>\n<li><b>Result of the above setup<\/b><b><br \/>\n<\/b><b><br \/>\n<\/b> <span style=\"font-weight: 400;\">When the form is loaded in the DOM, there becomes a key <\/span><b>\u2018Login\u2019<\/b><span style=\"font-weight: 400;\"> in the redux under in the <\/span><b>form<\/b><span style=\"font-weight: 400;\"> reducer <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-54970\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/10-300x192.png\" alt=\"\" width=\"300\" height=\"192\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/10-300x192.png 300w, \/blog\/wp-ttn-blog\/uploads\/2022\/04\/10.png 519w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/span><\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-54971\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/11-300x123.png\" alt=\"\" width=\"300\" height=\"123\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/11-300x123.png 300w, \/blog\/wp-ttn-blog\/uploads\/2022\/04\/11.png 502w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p><span style=\"font-weight: 400;\"><br \/>\n<\/span> <span style=\"font-weight: 400;\">Once we enter values inside the fields it will automatically be reflected inside the redux<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-54972\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/12-300x194.png\" alt=\"\" width=\"300\" height=\"194\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/12-300x194.png 300w, \/blog\/wp-ttn-blog\/uploads\/2022\/04\/12.png 520w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/span><\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-54973\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/14-300x156.png\" alt=\"\" width=\"300\" height=\"156\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2022\/04\/14-300x156.png 300w, \/blog\/wp-ttn-blog\/uploads\/2022\/04\/14.png 499w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>&nbsp;<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Above are the steps to make a normal <strong>reduxForm<\/strong>, but there is more to reduxForm, to dive deep into reduxForm do check its official website <\/span><strong><a href=\"https:\/\/redux-form.com\/7.0.1\/\">https:\/\/redux-form.com\/7.0.1\/<\/a><\/strong><\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>What is Redux Form? Redux Form is a HOC(Higher Order Component) which uses react-redux so that the HTML forms in react can store all its state in redux. Advantage of using Redux Form? Redux Form is very easy to use and implement, we just have to wrap our form component with the HOC provided by [&hellip;]<\/p>\n","protected":false},"author":393,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":4},"categories":[1439,4684,3038,1994],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/54974"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/393"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=54974"}],"version-history":[{"count":1,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/54974\/revisions"}],"predecessor-version":[{"id":54992,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/54974\/revisions\/54992"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=54974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=54974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=54974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}