Reactjs 流类型错误:无法调用绑定到操作的对象文字的分派,因为:

Reactjs 流类型错误:无法调用绑定到操作的对象文字的分派,因为:,reactjs,redux,react-redux,flowtype,redux-thunk,Reactjs,Redux,React Redux,Flowtype,Redux Thunk,我在流中遇到以下错误: 无法调用绑定到操作的对象文字的分派,因为: •属性类型中的字符串文字删除\u自\u购物车[1]与字符串文字添加\u至\u购物车[2]不兼容 •或字符串文字添加到\u购物车[1]与属性类型中的字符串文字从\u购物车[3]删除\u不兼容 •或字符串文字添加到\u购物车[1]与属性类型中的字符串文字增量[4]不兼容 •或字符串文字添加到\u购物车[1]与属性类型中的字符串文字减量[5]不兼容 •或字符串文字添加到购物车[1]与属性类型中的字符串文字显示产品详细信息[6]不兼容

我在流中遇到以下错误:

无法调用绑定到操作的对象文字的分派,因为:

•属性类型中的字符串文字删除\u自\u购物车[1]与字符串文字添加\u至\u购物车[2]不兼容

•或字符串文字添加到\u购物车[1]与属性类型中的字符串文字从\u购物车[3]删除\u不兼容

•或字符串文字添加到\u购物车[1]与属性类型中的字符串文字增量[4]不兼容

•或字符串文字添加到\u购物车[1]与属性类型中的字符串文字减量[5]不兼容

•或字符串文字添加到购物车[1]与属性类型中的字符串文字显示产品详细信息[6]不兼容

我在下面标记为**调度**的调度函数中遇到错误

文件:src/types/index.js

我被这件事缠住了。有人能提供解决方案吗

流链接复制问题

这不是一个正确的答案,而是一个替代方案。我无法让您的示例正常工作,通常会发现在流中处理对象类型和扩散非常复杂,所以下面是我如何解决这个问题的。这是一个简化的示例,只包含足够的操作来显示所使用的样式

在三元表达式上键入Dispatch。它与Flow配合得很好,Flow将知道条件句右侧的a的类型。流甚至会知道您是否忘记测试用例,因为最后一个条件假设ProductActionTypes类型中的所有其他类都已经检查过了


希望这是有帮助的,即使它不是你想要的。我所有的流代码都是用这种风格编写的,而且自从我开始这么做以来,还没有出现过任何非常粗糙、令人困惑的类型错误。

如果你在页面上创建一个最小的复制案例,其他人将更容易诊断问题。我无法在评论中分享该案例。它说文本太长了。因此,我在最后更新了问题本身中的情况。请查收@josephjnkI理解为什么直接放置字符串而不是常量。但是在多个位置重复ADD_TO_CART类型的值可能会导致拼写错误,如果我们稍后尝试更改ADD_TO_CART的名称,则必须在多个位置更改该值。幸运的是,这是类型系统的优点之一。当这两个位置耦合时,流将确保它们正确地保持同步,因为如果它们不同,将发生类型错误。
export const updateCart = (id: number, type: ProductActionsType) => {
    return (dispatch: Dispatch<ProductActionsReturnTypes>) => {
       **dispatch({ type, payload: id });**
       dispatch({ type: UPDATE_TOTALS });
     };
 };
export const FETCH_ITEMS = "FETCH_ITEMS";
export const ADD_TO_CART: "ADD_TO_CART" = "ADD_TO_CART";
export const REMOVE_FROM_CART: "REMOVE_FROM_CART" = "REMOVE_FROM_CART";
export const DISPLAY_PRODUCT_DETAIL: "DISPLAY_PRODUCT_DETAIL" =
  "DISPLAY_PRODUCT_DETAIL";
export const INCREMENT: "INCREMENT" = "INCREMENT";
export const DECREMENT: "DECREMENT" = "DECREMENT";
export const UPDATE_TOTALS: "UPDATE_TOTALS" = "UPDATE_TOTALS";
export const CLEAR_CART: "CLEAR_CART" = "CLEAR_CART";
export const OPEN_MODAL: "OPEN_MODAL" = "OPEN_MODAL";
export const CLOSE_MODAL: "CLOSE_MODAL" = "CLOSE_MODAL";

export type ClearCartActionType = {|
type: typeof CLEAR_CART
|};

type AddToCartActionType = {|
type: typeof ADD_TO_CART,
payload: number
|};

type RemoveFromCartActionType = {|
type: typeof REMOVE_FROM_CART,
payload: number
|};

export type DisplayProductDetailAction = {|
type: typeof DISPLAY_PRODUCT_DETAIL,
payload: number
|};

type IncrementActionType = {|
type: typeof INCREMENT,
payload: number
|};

type DecrementActionType = {|
type: typeof DECREMENT,
payload: number
|};

export type UpdateTotalsActionType = {|
type: typeof UPDATE_TOTALS
|};

export type ModalPayloadType = {|
id: number,
products: Array<ProductType>
|};

export type ProductActionsType =
| typeof ADD_TO_CART
| typeof REMOVE_FROM_CART
| typeof INCREMENT
| typeof DECREMENT
| typeof UPDATE_TOTALS
| typeof DISPLAY_PRODUCT_DETAIL
| typeof CLEAR_CART;

export type ProductActionsReturnTypes =
| AddToCartActionType
| RemoveFromCartActionType
| IncrementActionType
| DecrementActionType
| UpdateTotalsActionType
| DisplayProductDetailAction
| ClearCartActionType;