This is a simple Todo application built with React, Redux Toolkit (RTK Query), and JSON Server as the backend. The app allows users to add, update, and delete tasks, while leveraging caching and network optimization techniques for a smooth user experience.
- Add, Update, and Delete Tasks: Users can manage their tasks with ease.
- Caching: The app caches task data to reduce redundant network requests and improve performance.
- Network Optimization: The app updates the UI optimistically while tasks are in a "pending" state, ensuring a better user experience.
- Frontend: React, Redux Toolkit (RTK Query), Vite
- Backend: JSON Server (serving
db.json) - State Management: Redux Toolkit (RTK Query for API state management)
- git clone https://github.com/NandhuKrishhna/RTK-Query-ToDo-App.git
- cd todo-app-rtk-query
- npm install
- npm run json-server
- npm run dev
You can add a new task by typing in the input field and clicking "Add Task". The task will be added to the list and cached for future use.
To update a task, click on the task name, edit it, and save the changes. The update will be reflected in the UI instantly due to optimistic updates.
You can delete a task by clicking the "Delete" button next to it. The task will be removed from the list and the backend.
Caching: RTK Query automatically caches the data, which reduces the need to fetch the same data multiple times from the backend. Optimistic Updates: When a task is added, updated, or deleted, the UI is updated immediately in the "pending" state to provide a smooth user experience while waiting for the network response. Redux Store Integration The app uses Redux Toolkit to manage the state and RTK Query to handle API calls. All tasks are fetched and managed through the Redux store, making it easy to manage the state globally.
Optimizing Network Requests: By using RTK Query, we can optimize network calls and cache data efficiently. UI Optimizations: Implemented optimistic UI updates to improve the user experience while waiting for network responses. Redux Toolkit: Learned how to integrate RTK Query with Redux for managing API data and state.