类型“Observable<void>”不可分配给ngrx中的类型“Observable<IComment[]>”

Question

最近我一直在尝试学习 ngrx 并且正在遵循指南。我正在遵循的指南的代码与我的相同，但我收到此错误：

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

我在 isLoading$ 和 comments$ 处的 commentComponent 构造函数中收到错误：

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())
  }


}
 

我认为我的问题出在选择器的某个地方，但我找不到它。

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

由于代码太多，我将把存储库粘贴到这里，以便任何人都可以查看。 ngrx代码主要在./movies/comment/store文件夹中。 https://github.com/kris34/Movies/tree/main/Client/movies-project/src/app/movie

Answer 1

您在选择器中缺少 return 语句，因此使用

void

而不是

IComment[]

：

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

或者通过删除卷曲来使用隐式返回：

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

Answer 2

您的选择器定义不正确。在当前的选择器定义中，您没有返回任何值，这会导致类型被推断为 void。尝试修改您的选择器函数以返回适当的值

例如

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) => {
  return state.isLoading; // Return the isLoading property
});

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

export const errorSelector = createSelector(selectFeature, (state) => {
  return state.error; // Return the error property
});

Answer 3

作为其他评论的答案，您需要返回评论。它看起来是这样的：

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

或者，如果您想要显式函数体，那么：

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

---

我想你要么自己错过了这一点，要么你不知道箭头函数是如何工作的。提醒一下，如果您这样做：

const myFn = state => state.comments;

这意味着“隐性回报”。在

=>

箭头之后，您可以直接写下 myFn 函数返回的表达式。

如果您在箭头后面打开了花括号（

() => { ... }

版本），那么您必须显式返回您需要的内容。