Как обновить несколько значений с помощью массива внутри Reducer

Question

У меня есть следующий код для обновления currentScore объекта rubricItem. Это прекрасно работает.

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

Однако я могу получить объект массива, содержащий оценки для нескольких rubricItems, вместо обновления одного rubricItem одним scorItem, как я делал выше.

Я знаю, что могу использовать .map() для итерации массива:

scoreItems.map(si=>{})

Но я не знаю, как я могу интегрировать его в это:

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

Любой идеи?

Answer 1

Вы можете попробовать это:

Сначала вам нужно выполнить итерации по ScoreItems и создать map объект из обновленных элементов оценки.

Как только вы это сделаете, вы можете использовать spread оператор с текущими пунктами счета в состоянии.

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

Вместо отображения на scoreItem отобразите карту на rubricItems, которая будет чище.

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