How to handle dependency to other Features in the Store

[faragos]

I'm working now for some years with ngrx and nowadays I always get the same problem in the applications. My applications are kinda big and have multiple feature stores.

export const LanguageActions = createActionGroup({
  source: 'Language',
  events: {
    'Language Changed':  props<{language: string;}>(),
  },
});

export const TodoActions = createActionGroup({
  source: 'Todos/API Load Todos',
  events: {
    'Load Todos': emptyProps(),
    'Load Todos Success': props<{
      todos: Todos;
    }>(),
    'Load Todos Error': props<{ error: Error }>(),
  },
});

Let's take for an example a LanguageFeature and a TodoFeature. The TodoFeature holds all open todos. The todos are translated and depend on the language. It has the typical 3 actions loadTodos, loadTodosSuccess and loadTodosError.
In a ListComponent I trigger the loadTodos. An effect catches this action and loads the todos and responds with a loadTodosSuccess or loadTodosError accordingly. So far so good. The dependency on the language can be handled differently in multiple decisions:

Decision 1

Does the loadTodos action have a language parameter? ('Load Todos': props<{language: string;}>())

1. You can load it in the component and provide it to the action with selectLanguage

language = this.store.selectSignal(selectLanguage)
this.store.dispatch(TodosActions.loadTodos({language})

2. You can load it in the effect

...
concatLatestFrom(() => [this.store.select(selectLanguage)]),
...

Nowadays I decide this decision if the value could be different. If yes I go with the 1. Version otherwise I go with the 2. version.

Decision 2

How to reload the todos when the language changes?

1. Handle it in the component itself (Component needs to know the dependency)

this.store.select(selectLanguage).subscribe(() => {
   this.loadTodos();
});

2. Map the LanguageChanged-Action to the LoadTodosAction in the Todos-Effects to (Todos depends on Language)

 // todos.effects.ts
  loadTodosOnLangChange$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(LanguageActions.languageChanged),
      map(() => TodosActions.loadTodos()))
    );
  });

3. Map the LanguageChanged-Action to the LoadTodosAction in the Language-Effects (Language depends on Todos)

 // language.effects.ts
  loadTodosOnLangChange$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(LanguageActions.languageChanged),
      map(() => TodosActions.loadTodos()))
    );
  });

Nowadays I go mostly for the 2. option, because it reduces the logic in the component and most of the times the component just loads stuff from the store just to add it again to the dispatch to the store, which already knows this stuff.

The only drawback I see with the 2. option are:

• the direct dependency of the Todos to the language
• The lifecycle of the reloading is outside of the component so it can get hard to stop the cycle of reloading the todos when the language changes. Because if the application grows it can cause a lot of reloads at once that aren't needed at the moment.

But I would like to have your opinion on it. Are you doing it similar? Because I'm not quite happy with every solution