Create a Simple Form Application using React Redux

Simplifying State Management with Redux in MERN Applications

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.w3wiki.net/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

Tags:

#Redux #ReactJS #Web Technologies

Simplifying State Management with Redux in MERN Applications

What is JavaScript Rendering ?

Create a Simple Form Application using React Redux

Prerequisites

Approach

Steps to Create Application

Updated dependencies:

File structure:Project Structure of Form App

Contact Us

File structure:
Project Structure of Form App