What is the role of NgRx Effects, and why do we separate side effects from reducers?

import { inject } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs';
import { map, exhaustMap, catchError } from 'rxjs/operators';

export const loadProfileEffect = createEffect(
  (actions$ = inject(Actions), http = inject(HttpClient)) => {
    return actions$.pipe(
      ofType('[Profile Page] Load Request'),
      exhaustMap(() =>
        http.get<any>('/api/profile').pipe(
          map(profile => ({ type: '[Profile API] Load Success', payload: profile })),
          catchError(err => of({ type: '[Profile API] Load Failure', error: err }))
        )
      )
    );
  },
  { functional: true }
);