Effets NgRX - Le type 'Observable <unknown>' n'est pas assignable au type 'Observable <Action>'

En fait, vous devez traiter les actions créées par createAction comme une fonction et l'appeler pour renvoyer l'objet action. Vérifiez cette desc . Donc, votre of(addCommentFailed) doit être of(addCommentFailed()) .

J'ai également vu une erreur similaire.

Type 'Observable<unknown>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'

Le moyen le plus rapide d'identifier ce qui a pu arriver est après | séparateur. Le type est généralement Observable<{something}> ou Observable<{something | another}> . Il y a un | séparateur et le deuxième élément n'est pas un observable. C'est peut-être le problème.

Si, par exemple, l'observable s'attend à avoir Observable<Action> , mais qu'il existe un opérateur de canal, il renvoie autre chose que Observable<Action> . Le type inattendu sera ajouté au type attendu dans le message d'erreur, car pour Observable, T n'existe pas dans ((...args: any[]) => Observable<Action>)

mon interprétation du message est

Le type interne d'un objet est inconnu, car nous ne savons pas à quel type s'attendre Observable<Action> = Action ou ((...args: any[]) => Observable<Action>) = unknown

si le problème n'est pas immédiatement évident, je viens de commenter chaque opérateur de tube un par un et voir si l'erreur va bien. Si c'est le cas, maintenant je sais que cet opérateur est le problème, que je me concentre sur l'opérateur et trouve le problème.

Je suis intéressé de lire les réponses des autres utilisateurs. Ces deux voies m'indiquent toujours dans la bonne direction.

J'ai eu exactement le même problème et dans mon cas, c'était à cause d'accolades mal placées et d'une importation manquante.

Voici ce que j'ai fait pour le déboguer et le résoudre.

Divisez la fonction canalisable interne en fonctions individuelles. C'est la première étape pour moi en raison de la syntaxe complexe et des accolades auto-complétées de vscode, parfois une accolade existe au mauvais endroit et ce n'est pas facile à trouver. Cela résout également presque tous les autres problèmes (importations manquantes, types de retour incorrects, etc.) car le code à déboguer est beaucoup plus petit et vscode met en évidence cette erreur individuelle de la sous-fonction.

C'est ce que j'avais avant

//login.service.ts

performLogin() : Observable<boolean> {
        throw "Something went wrong";
        //return of(true);
    }

Modifié ceci en dessous

 performLogin$ = createEffect(() => 
       this.actions$.pipe(
           ofType(performLogin),
           mergeMap(() => this.performLogin()),
           catchError((error ) => { console.log("HELLO"); return EMPTY})
       )
    );

    performLogin() {
        return this.loginService.performLogin()
        .pipe(map(() => loginSuccess()));
    }

Un autre avantage que j'ai obtenu de cette approche est que le bloc catchError sur le tube interne ne se déclenche pas (comme dans l'exemple d'effets, cela devrait fonctionner). Il fallait donc l'inclure dans le bloc extérieur canalisable. Ici, l'erreur est détectée et fonctionne comme prévu. Mais toujours comprendre pourquoi cela ne fonctionne pas.

Pour résumer, le service de connexion effectue les opérations suivantes (lancer une erreur ou renvoyer Observable de true)

    performLogin$ = createEffect(() => 
       this.actions$.pipe(
           ofType(performLogin),
           mergeMap(() => this.loginService.performLogin().pipe(
               map(() => loginSuccess())
           )))
    );

J'espère que cela t'aides.

Version rapide
commenter createEffect(() => ,
corriger les erreurs que votre IDE (VSCode) signale,
ajoutez createEffect(() => retour.

Alternative - la réécriture comme celle-ci fonctionne également

@Effect()
navigateToDashboard$ = this.actions$.pipe(
    ofType(teamActions.CREATE_SUPERVISOR_GROUP_SUCCESS),
    map((action: teamActions.CreateSupervisorGroupSuccess) => action.payload),
    map((team: Team) => team.TeamID),
    switchMap(id => of(new routerActions.Go({ path: ['/team', id, 'populate'] })))
)

Additionnel

Aucune erreur après avoir fait ce qui précède? La vérification de type fait son travail correctement et vous indique que vous devriez mapper sur une Observable<Action> ou pour un effet purement secondaire en ajoutant le deuxième argument { dispatch: false } (c'est-à-dire ne pas distribuer une action). Voir la documentation sur les effets NgRx

Réponse plus ancienne (l'utilisation de @Effect est inutile et n'est pas obligatoire)

Le moyen le plus simple que j'ai trouvé pour déboguer est d'écrire de manière version 7 avec le décorateur @Effect et une fois terminé, réécrire à l'aide de createEffect .

Donc pour déboguer:

Type 'Go' is not assignable to type 'ObservableInput<any>'

ce qui donne l'erreur non utile d'écrire comme (ajouter un décorateur, supprimer createEffect(() => , supprimer le crochet final),

Cannot find name 'SwitchMap'

Maintenant nous obtenons une erreur

@Effect()
navigateToDashboard$ = this.actions$.pipe(
    ofType(teamActions.CREATE_SUPERVISOR_GROUP_SUCCESS),
    map((action: teamActions.CreateSupervisorGroupSuccess) => action.payload),
    map((team: Team) => team.TeamID),
    SwitchMap(id => new routerActions.Go({ path: ['/team', id, 'populate'] }))
)

Suivi par

  navigateToDashboard$ = createEffect(() =>
    this.actions$.pipe(
      ofType(teamActions.CREATE_SUPERVISOR_GROUP_SUCCESS),
      map((action: teamActions.CreateSupervisorGroupSuccess) => action.payload),
      map((team: Team) => team.TeamID),
      SwitchMap(id => new routerActions.Go({ path: ['/team', id, 'populate'] }))
    )
  )

Réparer cela donne

someEffect$ = createEffect(() => {
  return this.actions$.pipe(
    ...
  )
})

Maintenant, réécrivez en termes NgRx 8. Pas joli mais ça marche.

J'ai eu ce problème à cause d'un opérateur d'importation manquant ici

// events.effects.ts

import { Observable, of } from 'rxjs';

...

Je l'ai corrigé en ajoutant cette ligne de code en haut

// events.effects.ts
...

getEvents$: Observable<Action> = createEffect(
    () => this.actions$.pipe(
      ofType(EventsActions.getEvents),
      switchMap(action =>
        this.eventService.getEvents().pipe(
          map(events => EventsActions.getEventsSuccess({ events })),
          catchError(error => of(EventsActions.getEventsError({ error })))
        )
      )
    )
  );
...

En cas de résolution de ce problème et en utilisant l'exemple officiel de ngrx 8.

ofType<ReturnType<typeof myAction>>

Une solution simple et rapide peut être de mettre "n'importe quel" type.

ofType<MySuperActions>

N'oubliez pas les importations pour les opérateurs rxjs, les observables.

En cas de traitement de la charge utile d'action - props, définissez un type d'action.

loadMovies$: any = createEffect((): any => this.actions$.pipe(
    ofType('[Movies Page] Load Movies'),
    mergeMap(() => this.moviesService.getAll()
      .pipe(
        map(movies => ({ type: '[Movies API] Movies Loaded Success', payload: movies })),
        catchError(() => EMPTY)
      ))
   )
);

ou

loadMovies$ = createEffect(() => this.actions$.pipe(
    ofType('[Movies Page] Load Movies'),
    mergeMap(() => this.moviesService.getAll()
      .pipe(
        map(movies => ({ type: '[Movies API] Movies Loaded Success', payload: movies })),
        catchError(() => EMPTY)
      ))
   )
);

J'ai rencontré un problème similaire aujourd'hui (même message d'erreur) et c'était parce que TypeScript ne pouvait pas déduire correctement le type de retour de Array#flatMap . Je suppose que ce sera la même chose pour Array#map , RxJS#map ou tout tableau qui n'a pas été explicitement tapé.

Voici le code qui s'est écrasé:

import { Action } from '@ngrx/store';
...
    switchMap((action) => {
        return action.cart.flatMap((cartItem: CartItem) : Action[] => {
...

J'ai donc reçu le même message d'erreur:

Le type «Observable <unknown>» ne peut pas être affecté au type «Observable <Action> | ((... args: any []) => Observable <Action>) '

Pour résoudre ce problème, je devais juste dire à TypeScript que ma fonction de mappage renvoyait un tableau d' Action :

this.actions$.pipe(
    ofType(ActionType),
    switchMap((action) => {
        return action.cart.flatMap((cartItem: CartItem) => {
            if (x) {
                return [
                    ActionCreator1(params1),
                    ActionCreator2(params2)
                ];
            } else {
                return [];
            }
        }
    })
)

De plus, taper avec Action[] est plus sûr qu'avec any !

Dans mon cas, j'ai utilisé un opérateur lodash à l'intérieur de l'un des opérateurs rxjs. Il s'est avéré que je n'avais pas @types/lodash . Après npm i -D @types/lodash , mon problème a été résolu.

J'ai lutté avec ce problème pendant un certain temps pour découvrir à la fin que le code VS importait automatiquement Observable partir d'une bibliothèque au lieu de rxjs

J'espère que cela évitera à quelqu'un de se cogner la tête.