CODEWITHSUNDEEP
angularngrxngrx-storengrx-effectsngrx-store-4.0
Simon
Simon

Reputation: 349

Howto show a "data saved" notification with ngrx-store and Angular 5

I use ngrx-store 4.x with effects and Angular 5.

I have a simple use case where I need to show a notification when data has been successfully saved in the backend.

Currently I'm not sure what's the best way to achieve this. I see two options:

  1. Flag in store and flag in component:
    • Add a "dataSaved" flag in the store. This flag is set to true by the Action from the effect when data has been saved.
    • In the angular component, add an additional flag "dispatched". This flag is set when the button "Save" is pressed.
    • If both flags are true, show the "data saved" dialog.
  2. Flag in store and Reset-Action:
    • Add a "dataSaved" flag in the store. This flag is set to true by the Action from the effect when data has been saved.
    • Reset the "dataSaved" flag in the ngOnInit method of the component.
    • If "dataSaved" flag is true, show the "data saved" dialog.

I see a potential problem in options 2: If the request takes a very long time, the user could navigate away from the component and come back again, if the request then finishes, the saved notification would suddenly appear.

Both options look a bit overcomplicated to me - could somebody point me in the right direction?

Upvotes: 0

Views: 1657

Answers (1)

MTJ
MTJ

Reputation: 1097

In your effect when backend service call is handled successfully dispatch related success action.

  1. You could have effect mapping those success actions into notification actions passed to reducer and passed by store selector to the notification component.

  2. You could add that success id into store state. And select from that store state property in your component filtering by your current entity´s id. Something like this is handled shown in https://youtu.be/vX2vG0o-rpM?t=745

Personally I'd go with option 1. since that decouples notifications from the actual component enabling easier swapping, refactoring of notification component if needed.

Upvotes: 4

Related Questions