Почему изменяется Redux store?

Question

[WessBorland]

Здравствуйте.
Наблюдаю вот очень странное поведение в функциональной компоненте
Стэк React / Redux

Такая ситуация.

В функциональной компоненте через props получаю массив из redux store

Допустим

const GroupUsersList = (props) => {
  const modules = props.data 

  if (чего то там) {
    modules.users.push({ _id: user._id, name: `${user.ФИО} (${user.login})` })
  }
  return (
    <>
    </>
  )
}
export default GroupUsersList;

Но после того как я изменю массив с помощью одного из методов массива (push, splice
и т.д.) у меня тут же меняются данные в redux store

С чем это может быть связано?

Answer 1

[abberati]

С тем, что объекты (и массивы) в js передаются по ссылке. Вы пушите в массив, лежащий в сторе. Очевидно, что массив меняется.

Comments

[WessBorland]

во первых для изменения данных в store прежде их все же нужно задиспатчить не важно какого типа они, но ничего подобного я не делаю

во-вторых по вашей логике
const modules = { ...props.data }

должно помогать, но увы....здесь что то другое

[Макс]

WessBorland, Понятие "Мутация" вам о чем либо говорит? Вам все правильно сказали, вы пушите данные в объект по ссылке. Когда диспатчите, то в логе виден экшен и редакс стор обновляется новыми значения НЕ по ссылке, реакт понимает, что на пропы пришел новый объект и перерисовывается. В вашем же случае при обновлении объекта по ссылке реакт ничего не понимает и не перерисовывается, при этом в стор уже изменен.

[Robur]

во первых для изменения данных в store прежде их все же нужно задиспатчить

не "нужно". А "правильно - менять через диспатч". А вы меняете неправильным способом - напрямую изменяя объекты в сторе.

должно помогать,

не должно. От того что вы склонируете объект с пропсами, массив внутри не склонируется - останется тот же что и был.

x=[1,2,3]
c={a: x}
d={...c}
d.a[0] = 10

console.log(x) // посмотрите сами что тут будет

[WessBorland]

спасибо большое! разобрался! Я не учитывал, что вложенные внутри объекты и массивы тоже по ссылке передаются!

[WessBorland]

Robur, т.е. правильнее любые изменения (добавить, удалить, изменить элемент) в массивах производить в редьюсерах?

У меня не столь много опыта, поэтому я все же массив изменяю в компоненте (чаще все же в контейнерной) и результат уже диспатчу.

[Robur]

WessBorland, можно по разному, но возьмите за правило:
Если вы что-то получаете в пропсах в компоненте - это менять нельзя ни в каком виде.
Либо менять логику, либо делать полноценную копию и её уже менять.
массив можно склонировать через x.slice() например.

(ну или возьмите mobx и меняйте что хотите и как хотите не заморачиваясь ;))