Create a Simple Form Application using React Redux
Last Updated :
26 Apr, 2024
In this article, we make a simple project of form application built using React and Redux. The main purpose of the application is to collect user information through a form consisting of fields for name, email, message and submit button. It’s built with React for the user interface and Redux for managing the form data.
Simple Form Application
Prerequisites
Approach
- Set Up React Project: Start by setting up a new React project using Create React App.
- Install Dependencies: Install the necessary dependencies, including react, react-dom, redux, react-redux.
- Store Your Data: Create a Redux store with an initial state holding a formData object for form data. In the store, define actions ( SUBMIT_FORM) and reducers.
- Create Form Component: Create a form component using React. Include input fields for name, email, message, and a submit button.
- Connect to Redux : Connect the form component to the Redux store.
Steps to Create Application
Step 1: Create React Application named form-app and navigate to it using this command.
npx create-react-app form-app
cd form-app
Step 2: Install required packages and dependencies.
npm install react-redux redux
Updated dependencies:
Your installed dependencies will look like in package.json file.
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^9.1.1",
"redux": "^5.0.1"
},
File structure:Project Structure of Form App
Example:
CSS
/* App.css */
#app {
display: flex;
flex-direction: column;
align-items: center;
}
input,
textarea {
padding: 10px 20px;
}
#head {
display: flex;
gap: 10px;
}
#form {
display: flex;
flex-direction: column;
gap: 10px;
}
button {
background-color: rgba(219, 219, 219, 0.822);
padding: 10px 20px;
border: 1px solid transparent;
cursor: pointer;
}
button:hover {
background-color: rgba(9, 173, 9, 0.801);
}
JavaScript
// App.js
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { submitForm } from './store';
import './App.css'
const Form = () => {
const dispatch = useDispatch();
const [formData, setFormData] = useState({});
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = () => {
dispatch(submitForm(formData));
setFormData({});
};
return (
<div id='app'>
<div id='head'>
<img src='https://media.geeksforgeeks.org/gfg-gg-logo.svg' alt='gfg_logo' />
<h1>Simple Form Application</h1>
</div>
<div id='form'>
<input type="text" name="name" placeholder="Name" onChange={handleChange} value={formData.name || ''} />
<input type="email" name="email" placeholder="Email" onChange={handleChange} value={formData.email || ''} />
<textarea name="message" placeholder="Write Message Here" onChange={handleChange} value={formData.message || ''} />
<button onClick={handleSubmit}>Submit</button>
</div>
</div>
);
};
export default Form;
JavaScript
// store.js
import { createStore } from 'redux';
const initialState = {
formData: {}
};
const rootReducer = (state = initialState, action) => {
switch (action.type) {
case 'SUBMIT_FORM':
return {
...state,
formData: action.payload
};
default:
return state;
}
};
const store = createStore(rootReducer);
export default store;
export const submitForm = (formData) => {
return {
type: 'SUBMIT_FORM',
payload: formData
};
};
JavaScript
// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import store from "./store";
import { Provider } from "react-redux";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Provider store={store}>
<App />
</Provider>
);
Output
Form App
Share your thoughts in the comments
Please Login to comment...