Действие removeTodo не работает, не могу понять это, но я знаю, что это мимолетная ошибка

Question

Я задавал подобный вопрос здесь раньше, однако мой код немного изменился, и я не могу понять это.Я уверен, что это проблема с тем, что я передаю своему действию / редуктору.Я был бы очень признателен, если бы кто-то мог объяснить, что я здесь делаю неправильно.Я действительно хочу получить это, просто испытывая трудности с этим.

actions.js

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

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

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

redurs.js

import { ADD_TODO, REMOVE_TODO, ADD_OPTIONS } 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(),
            createdAt: Date(),
            priority: '',
            deadline: '',
            isClicked: false
          }]
    }

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

    case ADD_OPTIONS:
    return {
      ...state,
      todos: [...state.todos,
      {
        isClicked: false
      }]
    }

    default:
      return state;
  }
}

export default rootReducer;

TodoList.js

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

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

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

class List extends Component {
  render() {
    const mappedTodos = this.props.todos.map((todo, index) => (
      <TodoItem 
      title={todo.title}
      key={index}
      removeTodo={this.props.removeTodo}
      />
    ));
    return (
      mappedTodos
    );
  }
}

const TodoList = connect(mapStateToProps, mapDispatchToProps) (List)
export default TodoList; 

TodoItem.js

import React, { Component } from 'react';
import uuid from 'uuid';
import '../../css/Todo.css';



class TodoItem extends Component {
  render() {
    const todoId = uuid();
    return (
      <div id={todoId}>
        {this.props.title}
        <button onClick={this.props.removeTodo}>X</button>
      </div>
    );
  }
}

export default TodoItem;

Answer 1

В соответствии с тем, что говорил @The Dembinski, он работает, когда я изменяю свой компонент TodoList, чтобы он выглядел следующим образом:

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

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

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

class List extends Component {
  render() {
    const mappedTodos = this.props.todos.map((todo, index) => (
      <TodoItem 
      title={todo.title}
      key={index}
      removeTodo={() => this.props.removeTodo(todo.id)}
      />
    ));
    return (
      mappedTodos
    );
  }
}

const TodoList = connect(mapStateToProps, mapDispatchToProps) (List)
export default TodoList; 

Смена моей реквизита removeTodo на карте здесь ДЕЙСТВИТЕЛЬНО исправила проблему, и теперьудаляет правильно.Однако, если бы кто-нибудь мог помочь мне лучше понять это, либо путем дальнейшего обсуждения, либо просто указав мне в правильном направлении то, что я должен исследовать.Буду очень признателен.Я не после ответов, я после обучения.

Answer 2

Вам нужно обернуть ваш обработчик удаления в выражение, которое можно оценить во время «щелчка» и использовать идентификатор задачи из замыкания:

class TodoItem extends Component {
  render() {
    const todoId = uuid();
    return (
      <div id={todoId}>
        {this.props.title}
        <button onClick={this.props.removeTodo}>X</button>
      </div>
    );
  }
}

Должно быть что-то вроде ...

class TodoItem extends Component {
  render() {
    const todoId = uuid();
    return (
      <div id={todoId}>
        {this.props.title}
        <button onClick={() => this.props.removeTodo(todoId)}>X</button>
      </div>
    );
  }
}