Using Elf in NX mono repo as separate lib - proper way to interact with state from workspace apps

[kingjordan]

Hello,

I have a nx workspace with 2 angular apps and a nativescript app that use firebase for the "backend" auth and storage.
I created a stand alone nx library that manages the database persistence services with firebase.

My goal is to have a stand alone lib that manages state that can be consumed by the 3 different libs. So I created an angular lib and created an auth store for tracking user credentials/details in the façade pattern:

import { Injectable } from '@angular/core';
import { createStore, select, withProps } from '@ngneat/elf';
import {
  withRequestsStatus,
} from '@ngneat/elf-requests';
import { User } from '@angular/fire/auth';
import { shareReplay } from 'rxjs';
import { write } from '../immer-write';

export interface AuthProps {
  user: User | null;
}

const store = createStore(
  { name: 'auth' },
  withProps<AuthProps>({ user: null }),
  withRequestsStatus()
);

@Injectable({
  providedIn: 'root',
})
export class AuthFacadeService {
  public user$ = store.pipe(
    select((state) => state.user),
    shareReplay({ refCount: true })
  );

  public setUser(value: User | null): void {
    store.update(
      write((state) => {
        state.user = value;
      })
    );
  }
}

now I have a separate file for managing the effects. This is where I need help thinking through how to set it up.

I have an effect that logs the user in with firestore auth and returns a user object. I want my state to track the user details.
NOTE: the loginWithEmailAndPassword function is the return from firebase auth, it returns a PROMISE:

export interface UserCrednetials {
  email: string;
  password: string;
}

export class AuthEffects extends EffectFn {
  constructor(private auth: AuthService) {
    super();
  }

  public loginUser = this.createEffectFn(
    (credentials$: Observable<UserCrednetials>) =>
      credentials$.pipe(
        trackRequestResult(['LoginUser']),
        switchMap((credentials) =>
          this.auth.loginWithEmailAndPassword(
            credentials.email,
            credentials.password
          )
        ),
        tap(res => SetUser(res.user))
      )
  );
}

My question is who calls this effect? Do I call it from the angular app component, or should I dispatch an action that triggers this effect?

[NetanelBasal]

Inject the AuthEffects and call loginUser.

https://github.com/ngneat/effects#use-with-angular-1

[kingjordan]

thanks for the follow up Netanel,

reading those docs helped. I think for my project structure it make more sense to use actions and then have effects triggered that way.