( ReactJS Training - https://www.edureka.co/reactjs-redux-... ) This Edureka tutorial on Redux Form will help you in understanding the best way to manage your form state in Redux. This video helps you to learn following topics: 1. Why Use Redux Forms? 2. What Is A Redux Form? 3. How It Works? 4. Hands On - Synchronous Validation

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.