SlideShare a Scribd company logo
Redux Form | ReactJS Tutorial for Beginners | React Redux Tutorial | ReactJS Training | Edureka
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Objectives
▪ Why Use Redux Forms?
▪ What Is A Redux Form?
▪ How It Works?
o Fields
o Displaying The Form
o Validating Our Form
o Handling Form submittal
▪ Hands On – Synchronous Validation
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Why Use Redux Forms?
▪ Redux stores the entire application state under a single data store.
▪ This allows us to use stateless components resulting in clarity and also in easier testing.
▪ Redux allows us to create reducers which hold a particular piece of application state.
Reducer 1 Reducer 2
State {list} State {list item}
Store
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
What Is Redux-Form?
▪ Redux-form is a npm package which helps us build forms in Redux.
▪ Redux-form saves us a lot of boilerplate code.
▪ It helps us integrate our form reducers into the rest of the application.
How we do this:
• Import reducer from ‘Redux-form’ package and include it in our combineReducer function.
Reducer combineReducer()
This will wire up redux-form to our application.
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Fields
Step 1: First identify each piece of application state.
Step2: Redux-form package provides a ‘Field’ component.
Step 3:
▪ We will wrap around each state object with a field component.
▪ We also need to connect our component to the form reducer.
▪ We achieve this using ‘reduxForm’ function.
<Field
name="category"
type="text"
component={renderField}
label="Category"
/>
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Displaying The Form
const renderField = ({ input, label, type, meta: { touched, error } }) =>
<div>
<label>
{label}
</label>
<div>
<input {...input} placeholder={label} type={type} />
{touched &&
(error &&
<span>
{error}
</span>)}
</div>
</div>;
Pristine(default) errortouched
We use a helper function called ‘renderField’ which is called by the ‘field’ component.
The form has the following three states:
After the user “touches“ it, we will prompt the user with a error message if any input field is left blank.
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
▪ Validation plays an important role of ensuring the user types the right information in the required format.
▪ Let me show you how to add simple validation into our redux form.
Validating Our Form
import React from "react";
import { Field, reduxForm } from "redux-form";
const validate = values => {
const errors = {};
if (!values.brand) {
errors.brand = "Required";
}
if (!values.category) {
errors.category = "Required";
}
if (!values.size) {
errors.size = "Required";
} else if (isNaN(Number(values.size))) {
errors.size = "Must be a number";
}
return errors;
};
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Redux-form is only responsible for:
1. Handling state
2. Validation
For Form Submittal however, we have a prop defined as ‘handleSubmit’.
If we need to submit the data to a backend server, the user needs to write a custom function inside ‘handleSubmit’.
Handling Form Submittal
<form onSubmit={handleSubmit}>
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Hands On- Synchronous Validation
1. We create a form which can be used to place shoe orders.
2. We have three fields Brand, Category & Size.
3. Form contains a submit button and Reset button.
Nike
sports
10
Category
Brand
Size
Redux Form
Values
{
“brand”: “Nike”,
“category”: ”sports”,
“size”: “10“
}
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Hands On- Synchronous Validation
Notice how we prompt the user with a error
message when any Field is left blank.
Redux Form
Values
10
{
“ size”: ”10”
}
Category
Brand
Size
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
WebDriver vs. IDE vs. RC
➢ Data Warehouse is like a relational database designed for analytical needs.
➢ It functions on the basis of OLAP (Online Analytical Processing).
➢ It is a central location where consolidated data from multiple locations (databases) are stored.

More Related Content

PPTX
Learning solid principles using c#
DOCX
Truth table, Karnaugh map & logic circuit with 5 outputs and 8 inputs
PPTX
J2EE Patterns
PDF
Plc course presentation
PDF
1. Paper on Floating Solar Photovoltaic System An Emerging Technology
PPTX
High efficiency solar thermophotovoltaic system
PPTX
Solar PV design and installation
PPTX
ENERGY EFFICIENT MOTORS AND POWER FACTOR IMPROVEMENT
Learning solid principles using c#
Truth table, Karnaugh map & logic circuit with 5 outputs and 8 inputs
J2EE Patterns
Plc course presentation
1. Paper on Floating Solar Photovoltaic System An Emerging Technology
High efficiency solar thermophotovoltaic system
Solar PV design and installation
ENERGY EFFICIENT MOTORS AND POWER FACTOR IMPROVEMENT

What's hot (20)

PDF
ATmega32 Controlled “Persistence of Vision” Display
PDF
Case Study | How your Motor Protection should designed when running in parall...
PPTX
More Electric Aircraft Presentation from Astronics
PPTX
Microprocessor and microcontrollers
PDF
Algorithmic Multi-ported Memory(MEM) - Comprehensive Techniques Guideline
PPTX
Wind farm planning and commissioning
PDF
Design solar pv system
PPTX
Rtos concepts
PPT
PLC and Industrial Automation - Technology Overview
PPT
Analog to digital converters, adc
PPT
Characteristics of Embedded Systems
PDF
Energy Storage Overview- February 2013
PPTX
Controllogix 5000 Training
PPTX
Pay back period and cost base analysis of solar PV Lantern
PDF
Batt 2_042706.pdf
PPTX
Arduino course
PPTX
Solid design principles
PPTX
Microgrid Presentation
PDF
Load Forecasting Techniques.pdf
PDF
Java Complete Reference Fifth Edition
ATmega32 Controlled “Persistence of Vision” Display
Case Study | How your Motor Protection should designed when running in parall...
More Electric Aircraft Presentation from Astronics
Microprocessor and microcontrollers
Algorithmic Multi-ported Memory(MEM) - Comprehensive Techniques Guideline
Wind farm planning and commissioning
Design solar pv system
Rtos concepts
PLC and Industrial Automation - Technology Overview
Analog to digital converters, adc
Characteristics of Embedded Systems
Energy Storage Overview- February 2013
Controllogix 5000 Training
Pay back period and cost base analysis of solar PV Lantern
Batt 2_042706.pdf
Arduino course
Solid design principles
Microgrid Presentation
Load Forecasting Techniques.pdf
Java Complete Reference Fifth Edition
Ad

Similar to Redux Form | ReactJS Tutorial for Beginners | React Redux Tutorial | ReactJS Training | Edureka (20)

PDF
Beginner’s tutorial (part 1) integrate redux form in react native application
PDF
Lets make a better react form
PDF
React.js Form Management with Formik and Yup in UAE Projects
PDF
React Redux Tutorial | Redux Tutorial for Beginners | React Redux Training | ...
PPTX
Online e learning management system form.pptx
PDF
Beginner’s tutorial (part 2) how to integrate redux-saga in react native app
PDF
React Hook Form
PDF
The biggest lies about react hooks
PDF
#FrontConf2017 — Enhance your User (and Developer) Experience with React & Redux
PDF
Angular Reactive Forms vs React Redux Form
PDF
Let's Redux!
PPTX
downloads_introduction to redux.pptx
PPTX
Forms-in-React-Building-Interactive-User-Experiences.pptx
PDF
Understanding redux
PPTX
Redux Tech Talk
PDF
Evan Schultz - Angular Summit - 2016
PPTX
Introduction to Redux.pptx
PDF
Getting started with React and Redux
PDF
Materi Modern React Redux Power Point.pdf
PDF
Taming forms with React
Beginner’s tutorial (part 1) integrate redux form in react native application
Lets make a better react form
React.js Form Management with Formik and Yup in UAE Projects
React Redux Tutorial | Redux Tutorial for Beginners | React Redux Training | ...
Online e learning management system form.pptx
Beginner’s tutorial (part 2) how to integrate redux-saga in react native app
React Hook Form
The biggest lies about react hooks
#FrontConf2017 — Enhance your User (and Developer) Experience with React & Redux
Angular Reactive Forms vs React Redux Form
Let's Redux!
downloads_introduction to redux.pptx
Forms-in-React-Building-Interactive-User-Experiences.pptx
Understanding redux
Redux Tech Talk
Evan Schultz - Angular Summit - 2016
Introduction to Redux.pptx
Getting started with React and Redux
Materi Modern React Redux Power Point.pdf
Taming forms with React
Ad

More from Edureka! (20)

PDF
What to learn during the 21 days Lockdown | Edureka
PDF
Top 10 Dying Programming Languages in 2020 | Edureka
PDF
Top 5 Trending Business Intelligence Tools | Edureka
PDF
Tableau Tutorial for Data Science | Edureka
PDF
Python Programming Tutorial | Edureka
PDF
Top 5 PMP Certifications | Edureka
PDF
Top Maven Interview Questions in 2020 | Edureka
PDF
Linux Mint Tutorial | Edureka
PDF
How to Deploy Java Web App in AWS| Edureka
PDF
Importance of Digital Marketing | Edureka
PDF
RPA in 2020 | Edureka
PDF
Email Notifications in Jenkins | Edureka
PDF
EA Algorithm in Machine Learning | Edureka
PDF
Cognitive AI Tutorial | Edureka
PDF
AWS Cloud Practitioner Tutorial | Edureka
PDF
Blue Prism Top Interview Questions | Edureka
PDF
Big Data on AWS Tutorial | Edureka
PDF
A star algorithm | A* Algorithm in Artificial Intelligence | Edureka
PDF
Kubernetes Installation on Ubuntu | Edureka
PDF
Introduction to DevOps | Edureka
What to learn during the 21 days Lockdown | Edureka
Top 10 Dying Programming Languages in 2020 | Edureka
Top 5 Trending Business Intelligence Tools | Edureka
Tableau Tutorial for Data Science | Edureka
Python Programming Tutorial | Edureka
Top 5 PMP Certifications | Edureka
Top Maven Interview Questions in 2020 | Edureka
Linux Mint Tutorial | Edureka
How to Deploy Java Web App in AWS| Edureka
Importance of Digital Marketing | Edureka
RPA in 2020 | Edureka
Email Notifications in Jenkins | Edureka
EA Algorithm in Machine Learning | Edureka
Cognitive AI Tutorial | Edureka
AWS Cloud Practitioner Tutorial | Edureka
Blue Prism Top Interview Questions | Edureka
Big Data on AWS Tutorial | Edureka
A star algorithm | A* Algorithm in Artificial Intelligence | Edureka
Kubernetes Installation on Ubuntu | Edureka
Introduction to DevOps | Edureka

Recently uploaded (20)

PDF
Chapter 3 Spatial Domain Image Processing.pdf
PDF
GamePlan Trading System Review: Professional Trader's Honest Take
PDF
Spectral efficient network and resource selection model in 5G networks
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Sensors and Actuators in IoT Systems using pdf
PDF
GDG Cloud Iasi [PUBLIC] Florian Blaga - Unveiling the Evolution of Cybersecur...
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PDF
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Empathic Computing: Creating Shared Understanding
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PDF
Transforming Manufacturing operations through Intelligent Integrations
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PDF
cuic standard and advanced reporting.pdf
PPTX
Big Data Technologies - Introduction.pptx
PPT
Teaching material agriculture food technology
Chapter 3 Spatial Domain Image Processing.pdf
GamePlan Trading System Review: Professional Trader's Honest Take
Spectral efficient network and resource selection model in 5G networks
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Sensors and Actuators in IoT Systems using pdf
GDG Cloud Iasi [PUBLIC] Florian Blaga - Unveiling the Evolution of Cybersecur...
Diabetes mellitus diagnosis method based random forest with bat algorithm
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Per capita expenditure prediction using model stacking based on satellite ima...
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Empathic Computing: Creating Shared Understanding
Dropbox Q2 2025 Financial Results & Investor Presentation
Transforming Manufacturing operations through Intelligent Integrations
20250228 LYD VKU AI Blended-Learning.pptx
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
cuic standard and advanced reporting.pdf
Big Data Technologies - Introduction.pptx
Teaching material agriculture food technology

Redux Form | ReactJS Tutorial for Beginners | React Redux Tutorial | ReactJS Training | Edureka

  • 2. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Objectives ▪ Why Use Redux Forms? ▪ What Is A Redux Form? ▪ How It Works? o Fields o Displaying The Form o Validating Our Form o Handling Form submittal ▪ Hands On – Synchronous Validation
  • 3. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why Use Redux Forms? ▪ Redux stores the entire application state under a single data store. ▪ This allows us to use stateless components resulting in clarity and also in easier testing. ▪ Redux allows us to create reducers which hold a particular piece of application state. Reducer 1 Reducer 2 State {list} State {list item} Store
  • 4. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What Is Redux-Form? ▪ Redux-form is a npm package which helps us build forms in Redux. ▪ Redux-form saves us a lot of boilerplate code. ▪ It helps us integrate our form reducers into the rest of the application. How we do this: • Import reducer from ‘Redux-form’ package and include it in our combineReducer function. Reducer combineReducer() This will wire up redux-form to our application.
  • 5. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Fields Step 1: First identify each piece of application state. Step2: Redux-form package provides a ‘Field’ component. Step 3: ▪ We will wrap around each state object with a field component. ▪ We also need to connect our component to the form reducer. ▪ We achieve this using ‘reduxForm’ function. <Field name="category" type="text" component={renderField} label="Category" />
  • 6. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Displaying The Form const renderField = ({ input, label, type, meta: { touched, error } }) => <div> <label> {label} </label> <div> <input {...input} placeholder={label} type={type} /> {touched && (error && <span> {error} </span>)} </div> </div>; Pristine(default) errortouched We use a helper function called ‘renderField’ which is called by the ‘field’ component. The form has the following three states: After the user “touches“ it, we will prompt the user with a error message if any input field is left blank.
  • 7. Copyright © 2017, edureka and/or its affiliates. All rights reserved. ▪ Validation plays an important role of ensuring the user types the right information in the required format. ▪ Let me show you how to add simple validation into our redux form. Validating Our Form import React from "react"; import { Field, reduxForm } from "redux-form"; const validate = values => { const errors = {}; if (!values.brand) { errors.brand = "Required"; } if (!values.category) { errors.category = "Required"; } if (!values.size) { errors.size = "Required"; } else if (isNaN(Number(values.size))) { errors.size = "Must be a number"; } return errors; };
  • 8. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Redux-form is only responsible for: 1. Handling state 2. Validation For Form Submittal however, we have a prop defined as ‘handleSubmit’. If we need to submit the data to a backend server, the user needs to write a custom function inside ‘handleSubmit’. Handling Form Submittal <form onSubmit={handleSubmit}>
  • 9. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Hands On- Synchronous Validation 1. We create a form which can be used to place shoe orders. 2. We have three fields Brand, Category & Size. 3. Form contains a submit button and Reset button. Nike sports 10 Category Brand Size Redux Form Values { “brand”: “Nike”, “category”: ”sports”, “size”: “10“ }
  • 10. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Hands On- Synchronous Validation Notice how we prompt the user with a error message when any Field is left blank. Redux Form Values 10 { “ size”: ”10” } Category Brand Size
  • 11. Copyright © 2017, edureka and/or its affiliates. All rights reserved. WebDriver vs. IDE vs. RC ➢ Data Warehouse is like a relational database designed for analytical needs. ➢ It functions on the basis of OLAP (Online Analytical Processing). ➢ It is a central location where consolidated data from multiple locations (databases) are stored.