NGRX Effect erroneously redirects upon completion

I have an NGRX "Feature" set up like this:

Actions:

export const getOrganization = createAction("[Organization] Get");
export const getOrganizationSuccess = createAction("[Organization] Get Success", props<{response: Organization}>());
export const getOrganizationError = createAction("[Organization] Get Error", props<{request: string}>);


Reducers:

on(getOrganizationSuccess, (state, {response})=>{
console.log("organizationReducer.getOrganizationSuccess")
return {
...state,
Organization: response
}
})


Effects:

export const getOrganizationEffect$ = createEffect(
(
actions$ = inject(Actions),
service$ = inject(OrganizationService),
toastService$ = inject(ToastService)
)=> {
return actions$.pipe(
ofType(getOrganization),
switchMap(()=> {
return service$.getOrganization().pipe(
map((response)=> {
console.log("response", response)
return getOrganizationSuccess({response: response.Data as Organization})
}),
catchError(({error})=> {
toastService$.sendErrorToasts(error);
return of(getOrganizationError())
})
)
})
)
}, {
functional: true
});


Component:

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { Organization } from '../models/Organization';
import { organizationSelector } from '../store/organization/organization.selectors';
import { getOrganization } from '../store/organization/organization.actions';

@Component({
selector: 'app-organization',
templateUrl: './organization.component.html',
styleUrl: './organization.component.scss',
standalone: false
})
export class OrganizationComponent {

organization$: Observable<Organization | undefined>;

constructor(
private readonly store: Store
) {
console.log("OrganizationComponent.constructor")
this.organization$ = this.store.select(organizationSelector)
}

ngOnInit(){

console.log("OrganizationComponent.ngOnInit")
this.store.dispatch(getOrganization())
}
}


So, when I log in, I am redirected to the OrganizationComponent, which has a tag within it.

Organization Html:

<div
class="organization-container"
*ngIf="organization$ | async as organization">
<div class="left-side panel">
<app-organization-menu></app-organization-menu>
</div>
<div class="right-side panel">
<router-outlet></router-outlet>
</div>
</div>


And here is the login and logic success effects:

export const loginOrganizationEffect$ = createEffect(
(
actions$ = inject(Actions),
service = inject(OrganizationService),
authenticationService = inject(AuthenticationService),
toastService: ToastService = inject(ToastService)
)=> {
return actions$.pipe(
ofType(loginOrganization),
switchMap(({request})=> {
return service.login(request).pipe(
map((response)=> {
const token: Token = response.Data as Token;
authenticationService.SaveToken(token)
return loginOrganizationSuccess({response: token})
}),
catchError(({error})=> {
toastService.sendErrorToasts(error);
return of(loginOrganizationError())
})
)
})
)
}, {
functional: true
});

export const loginOrganizationSuccessEffect$ = createEffect(
(
actions$ = inject(Actions),
router$ = inject(Router)
)=> {
return actions$.pipe(
ofType(loginOrganizationSuccess),
tap(()=>{
console.log("loginOrganizationSuccessEffect$")
router$.navigateByUrl("organization/dashboard");
})
)
}, {
functional: true,
dispatch: false
});


Now, I have tried removing the call to dispatch this.store.dispatch(getOrganization()) in OrganizationComponent.ngOnInit. When I do, the redirect doesn't happen. Therefore, I believe that this is the call that is somehow causing a redirect.

Perhaps this doesn't have anything to do with angular at all?

My desired effect is that when I log in to the site, I am taken to the organization/dashboard component, then I load the organization's data.

Again, this only happens when I am redirected to the page. It does not happen if I navigate directly to the page.

Any wisdom here would be greatly appreciated.

Thanks!

Continue reading...