Как правильно добавить такой объект в store без перезаписи?

Question

[Антон Мяснов]

Всем доброго времени суток. Подскажите, пожалуйста, сам не могу разобраться.
Есть SPA на react redux.
Есть форма с кучей селектов и инпут. Заполняю все и по отправке формы отправляю в стор такой объект.

{
    name: "",
    grades: {
      russianLanguage: 0,
      literature: 0,
      englishLanguage: 0,
      mathematics: 0,
      algebra: 0,
      geometry: 0,
      physics: 0,
      history: 0,
      socialStudies: 0,
      odknr: 0,
      geography: 0,
      biology: 0,
      chemistry: 0,
      computerScience: 0,
      visualArt: 0,
      music: 0,
      technology: 0,
      physicalCulture: 0,
      lifeSafety: 0
    }
  };

В reducer я обрабатываю его так

case ADD_PUPIL:
return { ...state, pupils: [...state.pupils, action.payload] };

В сторе у меня есть массив и я хочу каждый раз добавлять такие объекты в массив.
Но каждый следующий dispatch перезаписывает в сторе каждый объект на последний отправленный. В самом начале проекта все работало как надо, потом неожиданно начало работать так.
Devtools показывает что отправляются action с разными payload

1 action: {
  type: 'ADD_PUPIL',
  payload: {
    name: 'фывфыв',
    grades: {
      russianLanguage: 0,
      literature: 0,
      englishLanguage: 0,
      mathematics: 0,
      algebra: 0,
      geometry: 0,
      physics: 0,
      history: 0,
      socialStudies: 0,
      odknr: 0,
      geography: 0,
      biology: 0,
      chemistry: 0,
      computerScience: 0,
      visualArt: 0,
      music: 0,
      technology: 0,
      physicalCulture: 0,
      lifeSafety: 0
    }
  }
2 action:
{
  type: 'ADD_PUPIL',
  payload: {
    name: '123123',
    grades: {
      russianLanguage: 4,
      literature: 4,
      englishLanguage: 4,
      mathematics: 4,
      algebra: 4,
      geometry: 4,
      physics: 4,
      history: 4,
      socialStudies: 4,
      odknr: 4,
      geography: 4,
      biology: 4,
      chemistry: 4,
      computerScience: 4,
      visualArt: 4,
      music: 4,
      technology: 4,
      physicalCulture: 4,
      lifeSafety: 4
    }
  }
}

Как правильно добавить такой объект в store без перезаписи?

Answer 1

[hzzzzl]

попробуй посмотреть так,
выглядит что со state.pupils что то не так, и поэтому создается пустой массив с одним элементом

case ADD_PUPIL:
console.log(state.pupils,  [...state.pupils, action.payload] ) // ?
return { ...state, pupils: [...state.pupils, action.payload] };

Comments

[Антон Мяснов]

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

[hzzzzl]

Антон Мяснов, и потом когда читаешь стор из компонента, то state.pupils это массив из 4 элементов, каждый из которых это копия последнего добавленного? т.е name: 234ыва?

[Антон Мяснов]

hzzzzl, я нашел где проблема. Если интересно то вот. В компоненте по клику я вызываю метод для сохранения значений из селектов и сохраняю их промежуточно в объект pupil, который создал просто в компоненте, без конструктор и прочего. И в методе я просто записывал значений в pupil, а потом отправлял его как payload экшена. Но потом я в методе использовал рест операторconst a = {...this.pupil} и записывал в a и отправлял a и все заработало как надо. Если вы знаете и расскажете нубу почему так нужно делать и почему не работает без него хотя экшены правильные уходили, я был бы очень благодарен.

[hzzzzl]

Антон Мяснов, ну с моей стороны сложно судить, не видя что там еще происходило в коде, и какой вообще результат получался :)
наверняка this.pupil в классе где-то еще успевал перезаписаться, а объекты в js передаются по ссылке, то есть до редусера доходила ссылка на уже измененный в памяти объект ..

const a = {...this.pupil} - а так создается отдельная копия объекта, которая уже не перезаписывалась (но это всё я предполагаю)