reduxで "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：未定義。どうして？私はここで何が欠けているのですか？私は還元/反応するのが新しいです。事前のおかげで...

EDIT：

私は派遣（deleteTodo（ID））に、idを渡す私はこのエラーを取得する：

Answer 1

あなたが小道具としてRemoveTodo ComponentにTODOのIDを渡し、その後

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())
は、このように変更する必要があります

EDIT
あなたのコメントや編集へのフォローとして、あなたはもちろん、定義されている有効なid値または変数を渡す必要があります。