How to use Redux Form Library In Redux
Redux Form is a popular library for managing form state in Redux applications. It provides a set of higher-order components and Redux actions to simplify form handling. With Redux Form, you define your form fields as components and connect them to the Redux store using the `reduxForm` higher-order component. Redux Form manages form state, validation, submission, and error handling automatically.
Example: Below is an example of handling form using redux form library.
/* App.css for UI Styling */
.form-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
form {
width: 300px;
padding: 20px;
border: 1px solid #080707;
border-radius: 8px;
background-color: #eccc8d;
}
form label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
form input {
width: calc(100% - 12px);
padding: 8px;
margin-bottom: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #0056b3;
}
.data-display {
margin-top: 20px;
}
.data-display div {
margin-bottom: 8px;
}
// src/App.js
import MyForm from "./components/MyForm";
function App() {
return (
<>
<MyForm />
</>
);
}
export default App;
// src/store.js
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;
// src/components/MyForm.js
import React, { useState } from "react";
import { Field, reduxForm } from "redux-form";
import '../App.css';
const MyForm = (props) => {
const { handleSubmit } = props;
const [data, setData] = useState({});
const onSubmit = (values) => {
// Handle form submission
setData(values);
console.log(values);
};
return (
<>
<div className="form-container">
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label htmlFor="name">Name</label>
<Field name="name" component="input" type="text" />
<label htmlFor="name">Password</label>
<Field name="password" component="input" type="password" />
</div>
<button type="submit">Submit</button>
<div>Name:{data.name}</div>
<div>Password:{data.password}</div>
</form>
</div>
</>
);
};
export default reduxForm({
form: "myForm", // A unique identifier for this form
})(MyForm);
// src/reducers/index.js
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
const rootReducer = combineReducers({
form: formReducer
});
export default rootReducer;
Start your application using the following command:
npm start
Output:
How to Handle Forms in Redux Applications?
Handling forms in Redux applications involves managing form data in the Redux store and synchronizing it with the UI. By centralizing the form state in the Redux store, you can easily manage form data, handle form submissions, and maintain consistency across components.
We will discuss a different approach to handle forms in Redux applications:
Table of Content
- Using Redux Form Library
- Using Custom Redux Actions and Reducers