How to handle app state without Redux ?

To handle app state without redux in a react application we will the the React JS hooks. For functional component hooks enable access and and manage data inside the states.

Prerequisites:

• NPM & Node.js
• React JS
• React useState Hook

Approach:

To handle the app state without Redux we will maintain the state using the useState hook in the App component, pass down the tasks array to the Task component to display in a proper format, and do the state mutation in the Tasks component with the help of setState method.

Steps to create React Application And Installing Module: 

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure:

Example : This example uses useState hook the handle the state and

Javascript

// Filename - App.js

import { useState } from "react";
import "./App.css";
import Tasks from "./Component/Tasks";

function App() {
    const [taskList, setTaskList] = useState([
        {
            title: "Submit DS assignment",
            deadline: "1pm 10 March",
        },
    ]);

    return (
        <div className="App">
            <Tasks
                taskList={taskList}
                setTaskList={setTaskList}
            />
        </div>
    );
}

export default App;

Javascript

// Filename - Componnent/Tasks.js

import React, { useState } from "react";
import Task from "./Task";

const Tasks = ({ setTaskList, taskList }) => {
    const inputStyles = {
        border: "none",
        borderBottom: "2px solid #9FE6A0",
        outline: "none",
        margin: "10px",
    };

    const [CurrentTask, setCurrentTask] = useState({});

    let taskListDisplay = taskList.map((task, index) => {
        return (
            <Task
                key={index}
                index={index}
                deadline={task.deadline}
                title={task.title}
            />
        );
    });

    const handleClick = (e) => {
        setTaskList([...taskList, CurrentTask]);
    };

    const handleChange = (e) => {
        e.preventDefault();
        setCurrentTask({
            ...CurrentTask,
            [e.target.name]: e.target.value,
        });
    };

    return (
        <div>
            <h4>Task-Web-App :</h4>
            <div>
                <input
                    style={inputStyles}
                    placeholder="Title"
                    type="text"
                    value={
                        CurrentTask.title !== undefined
                            ? CurrentTask.title
                            : ""
                    }
                    name="title"
                    onChange={handleChange}
                />
                <input
                    style={inputStyles}
                    placeholder="Deadline"
                    type="text"
                    value={
                        CurrentTask.deadline !== undefined
                            ? CurrentTask.deadline
                            : ""
                    }
                    name="deadline"
                    onChange={handleChange}
                />
                <button
                    style={{
                        outline: "none",
                        border: "none",
                        backgroundColor: "#9FE6A0",
                        borderRadius: "8px",
                        padding: "7px",
                        width: "90px",
                    }}
                    onClick={handleClick}
                >
                    Add Task
                </button>
            </div>
            <div
                style={{
                    display: "flex",
                    alignItems: "center",
                    flexDirection: "column",
                }}
            >
                {taskListDisplay}
            </div>
        </div>
    );
};

export default Tasks;

Javascript

// Filename Component/Task.js

import React from "react";

const Task = ({ deadline, title, index }) => {
  return (
    <div
      style={{
        border: "2px solid #F55C47",
        width: "30vw",
        margin: "10px",
        borderRadius: "10px",
        padding: "8px",
      }}
    >
      <h2 style={{ margin: "2px", color: "#564A4A" }}>
          Task {index + 1}
      </h2>


<p>
        <strong style={{ color: "#564A4A" }}> Title :</strong>
        <span style={{ color: "#707070" }}> {title}</span>
      </p>


<p>
        <strong style={{ color: "#564A4A" }}>Deadline : </strong>
        <span style={{ color: "#707070" }}>{deadline}</span>
      </p>

    </div>
  );
};

export default Task;

Steps to Run the Application: Use this command in the terminal inside the project directory.

npm start

Output: This output will be visible on the http://localhost:3000/ on the browser window.

Example 2: In this example, we will not maintain state in the App component but rather in some other child component, it will be Songs component. We will create two states one to store the singer’s name and the second will be the array of top 5 hit songs of the singer whose name the user has entered. And we’ll be fetching data from Rapid API’s open API this will be done with the help of axios. Implementation is discussed below.

Step to Install axios as a dependency:

npm i axios

The updated dependencies after installing required modules.

"dependencies": {
        "@mui/icons-material": "^5.14.16",
        "@mui/material": "^5.14.17",
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "axios": "^1.6.1",
        "framer": "^1.3.6",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "styled-components": "^6.1.1",
        "web-vitals": "^2.1.4"
}

Example: This example uses fetch method to get the data from API and store in the useState variable to render

Javascript

// Filename - App.js

import { useState } from "react";
import Songs from "./Component/Songs";

function App() {
    return (
        <div className="App">
            <Songs />
        </div>
    );
}

export default App;

Javascript

// Filename - Songs.js

import React, { useState, useEffect } from "react";
import axios from "axios";

const Songs = () => {
    const [HitSongs, setHitSongs] = useState([]);
    const [SingerName, setSingerName] = useState("Justin");

    const inputStyles = {
        border: "none",
        borderBottom: "2px solid #9FE6A0",
        outline: "none",
        margin: "10px",
    };

    const fetchData = async () => {
        var options = {
            method: "GET",
            url: "https://genius.p.rapidapi.com/search",
            params: { q: `${SingerName}` },
            headers: {
                "x-rapidapi-host": "genius.p.rapidapi.com",
                "x-rapidapi-key":
                    "ffc2438edbmsh0a88b634e6e77a7p123125jsnfb163d4d72f7",
            },
        };
        let data = await axios.request(options);
        data = data.data.response.hits.slice(0, 5);
        setHitSongs(data);
    };

    const handleClick = (e) => {
        fetchData();
    };

    const handleChange = (e) => {
        e.preventDefault();
        setSingerName(e.target.value);
    };

    useEffect(() => {
        fetchData();
    }, []);

    let displaySongs = HitSongs.map((song) => {
        return (
            <div key={song.result.id}>
                <div
                    style={{
                        border: "2px solid #9FE6A0",
                        width: "30vw",
                        padding: "5px",
                        margin: "8px",
                    }}
                >
                    {song.result.full_title}
                </div>
            </div>
        );
    });
    return (
        <>
            <div>
                <h4>Top 5 Hit songs :</h4>
                <div>
                    <input
                        style={inputStyles}
                        placeholder="Singer Name"
                        type="text"
                        value={
                            SingerName !== ""
                                ? SingerName
                                : ""
                        }
                        onChange={handleChange}
                    />

                    <button
                        style={{
                            outline: "none",
                            border: "none",
                            backgroundColor: "#9FE6A0",
                            borderRadius: "8px",
                            padding: "7px",
                            width: "90px",
                        }}
                        onClick={handleClick}
                    >
                        Search
                    </button>
                </div>
                <div
                    style={{
                        display: "flex",
                        alignItems: "center",
                        flexDirection: "column",
                    }}
                ></div>
            </div>
            <div>
                {displaySongs.length === 0 ? (
                    <>
                        <div>
                            {" "}
                            Fetching data ... Please wait :){" "}
                        </div>
                    </>
                ) : (
                    <div
                        style={{
                            display: "flex",
                            flexDirection: "column",
                            alignItems: "center",
                        }}
                    >
                        {displaySongs}
                    </div>
                )}
            </div>
        </>
    );
};

export default Songs;

Steps to Run the Application: Use this command in the terminal inside the project directory.

npm start

Output: This output will be visible on the http://localhost:3000/ on the browser window.