diff options
| -rw-r--r-- | src/ToDo.jsx | 5 | ||||
| -rw-r--r-- | src/features/todo/reducer.js | 8 |
2 files changed, 11 insertions, 2 deletions
diff --git a/src/ToDo.jsx b/src/ToDo.jsx index 1dbfad7..3644db3 100644 --- a/src/ToDo.jsx +++ b/src/ToDo.jsx @@ -3,6 +3,7 @@ import { useSelector, useDispatch } from "react-redux"; import { add_todo, change_done, + remove_todo, select_todos, select_last_index, } from "./features/todo/reducer"; @@ -241,7 +242,9 @@ export function ListToDos() { <button type="button" className="btn btn-outline-dark" - disabled + onClick={(e) => + dispatch(remove_todo(item.id)) + } > Delete </button> diff --git a/src/features/todo/reducer.js b/src/features/todo/reducer.js index daba8bc..f12f740 100644 --- a/src/features/todo/reducer.js +++ b/src/features/todo/reducer.js @@ -30,10 +30,16 @@ export const todo_slice = createSlice({ state.todos[selected_todo].done = action.payload.done; }, + + remove_todo: (state, action) => { + state.todos = state.todos.filter( + (todo) => todo.id != action.payload + ); + }, }, }); -export const { add_todo, change_done } = todo_slice.actions; +export const { add_todo, change_done, remove_todo } = todo_slice.actions; export const select_todos = (state) => state.todo_list.todos; export const select_last_index = (state) => state.todo_list.last_id; |