How to create collection of EntityState in NGRX

Question

Is it possible to create a State in NGRX like below?

export interface Invitation {
  id: string;
  sender: string;
  receiver: string;
}

export interface InvitationsState {
  invitations: { [key: string]: EntityState<Invitation> };
  loaded: boolean;
  error?: any;
}

I've created creating dynamic EntityState but unable to get it fully implemented.

Question: What will be an alternative way to model such store?

Got example of creating multiple Entities here, here which are pre-defined ones but not a dynamic one.

Could you please write a use case? or a full example? I'm pretty sure is possible to accomplish but might not be the right way to solve it — marianocodes, Aug 28 '19 at 01:05
NGRX is built to use simple json objects and maintain isolated states for almost every entity. Complicating the states in the above manner is ideally a bad practice. If you could present your use case, I could help you with a solution that utilises the best practices — The Cloud Guy, Sep 02 '19 at 18:07
@AbhishekKothari Thanks for your reply. I thinking the same that it is complicated but my requirement is like that only. But I am open to recommendation for dealing with this level of complexity. — Vivek Kumar, Sep 03 '19 at 16:17
I have dynamic number of accounts and each account have n number departments. So whenever user is selecting any account I need to fetch the department array for that account and save it in store. Now, I am unable to figure out the right strategy for dealing with such scenario with NGRX. Please let me know If you need further clarification. Thanks a lot @AbhishekKothari for your time. — Vivek Kumar, Sep 03 '19 at 16:21

score 0 · Accepted Answer · answered Sep 04 '19 at 10:15

Here is the right strategy based on your requirement. Your state should be something like:

entites: Account[],
selectedAccount: Account,
loading: Boolean,
loaded: Boolean,
error: String

You account class should contain the department array within it. Below is a sample class.

class Account{
name: String,
departments: Departments[]
}

Now, whenever you load accounts, you need to load the account and its child departments together. Next, when you click a particular account and go to view account details, you dispatch an action to select that specific account. This will provide you the specific account object and you can render it easily.

I hope you will be able to figure out the corresponding effects and reducers. Feel free to ask for help if you need.

How to create collection of EntityState in NGRX

1 Answers1