ng-redux icon indicating copy to clipboard operation
ng-redux copied to clipboard

feat(connector): allow override of stateSliceEqualityComparer

Open g7ed6e opened this issue 5 years ago • 0 comments

Hi,

First of all, thanks for great job, ng-redux is a first class tool to move away from AngularJS service based state applications to a more robust state management solution.

In a large scale legacy application we started to refactor the whole app using ng-redux and are now facing a performance issue due to an increasing $digest cycle time.

We noticed the updateTarget method was called because the provided shallowEqual does not exactly fit our model shape. Please see below a sample component.

import template from './header-template.html';
import ngRedux from 'ng-redux';
import { Unsubscribe } from 'redux';
import { getProfile } from '../../store/profile/selectors';
import { getCustomer } from '../../store/project/selectors';

export interface IHeaderModel {
    profile: IProfileModel;
    customer: ICustomerOutput;
}

export const mapStateToThis = (state: IRootState) => {
    const profile = getProfile(state);
    const customer = getCustomer(state);
    const result = {
        model: {
            profile,
            customer,
        },
    };
    return result;
};

export class HeaderController implements angular.IController, IViewModel<IHeaderModel> {
    public model: IHeaderModel;
    public unsubscribe: Unsubscribe;
    constructor($ngRedux: ngRedux.INgRedux) {
        this.unsubscribe = $ngRedux.connect(mapStateToThis)(this);
    }

    public $onDestroy() {
        this.unsubscribe();
    }
}

HeaderController.$inject = ['$ngRedux'];

export const HeaderComponent: angular.IComponentOptions = {
    template,
    controller: HeaderController,
};

Motivation: The goal of this PR is to allow to override the default shallowEqual implementation at connect time and at component level.

g7ed6e avatar Sep 25 '19 09:09 g7ed6e