Angular 11 NgRx state management handling subscribe and unsubscribe in most effective way

Question

Why I'm writing this question is to get more information and to gain more knowledge for state management and best practices.

I have been using NgRx as state management on my angular 11 project everything was fine at least I thought like that.

Generally how i implemented state management is in this file format:

where firstly I dispatch an action from there an effect that is connected with action that is being dispatched, inside effect I call the service and wait for a response if there is 200 status code I continue to a call another action where I send returned value from service and from that I call a reducer and after it, I return to state and with selector I access to data on store that I dispatched from the first action.

what is now confusing for me and that I think there is something wrong with my implementation is that, when I open a modal I call selector to listen for a change and with a function I call a action that is connected with an already called selector(I'm not sure if this part) this is the flow of code:

ngOnInit(): void {
  this.getUserInformation$ = this.store
     .select(getUserInformation)
     .pipe()
     .subscribe((data) => {
        if (data !== null && data !== undefined) {
           this.inviteUserForm.controls['name0'].setValue(data.test0);
           this.inviteUserForm.controls['name1'].setValue(data.test1);
           this.inviteUserForm.controls['name2'].setValue(data.test2);
           this.inviteUserForm.controls['name3'].setValue(data.test3);
           this.inviteUserForm.controls['name4'].setValue(data.test4);
           this.inviteUserForm.controls['name5'].setValue(data.test5);
        }
        if (data === null) {
           this.showQuestion();
        }
     });
}

setUserName() {
  this.store.dispatch(
     UserActions.verifyUser({
        id: this.inviteUserForm.controls.index.value,
     })
  );
}

what is confusing me is that when I close the modal I do the unsubscribe but when I open the modal the data that I had earlier is still there and that information is being subscribed from the store.

What I'm thinking to do is to call an action on ngOnDestroy() that changes the store so(i mean to delete the part of the store that I don't need to yous, in this case, a part the selector is listening and return it as a new state)

Is this the right decision and implementation?

score 1 · Answer 1 · answered Nov 03 '21 at 19:19

Unsubscribing does not change the store. Therefore, when you open the model again, ngOnInit is executed and the component subscribes to the store again.
The store behaves like a BehaviorSubject, that means when someone subscribes, the last value will be delivered.
As a result, your component sees the current values.

So, if you want to change the state when the modal is closed, then you have to dispatch an action which does exactly that.
Where to dispatch that action depends on your Use Case. But ngOnDestroy is a good starting point in most cases. :-)

I implemented that logic to dispatch an action to change store where I remove the unwanted object on the store so when the modal is open again it shows empty values who that is what I want. — Ibrahim S. Gerbiqi, Nov 04 '21 at 08:33

Angular 11 NgRx state management handling subscribe and unsubscribe in most effective way

1 Answers1