React Redux mapStateToProps - это повторный рендеринг

Question

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

function mapStateToProps({reducerContent},ownProps) {
    return {
        ...reducerContent
    }
}

он не будет повторно отображаться (если я отправлю тот же набор данных), но эта форма mapStateToProps повторно отобразит мой компонент:

function mapStateToProps({reducerContent},ownProps) {
    return {
        data: {
            ...reducerContent
        }
    }
}

Внизу вы можете найти мой редуктор и компонент. редуктор: (action.data - мелкий объект):

const reducerContent = (state = {}, action) => {
    switch ( action.type ){
        case types.GET_CONTENT:
            return {
                ...state,
                ...action.data
            };

        default:
            return state;
    }
};

Компонент (будет доработан):

import React, {Component}   from 'react';
import {connect}            from 'react-redux';

class Content extends Component {
    render() {
        return {this.props.content}
    }
}

function mapStateToProps({reducerContent},ownProps) {
    return {
        ...reducerContent
    }
}

export default connect(mapStateToProps,null)(Content)

Answer 1

connect это реализовать как PureComponent то есть он делает поверхностное сравнение значений, поступающих из mapStateToProps и решает, следует ли сделать повторную визуализацию или нет.

Теперь, когда вы предоставляете данные, как

{
    data: {
        ...reducerContent
    }
}

Неглубокое сравнение не удается, поскольку вы клонировали reducerContainer и, следовательно, nextProps.data не равно this.props.data, Чтобы избежать таких ситуаций, вы обычно идете на memoization, Для этого вы можете использовать reselect или самостоятельно запомнившуюся функцию

с выберите ваш mapStateToProps будет выглядеть

const getReducedDataSelector = createSelector(
   state => state.reducerContent,
   (reducedContent) => ({...reducedContent})
);
function mapStateToProps(state,ownProps) {
    return {
        data: getReducedDataSelector(state, ownProps);
    }
}

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