Redux Action“类型别名'Action'循环引用自身”答案

【问题标题】：Redux Action "Type alias 'Action' circularly references itself"Redux Action“类型别名'Action'循环引用自身”
【发布时间】：2021-03-05 08:23:04
【问题描述】：

我有两个动作：

export const addToCart = (id: string, qty: number) => async (
  dispatch: Dispatch,
  getState: () => RootState
) => {
  const { data }: { data: IProduct } = await axios.get(`/api/products/${id}`);
  dispatch({
    type: CartActionTypes.CARD_ADD_ITEM,
    payload: {
      id: data.id,
      name: data.name,
      image: data.image,
      price: data.price,
      countInStock: data.countInStock,
      qty,
    },
  });

  localStorage.setItem("cartItems", JSON.stringify(getState().cart.cartItems));
};

export const removeItem = (item: CartProduct) => ({
  type: CartActionTypes.CARD_REMOVE_ITEM,
  payload: item,
});

我创建 Action union 类型并将其传递给 reducer，但它给了我“类型别名 'Action' 循环引用自身”，我不知道这是什么意思。

export type Action =
  | ReturnType<typeof addToCart>
  | ReturnType<typeof removeItem>;

【问题讨论】：

标签： reactjs typescript redux

【解决方案1】：

当您有两个泛型类型相互引用时，就会出现循环引用的问题：

type Bar<T> = T;
type Foo = Bar<Foo>;

如您所见，这扩展为：type Foo = Bar<Foo> = Foo = Bar<Foo> = ...，即。你会得到一个循环引用。

在您的情况下，违规函数是第一个动作创建者：

export const addToCart = (id: string, qty: number) => async (
  dispatch: Dispatch,
  getState: () => RootState
) => {

通过传递getState: () => RootState，您引入了循环引用，因为RootState 是一个包含您稍后导出的export type Action 的联合。

要解决此问题，您必须区分 动作创建者 和 thunk。只有前者构成了RootState（有关差异的更多信息，我在这里推荐您：https://daveceddia.com/what-is-a-thunk/）。

所以，总而言之，从 Action 联合类型中删除 | ReturnType<typeof addToCart>，然后提取

dispatch({
  type: CartActionTypes.CARD_ADD_ITEM,
    payload: {
    id: data.id,
    name: data.name,
    image: data.image,
    price: data.price,
    countInStock: data.countInStock,
    qty,
  },
});

致动作创建者。

【讨论】：