Simplify Querying for State with ngrx Selectors in Angular

Share this video with your friends

Transforming data from the store so that it works in our feature components can be a bit clunky and certainly not something that we would want to repeat for every single component that consumes state. Thankfully we have the ability to predefine specific "slices" of state that we want to query from the store and express them in the form of ngrx selectors. Selectors are essentially functions that take state as an input and returns the part of the state that we want in the shape we require. In this lesson, we will build out some basic low-level selectors at our feature reducer as we utilize some very helpful selectors that ngrx entity provides for us right out of the box. We will then create high-level selectors at our top-level reducer that can be consumed across our application and see how it makes selecting state from our state so much easier to read.

Leo

~ 6 years ago

Why have the state files and the service files in the lib folder? Why not just put all files related to projects into app/projects/?

Anandakumar Palanisamy

~ 5 years ago

This EntityAdapter example is not working anymore.

core.js:14597 ERROR TypeError: Cannot read property 'map' of undefined at entity.js:28 at store.js:577 at memoized (store.js:519) at defaultStateFn (store.js:546) at store.js:585 at memoized (store.js:519) at MapSubscriber.project (store.js:462) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)

~ 3 years ago

Here is the fix for the error with map being undefined, it has to do with the way on how selectAllProjects is being exported on the index.ts file.

FOLLOWING IS INCORRECT: export { ProjectsState, initialProjects, selectAllProjects } from './lib/state/projects/projects.reducer';

FOLLOWING IS CORRECT: export { selectAllProjects } from './lib/state';