1

I'm really brand new to NGRX and state management. I have successfully implemented my first state key using entity and selectors. It loads everything with a facade and an effect into state with key containers. Though I'm trying to figure out how to manage an array inside this first loaded array of objects that have an additional array. Should this be a new state key of projections or do I manage it from the first loaded array.

I have two different graphql queries to test with. One returns only the containers without projections and one with projections.

export const selectContainersLoaded = createSelector(
  getFeatureState,
  state => state.loaded
)

export const loadContainersSuccess = createAction(
  '[Container] Load Containers Success',
  props<{ payload: Container[] }>()
);

//without
{
  containers: {
    ids: [
      '0000001-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
    ],
    entities: {
      '0000001-xxxx-xxxx-xxxx-xxxxxxxxxxxx': {
        __typename: 'Container',
        id: '0000001-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
        name: 'Black Chevy',
        description: 'Some testing description',
        projections: {
          __typename: 'ModelProjectionConnection',
          nextToken: null
        },
      }
    },
    loaded: true
  }
}

//with
{
  containers: {
    ids: [
      '0000001-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
    ],
    entities: {
      '0000001-xxxx-xxxx-xxxx-xxxxxxxxxxxx': {
        __typename: 'Container',
        id: '0000001-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
        name: 'Black Chevy',
        description: 'Some testing description',
        projections: {
          __typename: 'ModelProjectionConnection',
          items: [
            {
              __typename: 'Projection',
              id: '0000002-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
              containerId: '0000001-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
              name: 'testing projection'
            },
            {
              __typename: 'Projection',
              id: '0000003-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
              containerId: '0000001-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
              name: 'another testing projection'
            }
          ]
        }
      }
    },
    loaded: true
  }
}

From what I think I'm reading is that the state needs to be flattened and mimic the database structure so projections is a separate table then would mean a different state key for projections. But this is where i'm confused. If I wanted to list in the view all containers and underneath them all projections how do I correlate that? I've toyed around with the idea that maybe projections don't need to be a separate table through a named connection and just an array on containers. I've also looked at using selectors inside of selectors but dont grasp that yet. What am I missing here? I want to be able to independently update a projection and a container doesn't have to have a projection. Maybe this is over complicated with two different tables and it would be better to use the entity helper functions to manage the array inside the object. But it just makes me wonder in a bigger scenario how something like this would be accomplished.

state => {
  containers,
  projections
}

If you have any code examples of one to many relationships and possibly many to many relationships that are mapped to state would be awesome. Ive tried looking at others code projects on github but I havent found what I think i'm looking for even though I may not know or understand what i'm looking for.

lumberjacked
  • 966
  • 1
  • 21
  • 35
  • 1
    I think normalizing the state is the right way to go (I guess you read [Normalizing State Shape](https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape)). You can then use rxjs operators like `combineLatest` and `map` to extract the data you want. Have you read [Querying a Normalized State with RxJS in Angular](https://netbasal.com/querying-a-normalized-state-with-rxjs-in-angular-71ecd7ca25b4)? What data do you need in your view? What kind of function are you looking for? A `getAllContainersWithTheirProjections()`? Can the same projection belong to multiple containers? – frido Aug 29 '20 at 21:53
  • No projections are associated to only one container. Ive realized it doesn't matter how I have the backend because it seems ngrx entity always treats an array as substate. I'll go read your post. – lumberjacked Aug 29 '20 at 23:55
  • This also looks promising [NgRx Data Views: How to de-normalize entities for large enterprise applications](https://angular.schule/blog/2020-01-ngrx-data-views) regarding nested selectors. – frido Aug 30 '20 at 08:31

0 Answers0