How to update multiple values with an array inside Reducer

Question

I have the following code to update the currentScore of a rubricItem object. This works fine.

case SAVE_SCORELIST_SUCCESS:
    const scoreItem = action.payload.scoreItem;
    return {
        ...state,
        loading: false,
        editing: false,
        rubricItems: {
            ...state.rubricItems,
            [scoreItem.rubricItemId]: {
                ...state.rubricItems[scoreItem.rubricItemId],
                currentScore: scoreItem.currentScore,
            }
        }
    };

However, I may receive an array object holding scores for multiple rubricItems instead of updating a single rubricItem with a single scorItem as I did above.

I know I can use .map() to iterate through the array:

scoreItems.map(si=>{})

But, I do not know how I can integrate it into this:

case SAVE_SCORELIST_SUCCESS:
    const scoreItems = action.payload.scoreItems;

    return {
        ...state,
        loading: false,
        editing: false,
        rubricItems: {
            ...state.rubricItems,
            [scoreItems[x].rubricItemId]: {
                ...state.rubricItems[scoreItems[x].rubricItemId],
                currentScore: scoreItems[x].currentScore,
            }
        }
    };

Any ideas?

Take out the logic of updating the item from the rubricItems. Apply a forEach or map on the payload. And then spread them together. — Utsav Patel
– Utsav Patel, Commented Apr 13, 2020 at 8:55
@UtsavPatel thank! How to do that : take out the logic of updating the item from the rubricItems? Any examples? — renakre
– renakre, Commented Apr 13, 2020 at 8:59

Utsav Patel · Accepted Answer · 2020-04-13 09:13:49Z

2

You can try this:

First you need to iterate over scoreItems and make a map object of updated score items.

Once you have done that, you can use the spread operator with the current score items in state.

case SAVE_SCORELIST_SUCCESS:
let updatedScoreItems = {};
action.payload.scoreItem.forEach(scoreitem => {
  updatedScoreItems[scoreItem.rubricItemId] = {
    ...state.rubricItems[scoreItem.rubricItemId],
    currentScore: scoreItem.currentScore,
  }
})
return {
  ...state,
  loading: false,
  editing: false,
  rubricItems: {
    ...state.rubricItems,
    ...updatedScoreItems
  }
};

edited Apr 13, 2020 at 9:13

answered Apr 13, 2020 at 9:08

Utsav Patel

2,9171 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guru Hadadi · Accepted Answer · 2020-04-13 09:29:42Z

1

Instead of mapping over scoreItem, map over the rubricItems which will be cleaner.

const updatedRubricItems = items.rubricItems.map(rubricItem => {
    const scoreForRubric = scoreItems.find(si => si.rubricItemId === rubricItem.id);// i assume you have some id for your rubric item
    if(scoreForRubric){
        return {...rubricItem, currentScore: scoreForRubric.currentScore}
    }else {
        return rubricItem
    }
});

return {
  ...state,
  loading: false,
  editing: false,
  rubricItems: updatedRubricItems
};

answered Apr 13, 2020 at 9:29

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to update multiple values with an array inside Reducer

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related