Question

我对棱角非常陌生。我正在尝试通过实现小型应用程序来学习。目前，我正在开发一个小型应用程序，以显示Books数据，对该数据进行一些CRUD操作以及简单的mark as read，want to read功能。 Books数据来自json文件。我的代码如下

book.component.ts

import { Component, OnInit } from "@angular/core";
import { Book } from "./book";
import { BooksState } from './book.reducer';
import { Store, select } from '@ngrx/store'
import { Observable, Subscription } from 'rxjs';
import { map } from 'rxjs/operators';
import * as BooksActions from './book.action'

@Component({
  selector: "book",
  templateUrl: "./book.component.html",
  styleUrls: ["./book.component.css"]
})
export class BookComponent {

  constructor(public store: Store<BooksState>) {
    this.books$ = store.pipe(select('books'));
  }

  books$: Observable<BooksState>;
  BooksSubscription: Subscription;
  booksList: Book[];

  ngOnInit() {
    this.BooksSubscription = this.books$
      .pipe(
        map(x => {
          this.booksList = x.Books;
        })
      )
      .subscribe();
    this.store.dispatch(BooksActions.BeginGetBooksAction())
  }

  markAsRead(isbn: string) {
    this.store.dispatch(BooksActions.BeginMarkAsReadAction({ payload: isbn }))
  }

  wantToRead(isbn: string) {
    this.store.dispatch(BooksActions.BeginWantToReadAction({ payload: isbn }))
  }
}

构造函数this.books$ = store.pipe(select('books'));中的行给出了构建错误：

ERROR in src/app/Book/book.component.ts(17,37): error TS2345: Argument of type '"books"' is 
not assignable to parameter of type '"Books" | "ReadBooks" | "WantToReadBooks" | "editBook"'.

该代码似乎仍然可以正常工作，但是我无法弄清楚为什么会出现错误。我的reducer和app.module文件在下面

book.reducer.ts

import { Action, createReducer, on } from "@ngrx/store";
import * as BooksActions from "./book.action";
import { Book } from "./book";

export interface BooksState {
  Books: Book[];
  ReadBooks: { book: Book, addedOn: Date }[];
  WantToReadBooks: { book: Book, addedOn: Date }[];
}

const initialState: BooksState = {
  Books: [],
  ReadBooks: [],
  WantToReadBooks: []
};

const booksReducer = createReducer(
  initialState,
  on(BooksActions.BeginGetBooksAction, state => state),
  on(BooksActions.SuccessGetBooksAction, (state: any, { payload }) => {
    return { ...state, Books: payload };
  }),

  on(BooksActions.BeginMarkAsReadAction, (state: any, { payload }) => {
    return { ...state, Books: payload };
  }),
  on(BooksActions.SuccessMarkAsReadAction, (state: any, { payload }) => {
    return { ...state, ReadBooks: payload, Books: state.Books };
  }),

  on(BooksActions.BeginWantToReadAction, (state: any, { payload }) => {
    return { ...state, Books: payload };
  }),
  on(BooksActions.SuccessWantToReadAction, (state: any, { payload }) => {
    return { ...state, WantToReadBooks: payload, Books: state.Books };
  })
);

export function reducer(state: BooksState | undefined, action: Action) {
  return booksReducer(state, action);
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BookComponent } from './Book/book.component';
import { MenuComponent } from './Menu/menu.component';
import { StoreModule } from '@ngrx/store';
import { reducer } from './Book/book.reducer';
import { EffectsModule } from '@ngrx/effects';
import { FormsModule } from '@angular/forms';
import { BooksEffects } from './Book/book.effect';
import { BooksService } from './Book/book.service';
import { WantToReadComponent } from './WantToRead/wanttoread.component';
import { MarkAsReadComponent } from './MarkAsRead/markasread.component';

@NgModule({
  declarations: [
    AppComponent,
    BookComponent,
    MenuComponent,
    WantToReadComponent,
    MarkAsReadComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    StoreModule.forRoot({ books: reducer}),
    EffectsModule.forRoot([BooksEffects]),
    FormsModule
  ],
  providers: [BooksService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我认为我没有使用select运算符权限。但是我找不到解决办法。

我还创建了一个堆叠here

错误TS2345：类型““ books””的参数不能分配给类型““ books””的参数

0 个答案: