title: How to dispatch an action when a button is clicked?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//action code 
  export const CLEAR_COMPLETED = 'CLEAR_COMPLETED'
  
  export const clearCompleted = () =&gt; {
    return{
      type: CLEAR_COMPLETED
    }
  }
  
  
  //reducer code 
  
  case CLEAR_COMPLETED:
        return state.map(todo =&gt; {if (todo.completed)
          {return {...todo, show:false}}
            else {return todo}})</code></pre>
  </div>
  </div>
  </p>
  
  <p>
  Problem dispatching action on Todo application in react-redux. </p>
  
    
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import { connect } from 'react-redux'
  import { clearCompleted } from '../actions'
  
  
  const ClearButton = ({dispatch}) =&gt; {
    return(
      &lt;button fluid  onClick={e =&gt; {dispatch(clearCompleted())}}&gt;
        Clear Completed
      &lt;/button&gt;
    )
  }
  
  export default ClearButton</code></pre>
  </div>
  </div>
  </p>
  
  <p>
  Trying to change the store by clicking on Clear Completed Button. Clear Completed Button should remove the completed todos from the store and todo list should be updated. I am trying to call 'clearCompleted' action with Clear Completed Button. </p>