2

As an angular application I am working on approaches medium to large size, so does the number of actions, and therefore effects, grow. How does one handle the growing action / effect files for specific entity.

I have tried to separate actions into multiple files, but the problem with Typescript enums is that they cannot be merged. What is the best approach here? One of my ideas was to have dedicated enum file, actions separated in the files according to the part of application they cover, and then an index file for all those actions in which they are merged into a single type.

Same question regarding effects. Since they are one @Injectable class, is it possible to separate actions in different files, and then "merge" them into one big class, for that specific entity

  • 1
    you can split as you wish your actions files just remember somewhere to create the full union of actions types for the reducer, the same applies to the effects you can split in as much files as you wish just pass to the you module ex: EffectsModule.forRoot([Effects1,Effects2,...]) , there is redesigned way to create and use actions with the latest ngrx versions that i really like, beacuse it removes the big enum, it isn't in the ngrx.io docs(need to be updated) -> link to a good guide https://blog.angularindepth.com/ngrx-action-creators-redesigned-d396960e46da – Vash72 May 12 '19 at 10:38
  • Thanks for the answer! I like the idea of separating effects in special files, but can you tell me how would you this separation, by which criteria? If you try to separate it by the component that invokes the effect, you would have a problem with effects that load entities, and are triggered from multiple places. For example, if you have LoadCountries effect, and that effect is triggered from the Dashboard and some Dialog – 800c25d6-cd74-11ed-afa1-0242ac May 20 '19 at 15:00

1 Answers1

2

NgRx 8, currently in beta, offers a solution to this:

  • createAction: create actions with a single function
const increment = createAction('increment', props<{amount: number}>())
  • createReducer: create reducers as an object map
const reducer = createReducer(
  {value: 0}, //initial state
  on(increment, (state, action) => { value: state.value + action.amount }
)
  • @ngrx/data: extension that offers a gentle introduction to NgRx by simplifying management of entity data while reducing the amount of explicitness.

More info at next.ngrx.io

timdeschryver
  • 14,415
  • 1
  • 19
  • 32