title: Remove "TODO" with redux
body: <p>I've a simple app built with react/redux. In my "TODO"-app, I can add items and filter them. I've simply just followed <a href="http://redux.js.org/docs/basics/ExampleTodoList.html" rel="nofollow noreferrer">this example</a>. But I also tried to add a method that actually removes an item, but it doesn't seem to work.</p>
  
  <p><a href="https://i.stack.imgur.com/LPGDC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LPGDC.png" alt="enter image description here"></a></p>
  
  <p>Actions:</p>
  
  <pre><code>let nextTodoId = 0
  export const addTodo = text =&gt; {
    return {
      type: 'ADD_TODO',
      id: nextTodoId++,
      text
    }
  }
  
  export const setVisibilityFilter = filter =&gt; {
    return {
      type: 'SET_VISIBILITY_FILTER',
      filter
    }
  }
  
  export const toggleTodo = id =&gt; {
    return {
      type: 'TOGGLE_TODO',
      id
    }
  }
  
  export const deleteTodo = id =&gt; {
    return {
      type: 'DELETE_TODO',
      id: id
    }
  }
  </code></pre>
  
  <p>Reducer:</p>
  
  <pre><code>const todos = (state = [], action) =&gt; {
    switch (action.type) {
      case 'ADD_TODO':
        return [
          ...state,
          {
            id: action.id,
            text: action.text,
            completed: false
          }
        ];
      case 'TOGGLE_TODO':
        return state.map(todo =&gt;
            (todo.id === action.id)
                ? {...todo, completed: !todo.completed}
                : todo
        );
      case 'DELETE_TODO':
        return state.filter(todo =&gt; todo.id !== action.id);
      default:
        return state
    }
  }
  
  export default todos
  </code></pre>
  
  <p>And in my container:</p>
  
  <pre><code>import React from 'react'
  import {connect} from 'react-redux'
  import {deleteTodo} from '../actions'
  
  let RemoveTodo = ({dispatch}) =&gt; {
    return (
        &lt;div&gt;
          &lt;a onClick={e =&gt; {
            e.preventDefault()
            // dispatch(deleteTodo())
  
            console.log(dispatch(deleteTodo()));
          }}&gt;Remove TODO&lt;/a&gt;
        &lt;/div&gt;
    )
  }
  
  RemoveTodo = connect()(RemoveTodo)
  
  export default RemoveTodo
  </code></pre>
  
  <p>Components:</p>
  
  <pre><code>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 (
          &lt;li
              onClick={this.props.onClick}
              className="list-group-item justify-content-between border-c1 c1"
          &gt;
            &lt;span&gt;{this.props.text} {this.props.completed ? &lt;i className="fa fa-check"/&gt; : null}&lt;/span&gt;
            &lt;span className="badge c1-bg badge-pill"&gt;
              &lt;RemoveTodo /&gt;
            &lt;/span&gt;
          &lt;/li&gt;
      )
    }
  }
  
  Todo.propTypes = {
    onClick: PropTypes.func.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired,
    id: PropTypes.number.isRequired
  }
  </code></pre>
  
  <p>For some reason, my "dispatch(deleteTodo())" doesn't find the id... When I log it, I simply get an object: type: "DELETE_TODO", id: undefined. Why? What am I missing out here? I'm new to redux/react. Thanks in advance...</p>
  
  <p>EDIT:</p>
  
  <p>When I pass in the id into dispatch(deleteTodo(id)) I get this error:</p>
  
  <p><a href="https://i.stack.imgur.com/EeMMI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EeMMI.png" alt="enter image description here"></a></p>