redux 在< void>ngrx中,类型“Observable”不可分配给类型“Observable&lt;IComment[]&gt;”

r7s23pms  于 2023-08-05  发布在  其他
关注(0)|答案(3)|浏览(104)

最近我一直在努力学习ngrx,我跟着一个指南。我所遵循的指南的代码与我的相同,但我得到了这个错误:

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

字符串
我在commentComponent的构造函数中的isLoading$和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())
  }

}


我想我的问题在于选择器的某个地方,但我找不到它。

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

oymdgrw7

oymdgrw71#

在选择器中缺少return语句,因此使用void而不是IComment[]

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

字符串
或者通过移除curly来使用隐式返回:

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

yftpprvb

yftpprvb2#

选择器定义不正确。在当前的选择器定义中,没有返回任何值,这将导致类型被推断为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
});

字符串

tpgth1q7

tpgth1q73#

作为其他评论的答案,您需要返回评论。下面是它的样子:

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

字符串
或者,如果你想要显式的函数体,那么这个:

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


我在想,你要么是自己没注意到,要么是你不知道箭头功能是如何工作的。提醒一下,如果你这样做:

const myFn = state => state.comments;


这意味着“隐式返回”。在=>箭头之后,直接写下从myFn函数返回的表达式。
如果在箭头后面打开花括号(() => { ... }版本),则必须显式返回所需的内容。

相关问题