删除与TODO“TODO”

Question

我有一个简单的应用程序与react/redux构建。在我的“TODO”-app中，我可以添加项目并对其进行过滤。我只是按照this example。但我也尝试添加一个实际删除项目的方法，但它似乎不起作用。

操作：

let nextTodoId = 0 
export const addTodo = text => { 
    return { 
    type: 'ADD_TODO', 
    id: nextTodoId++, 
    text 
    } 
} 

export const setVisibilityFilter = filter => { 
    return { 
    type: 'SET_VISIBILITY_FILTER', 
    filter 
    } 
} 

export const toggleTodo = id => { 
    return { 
    type: 'TOGGLE_TODO', 
    id 
    } 
} 

export const deleteTodo = id => { 
    return { 
    type: 'DELETE_TODO', 
    id: id 
    } 
} 

减速机：

const todos = (state = [], action) => { 
    switch (action.type) { 
    case 'ADD_TODO': 
     return [ 
     ...state, 
     { 
      id: action.id, 
      text: action.text, 
      completed: false 
     } 
     ]; 
    case 'TOGGLE_TODO': 
     return state.map(todo => 
      (todo.id === action.id) 
       ? {...todo, completed: !todo.completed} 
       : todo 
    ); 
    case 'DELETE_TODO': 
     return state.filter(todo => todo.id !== action.id); 
    default: 
     return state 
    } 
} 

export default todos 

而且在我的容器：

import React from 'react' 
import {connect} from 'react-redux' 
import {deleteTodo} from '../actions' 

let RemoveTodo = ({dispatch}) => { 
    return (
     <div> 
     <a onClick={e => { 
      e.preventDefault() 
      // dispatch(deleteTodo()) 

      console.log(dispatch(deleteTodo())); 
     }}>Remove TODO</a> 
     </div> 
) 
} 

RemoveTodo = connect()(RemoveTodo) 

export default RemoveTodo 

组件：

import React from 'react' 
import PropTypes from 'prop-types' 
import {connect} from 'react-redux' 
import RemoveTodo from '../containers/RemoveTodo' 

export default class Todo extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state; 
    } 

    render() { 
    return (
     <li 
      onClick={this.props.onClick} 
      className="list-group-item justify-content-between border-c1 c1" 
     > 
      <span>{this.props.text} {this.props.completed ? <i className="fa fa-check"/> : null}</span> 
      <span className="badge c1-bg badge-pill"> 
      <RemoveTodo /> 
      </span> 
     </li> 
    ) 
    } 
} 

Todo.propTypes = { 
    onClick: PropTypes.func.isRequired, 
    completed: PropTypes.bool.isRequired, 
    text: PropTypes.string.isRequired, 
    id: PropTypes.number.isRequired 
} 

出于某种原因，我的 “调度（deleteTodo（））” 没有找到ID ...当我登录，我只是得到一个对象：类型： “DELETE_TODO”，ID：不确定。为什么？我在这里错过了什么？我是新来的还原/反应。在此先感谢...

编辑：

当我通过在标识加入讯（deleteTodo（ID））我得到这个错误：

Answer 1

您需要的待办事项的id传递给RemoveTodo组件作为一个道具，然后将它传递给动作的创造者像

render() { 
    return (
     <li 
      onClick={this.props.onClick} 
      className="list-group-item justify-content-between border-c1 c1" 
     > 
      <span>{this.props.text} {this.props.completed ? <i className="fa fa-check"/> : null}</span> 
      <span className="badge c1-bg badge-pill"> 
      <RemoveTodo id={this.props.id} /> 
      </span> 
     </li> 
    ) 
    } 

然后

let RemoveTodo = ({id, dispatch}) => { 
    return (
     <div> 
     <a onClick={e => { 
      e.preventDefault() 
      dispatch(deleteTodo(id)) 

      //console.log(dispatch(deleteTodo(id))); 
     }}>Remove TODO</a> 
     </div> 
) 
} 

Answer 2

你是不是经过id参数
此：
dispatch(deleteTodo())
应改为这样：
dispatch(deleteTodo(3))

编辑
作为随访到您的评论和编辑，你应该通过一个有效的id值或变量已被定义当然。