1 / 12

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

( ReactJS Training - https://www.edureka.co/reactjs-redux-... )<br>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:<br><br>1. Why Use Redux Forms?<br>2. What Is A Redux Form?<br>3. How It Works?<br>4. Hands On - Synchronous Validation

EdurekaIN
Télécharger la présentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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.

  2. 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 Store State {list} State {list item} Copyright © 2017, edureka and/or its affiliates. All rights reserved.

  3. 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.

  4. Fields Step 1: First identify each piece of application state. <Field name="category" type="text" component={renderField} label="Category" /> 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. Copyright © 2017, edureka and/or its affiliates. All rights reserved.

  5. Displaying The Form We use a helper function called ‘renderField’ which is called by the ‘field’ component. The form has the following three states: Pristine(default) error touched After the user “touches“ it, we will prompt the user with a error message if any input field is left blank. 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>; Copyright © 2017, edureka and/or its affiliates. All rights reserved.

  6. Validating Our Form ▪ 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. 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.

  7. Handling Form Submittal Redux-form is only responsible for: 1. Handling state 2. Validation For Form Submittal however, we have a prop defined as ‘handleSubmit’. <form onSubmit={handleSubmit}> If we need to submit the data to a backend server, the user needs to write a custom function inside ‘handleSubmit’. Copyright © 2017, edureka and/or its affiliates. All rights reserved.

  8. Hands On- Synchronous Validation Redux Form Nike Brand Category sports Size 10 1. We create a form which can be used to place shoe orders. 2. We have three fields Brand, Category & Size. Values 3. Form contains a submit button and Reset button. { “brand”: “Nike”, “category”: ”sports”, “size”: “10“ } Copyright © 2017, edureka and/or its affiliates. All rights reserved.

  9. Hands On- Synchronous Validation Redux Form Brand Category Notice how we prompt the user with a error Size 10 message when any Field is left blank. Values { “ size”: ”10” } Copyright © 2017, edureka and/or its affiliates. All rights reserved.

  10. 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. Copyright © 2017, edureka and/or its affiliates. All rights reserved.

More Related