ngrx compose for selecting slices of the store

communications.component.ts

import { Component, OnInit } from '@angular/core';
import {Store, State} from "@ngrx/store";
import {EmailTemplateState} from "./shared/email-template/ngrx/reducer.email-template";
import {EmailTemplate} from "./shared/email-template/model.email-template";
import {compose} from "@ngrx/core";
import {Observable} from "rxjs";
let styles = require('./communications.sass');
@Component({
	selector: 'communications',
	template: require('./communications.component.jade'),
	styles: [styles],
	host: {
		'style': 'height: 100%; width: 100%'
	}
})
export class CommunicationsComponent implements OnInit {
	public emailTemplates$: Observable<EmailTemplate[]>;
	public emailLoaded$: Observable<Boolean>;
	constructor(private store: Store<EmailTemplateState>) {

	}

	ngOnInit() {
		this.emailTemplates$ = this.store.let(getEmailTemplates);
		this.emailLoaded$ = this.store.let(getEmailTemplateLoaded);
	}
}

// interface EmailState {
// 	ids: [];
// 	templates: [];
// 	loaded: boolean;
// 	loading: boolean;
// }

// these queries do not have to live on this page
// compose calls the functions from right to left
export const getEmailTemplateLoaded = compose(isLoaded, selectEmailTemplate);
export const getEmailTemplates = compose(getEmailTemplateEntities, selectEmailTemplate);

export function selectEmailTemplate(state$: Observable<State>) {
	return state$.select(s => s.emailTemplate)
}

export function isLoaded(state$: Observable<State>) {
	return state$.select(s => s.loaded)
}

export function getEmailTemplateEntities(state$: Observable<State>) {
	return state$.select((s: EmailTemplateState) => {
		return s.ids.map(id => s.templates[id])
	})
}