Selectors

• Pure FP approach
• Extract data from the Store
• Memoised data => fast
• Provide a query API for views

The role of the projector function is a powerful one. We can ask for various state properties, anywhere within our state tree, we can derive, transform or combine data from the state slices passed to it and return this modified data as a single object - typically for component consumption. Again, it’s clean and concise - and this state logic is nowhere inside our components. Our components consume the state, that’s it.

createFeatureSelector & createSelector

        import { createFeatureSelector, createSelector } from '@ngrx/store';

        export interface State {
            todo: TodoState
            }

        export const getTodoState = createFeatureSelector< TodoState >('todo')

        export const getTodosState = createSelector(
            getTodoState,
            (state: fromFeature.TodoState) => state.todos
        )
    

use Selector inside Container/Smart Components

    export class TodoPageComponent implements OnInit {

        constructor(private store: Store) { }

        ngOnInit() {
            this.todos$ = this.store
                .pipe(select(getTodosEntities))
        }
    }