Redux Action with For loop doesn't work as expected - reactjs

Question

TLDR : Weird Mutations. Solved with re-assigning variables. But not the most efficient...
PREFACE
I have a component called Feed connected to redux
export class Feed extends Component {
bookmark = (id) => {
this.props.bookmarkItem(id).then(s=>{
this.props.updateFeed(this.props.feed, this.props.bookmarks);
}); //redux action with redux-thunk
}
render(){
//renders card items with a bookmark button on each card
//onPress button call this.bookmark(item.id)
}
}
const mapStateToProps = (state) => ({
feed: state.app.feed,
bookmarks: state.app.bookmarks
})
export default connect(mapStateToProps, { bookmarkItem, updateFeed })(Feed)
On pressing a button on the card, a this.bookmark() function is called and an action this.props.bookmarkItem(id) is called.
The bookmarkItem redux action looks like this.
export const bookmarkItem = (item_id) => async dispatch => {
try {
let r = await axios.post(`/bookmark`); //api call
let { bookmarks } = r; //get updated bookmarked items from api
dispatch({
type: cons.UPDATE_BOOKMARKED,
payload: { bookmarked }
});
return true;
}
catch (err) {
throw new Error(err);
}
}
Redux state looks like this
let app = {
feed: [{id:1}, {id:2}, {id:3}, {id:4}],
bookmarks:[{id:1}, {id:2}]
}
AIM
Now I gotta update the feed array in Redux State with property isBookmarked for that each item in feed.
(So that we can display that item is already bookmarked or not)
So for that I am calling another updateFeed() redux action
export const updateFeed = (feed, bookmarks) => dispatch => {
console.log('checkpoint 1', feed); //CHECKPOINT 1
for (let i = 0; i < feed.length; i++) {
if (bookmarks.length == 0) {
feed[i].isBookmarked = false; //mark item as NOT bookmarked
} else {
//check all bookmarks
for (let p = 0; p < bookmarks.length; p++) {
//if bookmark exists, set item in feed as isBookmarked:true
if (bookmarks[p].id === feed[i].id)
feed[i].isBookmarked = true; //mark item as bookmarked
}
}
}
dispatch({
type: cons.UPDATE_FEED,
payload: {
feed
}
});
};
PROBLEM
So there are a few problems I'm facing here:
At CHECKPOINT 1 the feed object logs a mutated feed with isBookmarked property in Google Chrome Console, even before the loop is started.
The payload that goes at UPDATE_FEED action is the with isBookmarked property, but the re-render of the feed never takes place.
HACKY WORKAROUND
Assigning feed to a new variable t in UPDATE_FEED action correctly mutates and then sends in the dispatch call.
But I'm not sure if this is the most efficient way to do it.
export const updateFeed = (feed, bookmarks) => dispatch => {
let t = JSON.parse(JSON.stringify(feed));
console.log('checkpoint 1', feed); //CHECKPOINT 1
for (let i = 0; i < t.length; i++) {
if (bookmarks.length == 0) {
t[i].isBookmarked = false; //mark item as NOT bookmarked
} else {
//check all bookmarks
for (let p = 0; p < bookmarks.length; p++) {
//if bookmark exists, set item in feed as isBookmarked:true
if (bookmarks[p].id === t[i].id)
t[i].isBookmarked = true; //mark item as isBookmarked
}
}
}
dispatch({
type: cons.UPDATE_FEED,
payload: {
feed : t //THIS WORKS CORRECTLY
}
});
};
Is waiting until that for loop is finished asynchronously a better way to do it ?
EXTRAS
Reducer looks like this. Pretty simple, only updates with new values, all cases handled by single switch method.
const initialState = {
feed: [],
bookmarks:[]
}
const app = (state = initialState, action) => {
console.log('appReducer', action, JSON.stringify(state));
switch (action.type) {
case cons.UPDATE_BOOKMARKS:
case cons.UPDATE_FEED:
{
state = {
...state,
...action.payload,
}
break;
}
}
return state;
}
export default app;

Answer 1

Assigning feed to a new variable t in UPDATE_FEED action correctly mutates
It simply means,your reducers not creating new state object.Its just mutate the state in place.
It uses === to check state update in state tree.
...action.payload it coping the same reference for feed object and nested element as it is in the new state.So,there is no state update.
Change cons.UPDATE_FEED like this.
state = {
...state,
...action.payload.feed,
}