How to handle app state without Redux ?
Last Updated :
10 Nov, 2023
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:
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
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
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
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
import { useState } from "react" ;
import Songs from "./Component/Songs" ;
function App() {
return (
<div className= "App" >
<Songs />
</div>
);
}
export default App;
|
Javascript
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" ,
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.
Share your thoughts in the comments
Please Login to comment...