diff --git a/src/App.tsx b/src/App.tsx index 896f138..3ac51d5 100644 --- a/src/App.tsx +++ b/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 (

Todo List

@@ -46,8 +38,6 @@ function App() { id={todo.id} text={todo.text} completed={todo.completed} - onToggle={handleToggleTodo} - onDelete={handleDeleteTodo} /> ))} diff --git a/src/Todo.tsx b/src/Todo.tsx index 757976d..f7a02b1 100644 --- a/src/Todo.tsx +++ b/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 (