actions-executing icon indicating copy to clipboard operation
actions-executing copied to clipboard

How to get correct action

Open neverlose-lv opened this issue 1 year ago • 1 comments

Hello. I use this library in some of my project and I really appreciate it! Thank you!

But I have a question for a non-particalar use-case..

I have multiple tables on a single view in my projects.

All tables use the same action for loading data, but with a different parameter (id).

action example:

export class LoadFavoriteListObjects {
  static readonly type =
    '[Users -> Lists] Load objects in the specified favorite list';
  constructor(public favoriteListId: number) {}
}

All tables uses a loading spinner, which is show, while some observable returns no null value.

By the default you would use:

  @Select(actionsExecuting([LoadFavoriteListObjects]))
  isLoading$!: Observable<any>;

but this code will trigger to appear the spinner in all tables simultaneously, while the data is fetched only in one of them...

How can I select actionExecuting parameter (favoriteListId) to compare. lets say the table knows the id of the list, that the data will be loaded for.

.e.g

@Input()
favoriteListId!: number;

isLoading$!: Observable<any>;

constructor(private store: Store) {}

ngOnInit(): void {
    this.isLoading$ = this.store.select(actionsExecuting([LoadFavoriteListObjects]))
      // I would like to have something like pipe to compare the action id, with the input id.
      .pipe(
        filter((action: LoadFavoritesListObjects) => { return action.favoriteListId === this.favoriteListId; })
      )
    ; 
}

neverlose-lv avatar Jul 28 '23 12:07 neverlose-lv

hi, glad you can use this lib and helps you in your app!

unfortunately this library does not differentiate params on the observed Actions, so i think you have two options:

  • create an action per table, in order to show spinner only in the correspondant table
  • or subscribe to the actions stream and apply filtering based on the param e.g.
this.actions$.pipe(
  map((actionContext) => {
    const actionType = getActionTypeFromInstance(actionContext.action);
    if (actionType === [LoadFavoritesListObjects] && actionContext.action.favoriteListId === [x]) {
      if (actionContext.status === ActionStatus.Dispatched){
        return true;
      } else {
        return false;
      }
    }
    return false;
  }
)

joaqcid avatar Jul 29 '23 19:07 joaqcid