'How to alter array within an object of a state using redux toolkit
How to alter likes array within a post element of the state using redux toolkit in reactjs?
Data:
postLists: [
{
_id: '61978be44ad9dcef6ea24bb1',
title: 'Welcome Nuxt Js',
category: 'Nuxt JS',
isLiked: false,
isDisLiked: false,
numViews: 1,
likes: [],
disLikes: [],
user: '619094623616b44ff3eb80f8',
description: 'Welcome to new web development framework called Nuxt JS. It is built on top of Node JS.',
image: '',
createdAt: '2021-11-19T11:35:00.976Z',
updatedAt: '2022-02-01T07:12:33.269Z',
__v: 0,
likesCount: 0,
commentsCount: 2,
id: '61978be44ad9dcef6ea24bb1'
},
]
I tried to add likes like below but it isn't updating the likes array:
//Likes
builder.addCase(toggleAddLikesToPost.pending, (state, action) => {
state.loading = true;
});
builder.addCase(toggleAddLikesToPost.fulfilled, (state, action) => {
console.log('action', action);
// state.likes = action?.payload;
state.posts.find((post) =>
post._id === action.meta.arg[0]
? { ...post, likes: [...action.payload.user] }
: post
);
console.log('state', state.posts);
state.loading = false;
state.appErr = undefined;
state.serverErr = undefined;
});
builder.addCase(toggleAddLikesToPost.rejected, (state, action) => {
state.loading = false;
state.appErr = action?.payload?.message;
state.serverErr = action?.error?.message;
});
Solution 1:[1]
state.posts = state.posts
.map((post) => post._id === action.meta.arg[0]
? { ...post, likes: [...action.payload.user] } : post
);
Solution 2:[2]
const found = state.posts.find((post) => post._id === action.meta.arg[0])
if (found) {
// modify it here - completely replace it with `user`:
found.likes = action.payload.user;
// or add it at the end:
found.likes.push(action.payload.user)
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Dinindu Kanchana |
| Solution 2 | phry |
