React not updating state on reused component? - reactjs

Question

I'm updating a project from a MERN stack course I completed earlier. It has a 'Like' and 'Dislike' button, which update in MongoDB, and then the updated number of likes gets rendered to the screen. Right now, it's updating the database, but not re-rendering the updated information on the screen.
For example, I'll hit the like button on a post (should take it from 2 likes to 3). I can see the updated information in MongoDB (3), but it never adds the like on the screen (2). Additionally, Redux DevTools tells me it didn't update the state automatically (still 2). I then hit the 'refresh' button on my browser, and the updated number of likes is there (3).
I used this component and these actions/reducers in another component, and they work perfectly. For some reason, it's behaving differently here. Maybe something to do with the props I'm passing in? UseEffect issue?
I tried console.logging the likes property (post.likes) before and after the PostLikeAndDislike component, and it's the same number of likes both times (that is, if it's 3 before I click, it's 3 after I click).
PostLikeAndDislike component:
const PostLikeAndDislike = ({
addLike,
removeLike,
deletePost,
auth,
post: { _id, text, name, avatar, user, likes, comments, date },
showActions
}) => (
<div className="post bg-white p-1 my-1">
<div>
{showActions && (
<Fragment>
<button
onClick={e => addLike(_id)}
type="button"
className="btn btn-light"
>
<i className="fas fa-thumbs-up" />{' '}
{likes.length > 0 && <span>{likes.length}</span>}
</button>
<button
onClick={e => removeLike(_id)}
type="button"
className="btn btn-light"
>
<i className="fas fa-thumbs-down" />
</button>
</Fragment>
)}
</div>
</div>
)
PostLikeAndDislike.defaultProps = {
showActions: true
}
const mapStateToProps = state => ({
auth: state.auth
})
export default connect(
mapStateToProps,
{ addLike, removeLike, deletePost }
)(PostLikeAndDislike)
The component PostLikeAndDislike is being imported into:
const Post = ({ getPost, post: { post, loading }, match }) => {
useEffect(
() => {
getPost(match.params.id)
},
[getPost]
)
return loading || post === null ? (
<Spinner />
) : (
<Fragment>
{console.log('Before', post.likes)}
<PostLikeAndDislike post={post} showActions={true} />
<div className="comments">
{post.comments.map(comment => (
<CommentItem key={comment._id} comment={comment} postId={post._id} />
))}
</div>
{console.log('After', post.likes)}
<CommentForm postId={post._id} />
</Fragment>
)
}
const mapStateToProps = state => ({
post: state.post
})
export default connect(
mapStateToProps,
{ getPost, addLike, removeLike }
)(Post)
Actions:
// Get post
export const getPost = id => async dispatch => {
try {
const res = await axios.get(`/api/posts/${id}`)
dispatch({
type: GET_POST,
payload: res.data
})
} catch (err) {
dispatch({
type: POST_ERROR,
payload: { msg: err.response.statusText, status: err.response.status }
})
}
}
// Add like
export const addLike = id => async dispatch => {
try {
const res = await axios.put(`/api/posts/like/${id}`)
dispatch({
type: UPDATE_LIKES,
payload: { id, likes: res.data }
})
} catch (err) {
dispatch({
type: POST_ERROR,
payload: { msg: err.response.statusText, status: err.response.status }
})
}
}
// Remove like
export const removeLike = id => async dispatch => {
try {
const res = await axios.put(`/api/posts/unlike/${id}`)
dispatch({
type: UPDATE_LIKES,
payload: { id, likes: res.data }
})
} catch (err) {
dispatch({
type: POST_ERROR,
payload: { msg: err.response.statusText, status: err.response.status },
loading: false
})
}
}
Reducer:
const initialState = {
posts: [],
post: null,
loading: true,
error: {}
}
case GET_POST:
return {
...state,
post: payload,
loading: false
}
case UPDATE_LIKES:
return {
...state,
posts: state.posts.map(
post =>
post._id === payload.id ? { ...post, likes: payload.likes } : post
)
}
Like I said above, I'm expecting the 'like' button and 'dislike' button to change the number of likes and re-render it to the screen immediately.
Thanks in advance!