如何在NgRx 7减速器中使用NgRx 8动作

Question

我在我的新的Range8项目中使用NgRx库。有人告诉我，他们使用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或尝试联合类型，但当您尝试联合类型时，您需要从操作文件中导入所有命名的导入。我认为对您最好的解决方案是下一代减缩器的语法，尝试使用新的格式。