How to normalize deep nested data in the ngrx/store?

If you have access to the server implementation, normalization could be done there directly. More likely, however, you are going to normalize the state in the client using a third party library, e.g., normalizr.

There are several articles discussing this topic, for example this one on Hackernoon.


A common pattern is to follow this guide, to normalize state shape. Do not nest. Create an id that stores the entities. And then create an id that stores the relations (the children, in you scenario). I have built a sample state for you

const state = {
  objects: {
    id: ['Address', 'Phone', 'Sub-Phone', 'Sub-Sub-Phone'],
    entities: {
      'Address': {
        isRequired: false,
        isSensitive: false,
        timezoneId: 'UTC'
      },
      'Phone': {
        isRequired: true,
        isSensitive: false,
        timezoneId: 'UTC-5'
      },
      'Sub-Phone': {
        isRequired: true,
        isSensitive: false,
        timezoneId: 'UTC-5',
      },
      'Sub-Sub-Phone': {
        isRequired: false,
        isSensitive: true,
        timezoneId: 'UTC',
      }
    }
  },
  children: {
    'Address': [],
    'Phone': ['Sub-Phone'],
    'Sub-Phone': ['Sub-Sub-Phone']
  }
}

Note that the state has 2 levels: one for the objects, one for the children. The objects stores the ids and the entities. The children, store one array for each object key with its children. Note that in ny example there is only one children in the arrays, but you can have something like

'Phone': '['Sub-Phone', 'Sub-Phone2', 'Sub-Phone3']