Refactor Todo component and App.tsx

src/App.tsx

@@ -22,14 +22,6 @@ function App() {
         setText("");
     }
 
-    const handleToggleTodo = (id: number) => {
-        dispatch({ type: TOGGLE_TODO, payload: id});
-    }
-
-    const handleDeleteTodo = (id: number) => {
-        dispatch({ type: DELETE_TODO, payload: id});
-    }
-
     return (
         <div>
             <h1>Todo List</h1>
@@ -46,8 +38,6 @@ function App() {
                         id={todo.id}
                         text={todo.text}
                         completed={todo.completed}
-                        onToggle={handleToggleTodo}
-                        onDelete={handleDeleteTodo}
                     />
                 ))}
             </ul>

src/Todo.tsx

@@ -1,20 +1,21 @@
 import React from "react";
+import {useDispatch} from "react-redux";
+import {DELETE_TODO, TOGGLE_TODO} from "./reducers";
 
 interface TodoProps {
     id: number;
     text: string;
     completed: boolean;
-    onToggle: (id: number) => void;
-    onDelete: (id: number) => void;
 }
 
-const Todo = ( { id, text, completed, onToggle, onDelete }: TodoProps) => {
+const Todo = ( { id, text, completed }: TodoProps) => {
+    const dispatch = useDispatch();
     const handleToggle = () => {
-        onToggle(id);
+        dispatch({ type: TOGGLE_TODO, payload: id });
     };
 
     const handleDelete = () => {
-        onDelete(id);
+        dispatch({ type: DELETE_TODO, payload: id });
     };
 
     return (