title: dispatch action is not triggering reducer, despite using connect and mapDispatchToProps
body: <p>I have an <code>Icon</code> in <code>PostItem.jsx</code> , I have added <code>onClick</code> to it, <code>onClicking</code> the Icon it should dispatch an action of <code>type: LIKE_POST</code> ,</p>
  <p>Well If i <code>console.log()</code> inside my dispatch action, the code is working fine , but <code>reducer.js</code> is recognizing this action type and I can’t see any action trigger on the console (using <code>redux logger</code>).</p>
  <p><a href="https://codesandbox.io/s/suspicious-wescoff-vjpf3" rel="nofollow noreferrer">CodeSandbox</a></p>
  <p><strong>Click on the Posts Icon on the sidebar and it will render list of post. First Button is like button, second is dislike from Bottom Left</strong></p>
  <p><strong>Here is my snippet</strong></p>
  <pre><code>//PostItem.jsx
  
  const handleLike = (index) =&gt; {
  console.log(“Inside Like”);
  likePost(index);
  };
  
  const PostItem = ({ index, key, style, post }) =&gt; {
  return (
  
  {console.log(“PostItem Rendering”)}
  /*Some Extra Code*/}
    &lt;Card.Content extra&gt;
      &lt;Icon
        circular
        onClick={() =&gt; handleLike(index)}
        link
        name=&quot;heart&quot;
        className=&quot;mr-1 fs-icon-md&quot;
        color=&quot;teal&quot;
      &gt;&lt;/Icon&gt;
      &lt;Icon
        circular
        onClick={() =&gt; handleDislike(index)}
        link
        name=&quot;heartbeat&quot;
        className=&quot;mr-1 fs-icon-md&quot;
      /&gt;
      &lt;Icon circular link name=&quot;delete&quot; className=&quot;mr-1  fs-icon-md&quot; /&gt;
      &lt;Icon circular link name=&quot;upload&quot; className=&quot;fs-icon-md&quot; /&gt;
    &lt;/Card.Content&gt;
  &lt;/Card&gt;
  
  );
  };
  const mapDispatchToProps = (dispatch) =&gt; ({
  likePost: (index) =&gt; dispatch(likePost(index)),
  dislikePost: (index) =&gt; dispatch(dislikePost(index))
  });
  export default connect(null, mapDispatchToProps)(PostItem);
  </code></pre>
  <p>postAction.js</p>
  <p><strong>Here is my postActions.js</strong></p>
  <pre><code>// Action Creator
  
  export const likePost = (postIndex) =&gt; {
    console.log('Indise Like Action');
    return {
      type: postTypes.LIKE_POST,
      payload: postIndex,
    };
  };
  </code></pre>
  <p>Here is my postReducerr.js</p>
  <pre><code>//postRedcuer.js
  const INITIAL_STATE = {
  
    posts: [],
  
    createdPost: null,
  
    loading: true,
  
    error: null,
  
    likedAndDisLikedPost: null,
  
  };
  
  export const postReducer = (state = INITIAL_STATE, action) =&gt; {
  
    switch (action.type) {
  
    // Some Extra Cases removed
  
      case postTypes.LIKE_POST:
  
        return {
  
          ...state,
  
          likedAndDisLikedPost: {
  
            ...state.likedAndDisLikedPost,
  
            [action.payload]: { like: true, dislike: false },
  
          },
  
        };
  
      case postTypes.DISLIKE_POST:
  
        return {
  
          ...state,
  
          likedAndDisLikedPost: {
  
            ...state.likedAndDisLikedPost,
  
            [action.payload]: { like: false, dislike: true },
  
          },
  
        };
  
      default:
  
        return state;
  
    }
  
  };
  
  export default postReducer;
  </code></pre>