angular-redux / ng-redux

Angular bindings for Redux
MIT License
1.16k stars 178 forks source link

feat(connector): allow override of stateSliceEqualityComparer #224

Open g7ed6e opened 4 years ago

g7ed6e commented 4 years ago

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.