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?

Answer 1

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
  }
};

Answer 2

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
};