Search code examples
angularngrxangular-state-managmement

Huge number of actions / effects for specific entity


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


Solution

  • 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