Todo App using React Redux 

Introduction
The Todo App is a simple task management application built using React and Redux. It allows
users to add, delete, and clear tasks from a list. This project demonstrates the basics of state
management using Redux in a React application.

Features

• Add new tasks to the list.
• Delete individual tasks.
• Clear all tasks at once.
• Simple and clean user interface.
• Responsive design.

Installation
Prerequisites
Ensure you have Node.js and npm installed on your machine.
Step 1:- Git clone https://github.com/jayashri1998/ToDO-Redux.git
Step 2:- cd ToDO-Redux
Step 3:- npm install
Step4:- npm run dev
Open your browser and go to http://localhost:5173 to see the app.

Folder Structure:-


State Management with Redux:-
This Todo app uses Redux for managing state. Below is a breakdown
of how Redux is set up and used.
Actions
Actions are payloads of information that send data from your
application to your Redux store. They are the only source of
information for the store.
Actions (src/actions/index.js):


Reducers
Reducers specify how the application's state changes in response to actions sent to the store.
 

A reducer in Redux is a pure function that specifies how the state of your application changes in response to actions sent to the store. The reducer takes the current state and an action as arguments and returns a new state based on the action type. It’s important that the reducer doesn't mutate the state directly but returns a new state object.
Todo Reducer (src/reducers/todoReducers.js):

Store
The Redux store brings together the state, actions, and reducers that make up the app.
The reducer is combined with other reducers (if any) and used to create the Redux store. When an action is dispatched, Redux calls the reducer with the current state and action, and the reducer returns the new state.
Store Configuration (src/store/index.js):


Todo Component
The Todo component is the main component where users can add, delete, and clear todos.
Todo Component (src/components/Todo.js):
Running the App
1.Interact with the App:

• Add new tasks using the input field.
• Click the delete icon to remove individual tasks.
• Click the "Clear List" button to remove all tasks.

2.Further Improvements

• Local Storage: Persist todos in local storage so they are not lost when the page is
• refreshed.
• Edit Todos: Add functionality to edit existing todos.
• Task Completion: Add a feature to mark tasks as completed.

swaz_ahmed

I am swaz_ahmed blogger on shadbox. I am influencer,content writer,author and publisher. Feel free to ask me any question and suggestions.