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.
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;
);