Блог

У меня есть Icon в PostItem.jsx , я добавил onClick к нему, onClicking значок, с помощью которого оно должно отправлять действие type: LIKE_POST ,

Что ж, если я console.log() выполняю свое действие отправки, код работает нормально, но reducer.js распознает этот тип действия, и я не вижу никакого триггера действия на консоли (используя redux logger ).

CodeSandbox

Нажмите на значок сообщений на боковой панели, и он отобразит список сообщений. Первая кнопка — это кнопка «Нравится», вторая — «Не нравится» внизу слева

Вот мой фрагмент

 //PostItem.jsx

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

const PostItem = ({ index, key, style, post }) => {
return (

{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);
  

postAction.js

Вот мой postActions.js

 // Action Creator

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

Вот мой postReducerr.js

 //postRedcuer.js
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;
  

Хорошо, понял, я забыл добавить likePost и dislikePost в компонент как props