Create a To-Do List App using React Redux
Last Updated :
23 Apr, 2024
A To-Do list allows users to manage their tasks by adding, removing, and toggling the completion status for each added item. It emphasizes a clean architecture, with Redux state management and React interface rendering.
Todo AppPrerequisites
Approach
- Create a new React project using Create React App and install Redux and React Redux to manage application state.
- Create a store for State management. Here, we use createStore to create store and combine all reducers. Define reducer ( adding, removing, and toggling to-do ) here.
- Create a functional component (App.js) that represents the main application and connect the component to the Redux store using connect from React Redux.
- Create a CSS file(App.css) for styling the input field, buttons and to-do list.
Steps to Create Application
Step 1: Create React Application named todo-list-app and navigate to it using this command.
npx create-react-app todo-list-app
cd todo-list-app
Step 2: Install required packages and dependencies.
npm install react-redux redux
Step 3: Check package.json file for updated and installed dependencies, it will look like the below file.
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^9.1.1",
"redux": "^5.0.1",
},Step 4: Run the application, start your application by navigating to todo-list-app and use the below command.
npm start
Project Structure:
File Structure Example: The below code will explain the use of react-redux to create todo list in react.
CSS
/* App.css */
#app {
display: flex;
flex-direction: column;
text-align: center;
}
input {
padding: 10px 20px;
border: 1px solid black;
border-radius: 10px;
}
button {
padding: 10px 20px;
border: 1px solid transparent;
border-radius: 10px;
background-color: rgba(204, 204, 204, 0.713);
cursor: pointer;
}
button:hover {
background-color: rgba(7, 162, 7, 0.568);
}
ul li {
list-style: none;
}
.todo button {
margin: 5px;
}
// App.js
import "./App.css";
import React, { useState } from "react";
import { connect } from "react-redux";
const App =
({ todos, addTodo, removeTodo, toggleTodo }) => {
const [text, setText] = useState("");
const handleAddTodo = () => {
if (text.trim() !== "") {
addTodo({
id: new Date().getTime(),
text,
completed: false,
});
setText("");
}
};
const handleRemoveTodo = (id) => {
removeTodo(id);
};
const handleToggleTodo = (id) => {
toggleTodo(id);
};
return (
<div id="app">
<div>
<h1>To-Do List</h1>
<input
type="text"
value={text}
onChange={(e) =>
setText(e.target.value)}
placeholder="Enter a task..."
/>
<button onClick={handleAddTodo}>
Add
</button>
<ul>
{todos.map((todo) => (
<li
className="todo"
key={todo.id}
style={{
textDecoration: todo.completed ?
"line-through" : "none",
color: todo.completed ?
"red" : "black",
}}
onClick={() => handleToggleTodo(todo.id)}
>
{todo.text}
<button onClick=
{() => handleRemoveTodo(todo.id)}>
Remove
</button>
</li>
))}
</ul>
</div>
</div>
);
};
const mapStateToProps = (state) => ({
todos: state.todos,
});
const mapDispatchToProps = (dispatch) => ({
addTodo: (todo) =>
dispatch({
type: "ADD_TODO",
payload: todo
}),
removeTodo: (id) =>
dispatch({
type: "REMOVE_TODO",
payload: id
}),
toggleTodo: (id) =>
dispatch({
type: "TOGGLE_TODO",
payload: id
}),
});
export default connect
(mapStateToProps, mapDispatchToProps)(App);
// 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>
);
// store.js
import { createStore } from "redux";
const initialState = {
todos: [],
};
const rootReducer =
(state = initialState, action) => {
switch (action.type) {
case "ADD_TODO":
return {
...state,
todos: [
...state.todos,
action.payload
],
};
case "REMOVE_TODO":
return {
...state,
todos: state.todos.filter(
(todo) => todo.id !==
action.payload),
};
case "TOGGLE_TODO":
return {
...state,
todos: state.todos.map((todo) =>
todo.id === action.payload
? {
...todo,
completed:
!todo.completed
}
: todo
),
};
default:
return state;
}
};
const store = createStore(rootReducer);
export default store;
Output:
Todo App
Similar Reads
How to create a food recipe app using ReactJS ? We are going to make a food recipe app using React.js.Pre-requisite:React hooksReact componentsJavaScript ES6APIÂ CSSApproach: Here in this app we should have a component where we are going to show our food recipes. And we need to fetch all the required food recipes using a food recipe API. We will f
3 min read
How to Create ToDo App using React Native ? In this article, we'll see how to create a To-Do app using React Native. An ideal illustration of a basic application that can be developed with React Native is a To-Do app. This app enables users to generate, modify, and remove tasks, assisting them in maintaining organization and concentration. To
11 min read
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 man
3 min read
Create a Food Reciepe App using React-Native In this React-Native article, we will be developing an interactive Food Recipe Application. In this application, the users can be able to search for any food recipe in the search box. Then, according to the search query, the results will be fetched through an API and will be displayed in the applica
5 min read
How to Create a Basic Notes App using ReactJS ? Creating a basic notes app using React JS is a better way to learn how to manage state, handle user input, and render components dynamically. In this article, we are going to learn how to create a basic notes app using React JS. A notes app is a digital application that allows users to create, manag
4 min read
Create ToDo App using ReactJS In this article, we will create a to-do app to understand the basics of ReactJS. We will be working with class based components in this application and use the React-Bootstrap module to style the components. This to-do list can add new tasks we can also delete the tasks by clicking on them. The logi
3 min read
Creating a Travel Journal App using React The Travel Journal App project is a web application developed using React. This travel journal app will allow users to record their travel experiences and manage their entries efficiently. By leveraging the power of React for the frontend and Bootstrap for styling, we'll create an interactive and vi
5 min read
Create a Dashboard App using React-Native A dashboard app using react native is a software application designed to provide a consolidated and visual representation of important information, data, or features in a single, easily accessible interface. Dashboards are commonly used in various industries to help users monitor, analyze, and manag
7 min read
How to Create Todo App using Next.js ? In this article, we will create a to-do application and understand the basics of Next.js. This to-do list can add new tasks we can also delete the tasks by clicking on them.Next.js is a widely recognized React framework that eÂnables server-side rendering and enhanceÂs the developmeÂnt of interacti
4 min read
How to Create Store in React Redux ? React Redux is a JavaScript library that is used to create and maintain state in React Applications efficiently. Here React Redux solves the problem by creating a redux store that stores the state and provides methods to use the state inside any component directly or to manipulate the state in a def
4 min read