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, либо самостоятельно реализовать запомненную функцию

с выбором вашей картыStateToProps будет выглядеть как

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

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