Refactor Todo component and App.tsx

This commit is contained in:
Jason Zhu 2023-03-02 18:00:07 +11:00
parent de1dcb0280
commit 534cfb94af
2 changed files with 6 additions and 15 deletions

View File

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

View File

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