Как проходит сравнение объектов в mapStateToProps?

Question

[AndreyRaf13]

Добрый день. Подскажите пожалуйста, как проходит сравнение объектов в mapStateToProps для определения того, нужно ли перерендерить компонент. Интересует вот такой случай. Есть в сторе стейт:

const state = {
    first: {
        second: {
            data: {
               a: 2, b: 3
            }
        }
    }
}

В mapStateToProps я получаю доступ к data и надеюсь, что когда у меня поменяется a или b то компонента перерендерится.

{
data: state.first.second.data
}

Понимаю, что будет сравниваться data, и при этом по ссылке. Но будут ли сравниваться first и second? Если нет, то зачем в reducer тогда рекомендуется делать копии на всех уровнях вложенности? Например, я хочу изменить a и мне нужно сначала сделать копию ...first, потом копию ...second и уже потом data: {...state.data, a}. Если у меня сравниваются между собой только ссылки на data, то я могу не делать копи на first и second? Или же сравнение происходит по-другому?

Comments

[Петр Мухуров]

Подозреваю, это связано с тем, что в first или second может изначально может лежать ссылка на объект, а не сам объект, тогда spread скопирует первый уровень объекта, но ссылка на first/second останется прежней. Но это не точно, я не работал с redux :)

Answer 1

[grinat]

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

Comments

[AndreyRafalsky132]

Так зачем тогда рекомендуется делать копии ...first и ...second?

[grinat]

AndreyRafalsky132, чтобы был полностью новый объект. Просто ты можешь задипасчить глубоко вложенный объект, который состоит из других объектов, и соотвественно ты мутируя те объекты, будешь мутировать стор. К примеру у тебя есть блог, и можешь редактировать статьи, редактирование убегает в черновик, и чел поредаткировал и вернулся назад, по факту ничего не изменив, но так как он по факту мутировал ссылку, то ему будет отображатся отредактированный пост.

[AndreyRafalsky132]

grinat, так если я напишу first.second.data: {a, b} я изменяю data. MapStateToProps увидит что data изменилась и запустит рендер. Ему все равно же, новые ли first second или те же. Не понимаю, зачем создавать промежуточные копии для first и second

[Владимир]

AndreyRafalsky132,
Потому что в этом компоненте ты отслеживаешь data, в другом - first если изначально делать неправильно потом задолбаешся искать где же ты оставил старый объект

[AndreyRafalsky132]

Владимир, понял, спасибо