My Actions is not firing reducer

My actions is not firing reducer, why ??
I checked but couldn’t find out

My code

Click on the Post menu on sidebar and then click the first button from bottom left. That is my like button.

project not clear enough. youre gonna have to help me out to narrow down the problem.

Yes sure.

I have an Icon in PostItem.jsx , I have added onClick to it, onClicking the Icon it should dispatch an action of type: LIKE_POST ,

Well If i console.log() inside my dispatch actions, the code is working fine , but reducer.js is recognizing this action type and I can’t see any action trigger on the console (using redux logger).

Below is my snippet

PostItem.jsx

const handleLike = (index) => {
  console.log("Inside Like");
  likePost(index);
};

const PostItem = ({ index, key, style, post }) => {
  return (
    <Card style={style} key={key} index={index}>
      {console.log("PostItem Rendering")}

      {/*Some Extra Code*/}
      <Card.Content extra>
        <Icon
          circular
          onClick={() => handleLike(index)}
          link
          name="heart"
          className="mr-1 fs-icon-md"
          color="teal"
        ></Icon>
        <Icon
          circular
          onClick={() => handleDislike(index)}
          link
          name="heartbeat"
          className="mr-1 fs-icon-md"
        />
        <Icon circular link name="delete" className="mr-1  fs-icon-md" />
        <Icon circular link name="upload" className="fs-icon-md" />
      </Card.Content>
    </Card>
  );
};
const mapDispatchToProps = (dispatch) => ({
  likePost: (index) => dispatch(likePost(index)),
  dislikePost: (index) => dispatch(dislikePost(index))
});
export default connect(null, mapDispatchToProps)(PostItem);

Here is my postActions.js

// Action  Creator

export const likePost = (postIndex) => {
  console.log('Indise Like Action');
  return {
    type: postTypes.LIKE_POST,
    payload: postIndex,
  };
};

Here is how my postReducer.js Looks like

const INITIAL_STATE = {

  posts: [],

  createdPost: null,

  loading: true,

  error: null,

  likedAndDisLikedPost: null,

};

export const postReducer = (state = INITIAL_STATE, action) => {

  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;

Hey there,

I’ve edited your post for readability, because it was very hard to read.

You can use the “preformatted text” tool in the editor ( </> ) to add code.

That’s a hard one.

So the reducer works partially, until you want to like or dislike.

I would try to remove the thunkgs that fetch from the API, e.g. by adding some hardcoded data and see if it also breaks without other actions before like/dislike