Как использовать действия NgRx 8 с редуктором NgRx 7

Question

Я использую библиотеку NgRx в моем новом проекте Angular 8. Мне сказали, что они создают действия, используя createAction, то есть NgRx 8, но они создают редукторы, используя NgRx 7. Мне было дано задание, в котором я использовал NgRx 8 для своего редуктора, и теперь я должен изменить его на NgRx 7. Мои действия и редуктор следующие:

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

Я получаю сообщение об ошибке action.payload

Property 'payload' does not exist on type 'Action'.

Может кто-нибудь сказать мне, что я делаю неправильно ???

Answer 1

Я записал сравнение в функциях создателя NgRx 101 .

В статье вы можете увидеть, как можно объединить синтаксис обеих версий:

export const addToCart = createAction(
  // action's type
  '[Product List] Add to cart',
  // optional payload
  props<{ sku: string }>(),
)
export const removeFromCart = createAction(
  '[Product List] Remove from cart',
  props<{ sku: string }>(),
)

export function reducer(
  state = initialState,
  action: ReturnType<typeof addToCart> | ReturnType<typeof removeFromCart>,
) {
  switch (action.type) {
    case addToCart.type:
      return {
        ...state,
        cartItems: {
          ...state.cartItems,
          [action.sku]: (state.cartItems[action.sku] || 0) + 1,
        },
      }

    case removeFromCart.type:
      return {
        ...state,
        cartItems: {
          ...state.cartItems,
          [action.sku]: Math.max((state.cartItems[action.sku] || 0) - 1, 0),
        },
      }

    default:
      return state
  }
}

Answer 2

Ваш редуктор хорош, проблема заключается только в определении типа. Вы используете простой тип Action, где полезная нагрузка не существует. Попробуйте другое определение типа, например any или объединение типов, но когда вы используете объединение типов, вам понадобится весь именованный импорт из файла действия. Я думаю, что лучшим решением для вас является синтаксис следующего поколения редуктора, попробуйте использовать новый формат.