java中todo不报错_removeTodo操作不从状态中删除

我不确定我在哪里出错，但当我触发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) => (

{todo.title}

X

));

return (

mappedTodos

);

}

}

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

export default TodoItem;

reducers.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

}

)