My actions is not firing reducer, why ??
I checked but couldn’t find out
Click on the Post menu on sidebar and then click the first button from bottom left. That is my like button.
My actions is not firing reducer, why ??
I checked but couldn’t find out
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