NGRX confusion on how to implement array of arrays

82 Views Asked by At

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.

0

There are 0 best solutions below