пытается удалить состояние в приложении Redux ToDo и не работает - PullRequest
Новая
       14

пытается удалить состояние в приложении Redux ToDo и не работает

2 голосов
/ 01 августа 2020

Всем привет, я новичок в redux, и я попытался добавить базовую c функцию удаления в базовое c приложение задачи redux (в их учебнике), и я не знаю, почему это не так » Я даже активировал сам себя, я проверил инструмент redux dev, и моя кнопка даже не переключается, я попытался сначала скопировать кнопку переключения, чтобы посмотреть, попадает ли она туда, а нет ... Я считаю, что решение базовое c но я не нахожу мне нужна помощь <3 </p> 

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";

1 Ответ

2 голосов
/ 01 августа 2020

Вы вызываете импортированный deleteTodo вместо того, чтобы брать его из props, поэтому он не имеет никакого эффекта (только создает объект). Очень распространенная ошибка, просто извлеките deleteTodo из реквизита, и он должен работать 

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