действие removeTodo не удаляется из состояния

Question

Я не уверен, где я иду не так, но когда я запускаю свое действие removeTodo, ничего не происходит.Я считаю, что это преходящая ошибка с моей стороны, но я не могу понять это.Я подумал, что, установив мое действие на получение todo в качестве полезной нагрузки, затем в моей рассылке я передаю это действие todo.id, чтобы он мог удалить указанный id.Не могу понять, почему это не сработает.

TodoItem.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { removeTodo } from '../actions';
import '../../css/Todo.css';

const mapDispatchToProps = dispatch => {
  return {
      removeTodo: todo => dispatch(removeTodo(todo.id))
    };
  };

const mapStateToProps = state => {
  return {todos: [...state.todos]};
};

class ConnectedTodoItem extends Component {
  render() {
    const {handleToggle, todoId} = this.props;
    const mappedTodos = this.props.todos.map((todo, index) => (
      <div className='todo-item'>
        <span onClick={handleToggle} index={index} id={todoId}>
          {todo.title}
        </span>
        <button type='submit' className='rem-btn' id={todoId} onClick={this.props.removeTodo}>X</button>
      </div>
    ));

    return (
      mappedTodos
    );
  }
}

const TodoItem = connect(mapStateToProps, mapDispatchToProps) (ConnectedTodoItem);

export default TodoItem;

redurs.js

import { ADD_TODO } from '../constants/action-types'; 
import { REMOVE_TODO } from '../constants/action-types';
import uuidv1 from 'uuid';

const initialState = {
  todos: []
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
    return {
        ...state,
        todos: [...state.todos,
          {
            title: action.payload.inputValue,
            id: uuidv1()
          }]
    }

    case REMOVE_TODO:
    return {
      ...state,
      todos: [...state.todos.filter(todo => todo.id  !== action.payload)]
    }

    default:
      return state;
  }
}

export default rootReducer;

actions.js

import { ADD_TODO } from '../constants/action-types';
import { REMOVE_TODO } from '../constants/action-types';

export const addTodo = (todo) => (
  {
    type: ADD_TODO,
    payload: todo
  }
);

export const removeTodo = (todo) => (
  {
    type: REMOVE_TODO,
    payload: todo.id
  }
)

Answer 1

Чтобы добавить ответ Энди, похоже, что вы также извлекаете идентификатор в вызове dispatch, но вы уже делаете это в файле actions.js, где вы определяете removeTodo, поэтому, если у вас нет вложенного идентификатора внутри todo.id,Вы хотите удалить его из любого места.

Answer 2

На первый взгляд кажется, что проблема связана с тем, как вы вызываете removeTodo

. Как видите, функция принимает аргумент todo, из которого затем извлекается идентификатор.

const mapDispatchToProps = dispatch => {
  return {
    removeTodo: todo => dispatch(removeTodo(todo.id))
  };
};

Однако вы не проходите здесь задачу.

onClick={this.props.removeTodo}

Попробуйте вместо этого:

onClick={() => this.props.removeTodo(todo)}

Обновить, чтобы продолжить ход мыслей Уильяма.Я бы сделал следующее, передавая вокруг id специально, а не весь объект.Это немного облегчает понимание того, что вы обновляете.

1) Функция отправки

const mapDispatchToProps = dispatch => {
  return {
    removeTodo: id => dispatch(removeTodo(id))
  };
};

2) Функция вызова

onClick={() => this.props.removeTodo(todoId)}

3) Действие

export const removeTodo = (id) => (
  {
    type: REMOVE_TODO,
    id
  }
)

4) Редуктор

case REMOVE_TODO: {
  return {
    ...state,
    todos: state.todos.filter(todo => todo.id  !== action.id)
  }
}