Как избежать повторного рендеринга в компоненте «реакт-редукс»?

Question

У меня есть компонент response-redux SideBar.js, который подписывается на часть состояния избыточности.Когда состояние избыточности изменяется, этот компонент перерисовывается без необходимости, даже если он не подписывается на это изменяющееся состояние в избыточности.Поскольку мое состояние является вложенным, я не хочу делать глубокие сравнения в shouldComponentUpdate (), чтобы избежать повторного рендеринга ... как я могу избежать дополнительного повторного рендеринга?

const mapStateToProps = (state) => {
    return {
        guestLogin:{
            status : state.guestLogin.status,
            marketPlace:state.guestLogin.marketPlace,
            newsFeed:state.guestLogin.newsFeed
        },
        accountLogin:{
            showMemberPosts:state.accountLogin.showMemberPosts,
            newsFeed: state.accountLogin.newsFeed,
            marketPlace:state.accountLogin.marketPlace,
            userInfo:state.accountLogin.userInfo
        },
        marketPlace:{
            reset:state.marketPlace.reset,
            disableFilters:state.marketPlace.disableFilters,
            filters:state.marketPlace.filters,


        }

    };
};

const mapDispatchToProps = dispatch => {
    return {
        guestMarketPlaceClickHandler :()=>{dispatch(marketPlaceCLickHandlerDispatcher())},
        guestNewsFeedClickHandler:()=>{dispatch(newsFeedClickHandlerDispatcher())},
        memberMarketPlaceClickHandler:()=>{dispatch(marketPlaceCLickHandlerDispatcher())},
        memberNewsFeedClickHandler:()=>{dispatch(newsFeedClickHandlerDispatcher())},
        myPostsClickHandler:()=>{dispatch(myPostsClickHandlerDispatcher());},
        dispatch:(action)=>{dispatch(action)}
    }
};

export default connect(mapStateToProps,mapDispatchToProps)((SideBar));

Answer 1

Подключение вашего компонента к redux делает его PureComponent.То есть, он сделает поверхностное сравнение реквизита, чтобы решить, нужно ли сделать повторный рендеринг.Вложив значения вашего хранилища в mapStateToProps, вы гарантируете, что поверхностное сравнение не удастся.

То есть guestLogin: {...} каждый раз создает новый объект для значения guestLogin.

Youможно использовать reselect или эквивалентное решение для создания селекторов, которые возвращают одни и те же объекты, пока состояние не изменяется, или просто сделать ваш mapStateToProps поверхностным, например ..

const mapStateToProps = (state) => {
    return {
        glStatus : state.guestLogin.status,
        glMarketPlace:state.guestLogin.marketPlace,
        glNewsFeed:state.guestLogin.newsFeed
        alShowMemberPosts:state.accountLogin.showMemberPosts,
        alNewsFeed: state.accountLogin.newsFeed,
        alMarketPlace:state.accountLogin.marketPlace,
        alUserInfo:state.accountLogin.userInfo
        mpReset:state.marketPlace.reset,
        mpDisableFilters:state.marketPlace.disableFilters,
        mpFilters:state.marketPlace.filters,
    };
};