Объединение множественного / избыточного оператора выбора магазина ngrx - PullRequest
Новая
       22

Объединение множественного / избыточного оператора выбора магазина ngrx

0 голосов
/ 26 июня 2018

Я занимаюсь разработкой приложения с использованием ngrx / angular4 +. Шаблон проектирования, который здесь разрабатывается, кажется очень избыточным, и он связан с тем, как вы подписываетесь на редукторы Магазина.

В компоненте не редкость следующая ситуация: 

HOFDetails$:Observable<any>;
HOFDetails$SUB:ISubscription;
HOFMobile$:Observable<any>;
HOFMobile$SUB:ISubscription;
HOFMobile:any;
HOFHome$:Observable<any>;
HOFHome$SUB:ISubscription;
HOFHome:any;
SPDetails$:Observable<any>;
SPDetails$SUB:ISubscription;
SPMobile$:Observable<any>;
SPMobile$SUB:ISubscription;
SPMobile:any;
SPHome$:Observable<any>;
SPHome$SUB:ISubscription;
SPHome:any;
EmergencyDetails$:Observable<any>;
EmergencyDetails$SUB:ISubscription;
EmergencyDetails:any;
EmergencyMobile$:Observable<any>;
EmergencyMobile$SUB:ISubscription;
EmergencyMobile:any;
EmergencyHome$:Observable<any>;
EmergencyHome$SUB:ISubscription;
EmergencyHome:any;
EmergencyList$:Observable<any>;
EmergencyList$SUB:ISubscription;
EmergencyList:any;
countries$:Observable<any>;
countries$SUB:ISubscription;
countries:any;
valueIds$:Observable<any>;
valueIds$SUB:ISubscription;
valueIds:any;
lang$:Observable<any>;
lang$SUB:ISubscription; 
//the subscriptions
    this.lang$ =  this.store.select(fromroot.getLanguage);
    this.lang$SUB = this.lang$.subscribe((v:string)=>this.lang = v);
    this.HOFDetails$ = this.store.select(from_costumer.getHOF);
    this.HOFDetails$SUB = this.HOFDetails$.subscribe((v)=> {});
    this.HOFMobile$ = this.store.select(from_costumer.getHOFMobile);
    this.HOFMobile$SUB = this.HOFMobile$.subscribe((v)=> {});
    this.HOFHome$ = this.store.select(from_costumer.getHOFHome);
    this.HOFHome$SUB = this.HOFHome$.subscribe((v)=> {});
    this.SPDetails$ = this.store.select(from_costumer.getSP);
    this.SPDetails$SUB = this.SPDetails$.subscribe((v)=> {});
    this.SPMobile$ = this.store.select(from_costumer.getSPMobile);
    this.SPMobile$SUB = this.SPMobile$.subscribe((v)=> {});
    this.SPHome$ = this.store.select(from_costumer.getSPHome);
    this.SPHome$SUB = this.SPHome$.subscribe((v)=> {});
    this.EmergencyDetails$ = this.store.select(from_costumer.getEmergency);
    this.EmergencyDetails$SUB = this.EmergencyDetails$.subscribe((v)=>this.EmergencyDetails = v);
    this.EmergencyList$ = this.store.select(from_costumer.getEmergencyList);
    this.EmergencyList$SUB = this.EmergencyList$.subscribe((v:any)=> {});
    this.EmergencyMobile$ = this.store.select(from_costumer.getEmergencyMobile);
    this.EmergencyMobile$SUB = this.EmergencyMobile$.subscribe((v:any)=> {});
    this.EmergencyHome$ = this.store.select(from_costumer.getEmergencyHome);
    this.EmergencyHome$SUB = this.EmergencyHome$.subscribe((v:any)=> {});
    this.countries$ = this.store.select(from_geo.getCountries);
    this.countries$SUB = this.countries$.subscribe((v:any)=> this.countries = v);
    this.valueIds$ = this.store.select(from_geo.getCountryIds);
    this.valueIds$SUB = this.valueIds$.subscribe((v:any)=>this.valueIds = v);

Весь этот код только для 13 свойств для этого , не включая логику назначения внутри подписок и отписки.

Это кажется мне невероятно повторяющимся и избыточным.

Есть ли способ упаковать все это в какой-то пакет многоразового использования? Может быть, на основе компонентов или на основе маршрута?

Ответы [ 2 ]

0 голосов
/ 26 июня 2018

Сократите это до этого в вашем компоненте контейнера: 

// inject ngrx store in constructor
constructor(private store: Store) {}

// lang$ as class property, no extra code needed.
lang$: Observable<any> = this.store.select(fromroot.getLanguage);

Вероятно, вам не нужно устанавливать локальную подпорку this.lang, просто передайте наблюдаемые любому из ваших компонентов представления и используйте асинхронные каналы.

0 голосов
/ 26 июня 2018

удалить подписки, удалить распакованные переменные (например, countries:any;). то, что у вас осталось, только Observables. поместите их в контейнерные (интеллектуальные) компоненты и свяжите эти наблюдаемые с вашими (немыми) презентационными компонентами, используя async pipe.

например: 

lang$ : Observable<whatevertype>;

constructor(){
   this.lang$ =  this.store.select(fromroot.getLanguage);
}

в шаблоне: 

<your-presentational-component [lang]="lang$ | async"><your-presentational-component>

затем async pipe принимает подписку, отменяет подписку и присваивает фактические значения дочернему компоненту, где вы их фактически используете.

...