Angular state management with NgRx

Kate Gable (former Sky)
1 min readSep 3, 2019

Using custom selectors for one-to-one or one-to-many data relationships.

Credit to https://angularfirebase.com

When implementing state management with Ngrx we often have a predefined API that can not be changed. I ran across a business case: back end API is written in a way where 2 sets of data that are returned are depend on the other. One-to-one or one-to-many relationship. In order to map entities with corresponding ids we have to create a custom selector.

To make a selector that will do a lookup of another selector just add 4 Actions, 2 Effects and 3 selectors:

This is a declaration of the 4 Actions

This is an implementation of the 2 effects

When declaring selectors you have to remember that order of loaded data is not predictable and we have to account for it not all being loaded yet:

See my github repository for a work-in-progress project I am working on to support elementary school events for my children’s’ school. https://github.com/katesky/csa-school-app

To see the working (wip) site visit: https://katesky.github.io/csa-school-app

Originally published at https://www.katesky.com on September 3, 2019.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Kate Gable (former Sky)
Kate Gable (former Sky)

Written by Kate Gable (former Sky)

sharing knowledge, encouraging to learn, promoting passion for coding, supporting mothers who code

No responses yet

Write a response