trying to Deleting a state in a Redux ToDo app and nots working

Admin 1
Viewed 182

Hi everyone I'm a new beginner in redux and I tried to add a basic delete function on the basic todo app of redux(in their tutorial) and I don't know why it doesn't even activate itself, I checked on the redux dev tool and my button doesn't even toggle, I tried to copy the toggle button at first to see if it gets there and not ... I believe the solution is basic but I don't find it I need help <3

import React from "react";
import { connect } from "react-redux";
import cx from "classnames";
import { toggleTodo, deleteTodo } from "../redux/actions";

// src/components/Todo.js

const Todo = ({ todo, toggleTodo }) => (
  <li className="todo-item">
    <div onClick={() => toggleTodo(todo.id)}>
      {todo && todo.completed ? "" : ""}{" "}
      <span
        className={cx(
          "todo-item__text",
          todo && todo.completed && "todo-item__text--completed"
        )}
      >
        {todo.content}
      </span>
    </div>
    <button onClick={() => deleteTodo(todo.id)}>DELETE</button>
  </li>
);

// export default Todo;
export default connect(null, { toggleTodo, deleteTodo })(Todo);

import { ADD_TODO, TOGGLE_TODO, DELETE_TODO } from "../actionTypes";

const initialState = {
  allIds: [],
  byIds: {},
};

export default function (state = initialState, action) {
  switch (action.type) {
    case ADD_TODO: {
      const { id, content } = action.payload;
      return {
        ...state,
        allIds: [...state.allIds, id],
        byIds: {
          ...state.byIds,
          [id]: {
            content,
            completed: false,
          },
        },
      };
    }
    case TOGGLE_TODO: {
      const { id } = action.payload;
      return {
        ...state,
        byIds: {
          ...state.byIds,
          [id]: {
            ...state.byIds[id],
            completed: !state.byIds[id].completed,
          },
        },
      };
    }
    // of course its toggling but it doesn't even get there
    case DELETE_TODO: {
      const { id } = action.payload;
      return {
        ...state,
        byIds: {
          ...state.byIds,
          [id]: {
            ...state.byIds[id],
            completed: !state.byIds[id].completed,
          },
        },
      };
    }
    default:
      return state;
  }
}

import { ADD_TODO, TOGGLE_TODO, SET_FILTER, DELETE_TODO } from "./actionTypes";

let nextTodoId = 0;

export const addTodo = (content) => ({
  type: ADD_TODO,
  payload: {
    id: ++nextTodoId,
    content,
  },
});

export const toggleTodo = (id) => ({
  type: TOGGLE_TODO,
  payload: { id },
});

export const deleteTodo = (id) => ({
  type: DELETE_TODO,
  payload: { id },
});

export const setFilter = (filter) => ({
  type: SET_FILTER,
  payload: { filter },
});

export const ADD_TODO = "ADD_TODO";
export const TOGGLE_TODO = "TOGGLE_TODO";
export const SET_FILTER = "SET_FILTER";
export const DELETE_TODO = "DELETE_TODO";

redux reactjs javascript
1 Answers

You are calling imported deleteTodo instead of taking it from props so it has no effect (only creates an object). Very common mistake, just extract deleteTodo from props and it should work

const Todo = ({ todo, toggleTodo, deleteTodo }) => (
user_58964530
Related