feat(effects): add ability to create functional effects

[markostanimirovic]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/ngrx/platform/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Documentation has been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[x] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

We are not able to create effects outside the effects classes.

Closes #3668

What is the new behavior?

We are able to create effects outside the effects class by adding functional: true flag within the effect config.

Examples:

// (file: users.effects.ts)

// mapping to a different action
export const loadUsers = createEffect(
  (actions$ = inject(Actions), usersService = inject(UsersService)) => {
    return actions$.pipe(
      ofType(UsersPageActions.opened),
      exhaustMap(() => {
        return usersService.getAll().pipe(
          map((users) => UsersApiActions.usersLoadedSuccess({ users })),
          catchError((error) =>
            of(UsersApiActions.usersLoadedFailure({ error }))
          )
        );
      })
    );
  },
  { functional: true }
);

// non-dispatching functional effect
export const logDispatchedActions = createEffect(
  () => inject(Actions).pipe(tap(console.log)),
  { functional: true, dispatch: false }
);

Functional effects can be registered by using the provideEffects function as follows:

import * as usersEffects from './users.effects';

bootstrapApplication(AppComponent, {
  providers: [provideEffects(usersEffects)],
});

Functional effects can be easily tested without TestBed:

// marble test
const result$ = usersEffects.loadUsers(actionsMock, usersServiceMock);
expect(result$).toBeObservable(/* ... */);
expect(usersServiceMock, 'getAll').toHaveBeenCalled();

// imperative test
usersEffects.loadUsers(actionsMock, usersServiceMock).subscribe((action) => {
  expect(action).toEqual(/* ... */);
  expect(usersServiceMock, 'getAll').toHaveBeenCalled();
  done();
});

Does this PR introduce a breaking change?

[ ] Yes
[x] No

[netlify]

✅ Deploy Preview for ngrx-io canceled.

Name	Link
🔨 Latest commit	7ff7663
🔍 Latest deploy log	https://app.netlify.com/sites/ngrx-io/deploys/63caa33dc7bf8a0008dff61f

[brandonroberts]

🛳️

[sheikalthaf]

Y it is still not merged? I love using functions