Как правильно обновить элемент в моем массиве в избыточном, не изменяя?

Question

const state = [
    {
        list: []
    }
];

Список представляет собой список объектов учащихся, например:

list: [
   { id: 1, name: "Mark", attendance: true },
   { id: 2, name: "John", attendance: false }
]

У меня есть кнопка, которая запускает почтовый запрос к API, чтобы изменить посещаемость на true. Запрос на публикацию возвращает объект студента, который был изменен, как, например, в ::100100

{ id: 2, name: "John", attendance: true }

Это отлично работает и, если ошибок нет, отправит ATTENDANCE_SUCCESS.

Теперь, с такой настройкой:

export function students(state, action) {
    let latestState = state[state.length - 1],
        newState = Object.assign({}, latestState);
    switch (action.type) {
       case "ATTENDANCE_SUCCESS":
          if (action.res.errorCode == 0) {
             // Need to change redux state 'attendance' value to true for a student with ID returned from the POST request
          }
    }

Первоначально я сделал:

const studentChanged = newState.list.find(function(student) {
  return (
        student.id ===
        action.res.data.id
  );
});
studentChanged.attendance = true;

Но он мутирует состояние в хранилище редуксов (хотя я не уверен, как именно это происходит, поскольку я предположил, что newState уже является копией).

Как правильно?

Answer 1

Следующее будет обновлять один элемент в массиве.Критическим аспектом здесь является то, что если id элемента не соответствует id из полезной нагрузки действия, он возвращает элемент без изменений, в противном случае он обновляет свойство attendance.Array.prototype.map возвращает новый массив, поэтому он будет неизменным.

export function students(state, action) {
  switch (action.type) {
    case "ATTENDANCE_SUCCESS":
      if (action.res.errorCode == 0) {
        return state.map(student => {
          // we want to leave non matching items unaltered
          if (student.id !== action.res.data.id) {
            return student;
          }

          return { ...student, attendance: true };
        });
      }

      return state;          
    default:
      return state;
  }
}

Вот StackBlitz для демонстрации функциональности.

Надеюсь, это поможет!