Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Type 'Observable<void>' is not assignable to type 'Observable<IComment[]>' in ngrx

recently i’ve been trying to learn ngrx and i am following a guide. The code of the guide i’m following is the same as mine, but i am getting this error:

Type 'Observable<void>' is not assignable to type 'Observable<IComment[]>'.
  Type 'void' is not assignable to type 'IComment[]'.

I am getting the error inside the constructor of the commentComponent at both isLoading$ and comments$:

import { Component, OnInit } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import * as CommentActions from './store/comment.actions'
import { AppStateInterface } from 'src/app/types/appState.interface';
import { commentsSelector, isLoadingSelector } from './store/comment.selector';
import { IComment } from 'src/app/shared/interfaces/comment';


@Component({
  selector: 'app-comment',
  templateUrl: './comment.component.html',
  styleUrls: ['./comment.component.css'],
})
export class CommentComponent implements OnInit  {
  isLoading$: Observable<boolean>
  comments$: Observable<IComment[]>;

  constructor(private store: Store<AppStateInterface>) {
    this.isLoading$ = this.store.pipe(select(isLoadingSelector))
    this.comments$ = this.store.pipe(select(commentsSelector))
  }

  
  ngOnInit(): void {
    this.store.dispatch(CommentActions.getComments())
  }


}
 

I think my problem lies somewhere in the selectors but I cant find it.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

import { createSelector, select } from '@ngrx/store';
import { AppStateInterface } from 'src/app/types/appState.interface';

export const selectFeature = (state: AppStateInterface) => state.comments;

export const isLoadingSelector = createSelector(selectFeature, (state) => {
  state.isLoading;
});

export const commentsSelector = createSelector(selectFeature, (state) => {
  state.comments;
});

export const errorSelector = createSelector(selectFeature, (state) => {
  state.error;
});

Since its too much code, i will paste the repo here so anyone can check it out. The ngrx code is mainly in the ./movies/comment/store folder. https://github.com/kris34/Movies/tree/main/Client/movies-project/src/app/movie

>Solution :

You’re missing a return statement in your selector, hence the void instead of IComment[]:

export const commentsSelector = createSelector(selectFeature, (state) => {
  return state.comments;
});

Or use the implicit return by removing the curly:

export const commentsSelector = createSelector(selectFeature, (state) => 
  state.comments;
);
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading