Design for Complicated NGRX insertion

Question

I'm working on a feature with the following models

class A { 
   id: int
   prop1: string
   b_Id?: number;
   c_Id?: number
}


class B { 
   id: int
   prop2: string
}
//C is like B

In many cases these operate seperataly so I have a.effects.ts, b.effects.ts, c.effects.ts etc with a saveA effect and a saveB effect. However a new feature requires that i have the option to add a new b & c when im adding a new a.

i'm new to the pattern so i haven't figured out the proper way to handle this. Currently of course this is firing each asynchonosoly so A saves before b returns with an id. This isn't surprising.

Question 1: Action handling

Expand the payload for a save such as

export class AddA implements Action {
  readonly type = AActionTypes.AddA;

  constructor(public payload: {a: A, b: B, c: C}) {}
}

or emit each action seperately? Or create a seperate action and leave saveA alone?

Question 2: The effect

I've done some chaining, but not much. Im still pretty new on this - What is a proper approach? A large effect, or chaining them together? I am looking for something that adheres to the framework and isn't an anti-pattern. I don't know what that looks like.

Answer 1

There are several ways to do this, have you seen NgRx: Patterns and Techniques (there is also a video on youtube)?

Q1: An action is a unique event in the system. I would create a separate action for it.

Q2: depends on how "connected" these are, if these are heavy connected I would opt for creating one effect (or just one API call if you have that possibility).