title: React-Redux removing(delete) an item on click
body: <p>I am learning react-redux, so now I am trying to create react-redux crud app,  here is ny solution</p>
  <p>Here is repo : <a href="https://github.com/throne1986/twitter-app" rel="nofollow noreferrer">repo demo</a></p>
  <p>The button</p>
  <pre><code>&lt;span className=&quot;delete_info&quot; onClick={() =&gt; deleteComment(comment.id) }&gt;Delete&lt;/span&gt;
  </code></pre>
  <p>The action creator to delete element</p>
  <pre><code>export const removeComment = id =&gt;{
    return{
      type: ActionTypes.DELETE_COMMENTS,
      payload:id
    }
  }
  // delete comments
  
  export const deleteComment = id =&gt;{
    console.log('ids', id);
    return dispatch =&gt;{
      dispatch(fetchCommentsRequest())
      axios.delete(`/api/v1/todo/${id}`)
      .then(response =&gt;{
        console.log('yeees mom', response.data)
        dispatch(removeComment(id))
      })
      .catch(error =&gt;{
        const erroMsg =error.message;
        console.log('eeeror', erroMsg)
        dispatch(fetchCommentsFailure(erroMsg))
      })
    }
  }
  </code></pre>
  <p>Here is my reducer</p>
  <pre><code>import * as ActionTypes from '../action-types'
  
  const initialState ={
      data:[],
      error:'',
      comments:[],
      loading:false,
      editing:false
  }
  
  const reducer = (state= initialState, action) =&gt; {
      switch (action.type) {
          case ActionTypes.FETCH_COMMENTS_REQUEST:
              return{
                  ...state,
                  loading: true,
              }
          case ActionTypes.FETCH_COMMENTS_SUCCESS:
              return{
                  ...state,
                  loading:false,
                  comments:action.payload,
                  error:''
              }
          case ActionTypes.FETCH_COMMENTS_FAILURE:
              return{
                  ...state,
                  loading:false,
                  error:action.payload
              }
          case ActionTypes.ADD_COMMENTS:
              return{
                  ...state,
                comments:state.comments.concat(action.payload)
              }
              
          case ActionTypes.DELETE_COMMENTS:
                  return{
                      ...state,
                      comments: state.comments.filter(comment =&gt;comment.id !==action.payload)
          
                  }
          case ActionTypes.EDIT_COMMENTS:
              return{
                   ...state,
                   comments: state.comments.map(comment =&gt;comment.id === action.payload?{
                       
                       ...comment,
                       editing:!editing
                   }:comment)
              }
              default: // need this for default case
                      return state 
      }
  }
  export default reducer
  </code></pre>
  <p>Now when I click delete, I see on the console the ID from action creators, but the element is not removed
  and no errors, what is wrong here?</p>