ошибка TS2345: Аргумент типа «books» не может быть назначен параметру типа «Books» - PullRequest
Новая
       25

ошибка TS2345: Аргумент типа «books» не может быть назначен параметру типа «Books»

0 голосов
/ 07 января 2020

Я очень новичок в angular. Я пытаюсь учиться, внедряя небольшие приложения. В настоящее время я работаю над небольшим приложением для отображения 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"'.

Код все еще работает нормально, но я не могу понять, почему я получаю ошибку. Мои файлы редуктора и 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. Но я не могу найти решение.

Я также создал стек стека здесь

...