Create a Simple Form Application using React Redux

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

• Nodejs and NPM
• React and Redux
• React-Redux

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