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

109
27 ноября 2021, 20:20

Подскажите пожалуйста, как проходит сравнение объектов в 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.first.second.data, a}. Если у меня сравниваются между собой только ссылки на data, то я могу не делать копи на first и second? Или же сравнение происходит по-другому?

Answer 1

В React-Redux mapStateToProps работает к компоненту, никакого мониторинга для определения необходимости изменения не происходит и при каждом изменении состояния компоненту передается обособленная копия.

При получение обособленной копии сегмента состояния необходимость применения обновления к DOM древу определяет непосредственно React

READ ALSO
Правильное ли решение этой задании таким образом?

Правильное ли решение этой задании таким образом?

Создайте функцию конструктор Calculator, которая создаёт «расширяемые» объекты калькулятораРеализуйте метод calculate(str), который принимает строку...

191
Confirm с альтернативными ответами в JavaScript

Confirm с альтернативными ответами в JavaScript

Возможно ли сделать confirm где кнопки будут содержать не 'ОК' и 'Отмена', а другие значения, к примеру 'Да' и 'Нет'?

83
Удалить все элементы содержание класс

Удалить все элементы содержание класс

Начал изучать чистый javascriptПредставим проверку формы, где ошибки выводится под каждым тегом input элементом <span class="error"></span>

104