How to convert deprecated resolver using Resolve interface to use the ResolveFn syntax?

Question

[SOLVED] Original :

export enum RecipeActions {
  SET_RECIPES = '[RECIPES] SET_RECIPES',
  FETCH_RECIPES = '[RECIPES] SET_RECIPES', // MISSED THIS
  ADD_SINGLE = '[RECIPES] ADD_SINGLE',
  ADD_MULTI = '[RECIPES] ADD_MULTI',
  DELETE = '[RECIPES] DELETE',
  UPDATE = '[RECIPES] UPDATE',
}

Even though i called SET_RECIPES or FETCH_RECIPES in my code. they triggered the same action due to this copy error.

---

I am working my way through a course and currently i am stuck in the state mangement section using ngrx).

It currently is using a deprecated version of resolver as shown below. I am working in Angular 16 myself so i'd like to use to new ResolveFn syntax but i fail to implement it.

The deprecated code:

    @Injectable({ providedIn: 'root' })
   export class RecipesResolverService implements Resolve<Recipe[]> {
  constructor(
    private store: Store<fromApp.AppState>,
    private actions$: Actions
  ) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    return this.store.select('recipes').pipe(
      take(1),
      map(recipesState => {
        return recipesState.recipes;
      }),
      switchMap(recipes => {

        if (recipes.length === 0) {
          this.store.dispatch(fetch_recipes());
          return this.actions$.pipe(
            ofType(set_recipes),
            take(1)
          );
        } else {
          return of(recipes);
        }
      })
    );
  }
}

What i came up with so far. (with the use of selectors)

// Create a feature selector for the 'recipes' slice of the AppState
export const selectRecipesState = createFeatureSelector<RecipesState>('recipes');

// Create a selector that gets the 'recipes' array from the RecipesState
export const selectAllRecipes = createSelector(
  selectRecipesState,
  (recipesState: RecipesState) => recipesState.recipes
); 

And the ResolveFn:

export const recipeResolver: ResolveFn<Recipe[]> = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {

  const store = inject(Store<fromApp.AppState>);
  const actions$ = inject(Actions);

  return store.select(selectAllRecipes).pipe(
    take(1),  //'take(1)' ensures that the Observable completes after emitting the first item.

    switchMap(recipes => {

      if (recipes.length === 0) {
        store.dispatch(fetch_recipes()); //fetch recipes gets the recipes from a server using effects

        return actions$.pipe(
          ofType(set_recipes), //set recipes is dispatched when recipes are received from the server
          take(1),
          switchMap(() => store.select(selectAllRecipes))
        );
      } else {
        return of(recipes);
      }
    })
  );
}

And the state that is being stored :

export interface State {
  recipes: Recipe[];
  editedRecipe: Recipe,
  editedRecipeIndex: number
}

Now the issue:

As soon as i try to fetch the recipes it start endlessly calling the set_recipes action.

If someone could point out what is wrong/different in my ResolveFn function it would be very much appreciated!