React Context - Post Like / Unlike feature - reactjs

Question

I am building post like / unlike feature using React context, but I have no idea what to do in reducer to update UI. Currently when I click like / unlike button, ui doesn't update instantly, have to refresh page to see the update.
backend logic
exports.likePost = async (req, res) => {
try {
const result = await Post.findByIdAndUpdate(
req.body.postId,
{
$push: { likes: req.body.userId },
},
{ new: true }
);
return res.json(result);
} catch (err) {
console.log(err.message);
}
};
exports.unlikePost = async (req, res) => {
try {
const result = await Post.findByIdAndUpdate(
req.body.postId,
{
$pull: { likes: req.body.userId },
},
{ new: true }
);
return res.json(result);
} catch (err) {
console.log(err.message);
}
};
component
{post.likes.includes(loggedInUser._id) ? (
<IconButton
color="secondary"
component="span"
onClick={() => unlikePost(loggedInUser._id, post._id)}
>
<Like />
</IconButton>
) : (
<IconButton
color="secondary"
component="span"
onClick={() => likePost(loggedInUser._id, post._id)}
>
<Unlike />
</IconButton>
)}
context
const initialState = {
posts: [],
};
// Like post
const likePost = async (userId, postId) => {
try {
const res = await axios.put(
`/api/posts/like`,
{ userId, postId },
{
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
dispatch({ type: "LIKE_POST", payload: res.data });
} catch (err) {
console.log(err);
}
};
// Unlike post
const unlikePost = async (userId, postId) => {
try {
const res = await axios.put(
`/api/posts/unlike`,
{ userId, postId },
{
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
dispatch({ type: "UNLIKE_POST", payload: res.data });
} catch (err) {
console.log(err);
}
};
reducer
case "LIKE_POST":
return {
...state,
posts: // ???
),
};
case "UNLIKE_POST":
return {
...state,
posts: // ???,
};
What should be the logic for reducer?

Answer 1

Something like this:
case "LIKE_POST":
return {
...state,
like: action.likeValue,
};
case "UNLIKE_POST":
return {
...state,
unlike: action.unlikeValue,
};
When you want to change the value:
dispatch({ type: "LIKE_POST", likeValue: res.data });
dispatch({ type: "UNLIKE_POST", unlikeValue: res.data });
In your initial state:
const initialState = {
posts: [],
like: [],
unlike: [],
};
Here is a good explanation, which helped me: link