In the development of my new Angular 8 project, I have incorporated the NgRx library. It was mentioned to me that actions are created using createAction in NgRx 8, but reducers are built using NgRx 7. Initially, I implemented my reducer with NgRx 8, but now I need to switch to NgRx 7. Below are the actions and reducer I have:
book.actions.ts
import { createAction, props } from "@ngrx/store";
import { Book } from "./book";
export const BeginGetBooksAction = createAction("BeginGetBooks");
export const SuccessGetBooksAction = createAction(
"SuccessGetBooks",
props<{ payload: Book[] }>()
);
export const BeginAddBookAction = createAction(
"BeginAddBook",
props<{ payload: Book }>()
);
export const SuccessAddBookAction = createAction(
"SuccessAddBook",
props<{ payload: Book[] }>()
);
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 }[];
editBook: Book;
}
const initialState: BooksState = {
Books: [],
ReadBooks: [],
WantToReadBooks: [],
editBook: new Book()
};
export function booksReducer(state = initialState, action: Action) {
switch (action.type) {
case BooksActions.BeginGetBooksAction.type:
return state;
case BooksActions.SuccessGetBooksAction.type:
return { ...state, Books: action.payload };
case BooksActions.BeginAddBookAction.type:
return state;
case BooksActions.SuccessAddBookAction.type:
return { ...state, Books: action.payload };
default:
return state;
}
}
An error is being triggered for action.payload
Property 'payload' does not exist on type 'Action'.
Can anyone pinpoint where I may have gone wrong??