Метод Redux useSelector Hook возвращает ссылку на модель данных вместо нового объекта?

Question

Я новичок в React и Redux.Я использую react 16.9 с redux 4.0.4 и react-redux 7.1.1.

. Я замечаю, что могу напрямую получить доступ к базовой модели данных Redux (объектам в хранилище), не отправляя действия.

Рассмотримследующий компонент:

import React from 'react';
import { useSelector } from 'react-redux';

function MyComponent(props) {
    const obj = useSelector(state => state.objReducer);
    obj.newProperty = 'foo';

    return <div />;
}

Когда компонент смонтирован, newProperty: foo будет добавлен к objReducer.

Насколько я понимаю, мы должны отправлять действия редукторам для внесения измененийк базовой модели данных.Также, как указано здесь , «С помощью useSelector () возвращение нового объекта каждый раз всегда будет вызывать повторную визуализацию по умолчанию».Так что useSelector должен возвращать новый объект вместо реального объекта данных, верно?

Мне интересно, почему React-Redux useSelector предоставляет разработчикам доступ к актуальным данным.

Answer 1

Вы изменяете глобальное состояние с obj.property = 'foo';, который является анти-паттерном.

useSelector является эквивалентом mapStateToProps в "старом" реаги-редукте, который использовался исключительно дляполучить доступ к состоянию внутри компонента.

Если вы измените состояние с помощью мутаций, как вы делаете, ссылка на состояние не изменится, и ваши компоненты, слушающие это состояние, не будут визуализироваться.

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