访问 dispatch 函数作为组件中的 prop

Question

import React from "react";

import "./cart-dropdown.style.scss";
import { CustomButton } from "../cutom-button/custom-button.component";
import { connect } from "react-redux";
import { StoreState } from "../../redux/root-reducer";
import { ItemModel } from "../../models/ShopPage";
import { CartItem } from "../cart-item/cart-item.component";
import { selectCartItems } from "../../redux/cart/cart.selector";
import { createStructuredSelector } from "reselect";
import { withRouter, RouteComponentProps } from "react-router-dom";

interface CartDropdownStoreProps {
  cartItems: ItemModel[];
}

interface CartDropdownProps extends CartDropdownStoreProps {}

const _CartDropdown: React.FC<CartDropdownProps & RouteComponentProps<{}>> = (
  props: CartDropdownProps & RouteComponentProps<{}>
) => {
  const { cartItems, history } = props;

  return (
    <div className="cart-dropdown">
      <div className="cart-items">
        {cartItems.length ? (
          cartItems.map(cartItem => (
            <CartItem key={cartItem.id} item={cartItem} />
          ))
        ) : (
          <span className="empty-message">Your cart is empty</span>
        )}
      </div>
      <CustomButton onClick={() => history.push("./checkout")}>
        GO TO CHECKOUT
      </CustomButton>
    </div>
  );
};

const mapStateToProps = createStructuredSelector<StoreState, CartDropdownProps>(
  {
    cartItems: selectCartItems
  }
);

export const CartDropdown = withRouter(connect(mapStateToProps)(_CartDropdown));

当我们没有将第二个参数传递给 connect 函数时，我们可以将 dispatch 函数作为组件内部的 prop 访问，对吗？ 已经使用 javascript 并且没有抱怨但是当我尝试使用 typescript 调度功能时，道具中不存在。

我控制台记录了该组件获取和调度f存在的所有道具。

我不知道为什么我无法访问它！ 有人可以帮我弄这个吗..？

Answer 1

您已经为_CartDropdown提供了类型为CartDropdownProps & RouteComponentProps<{}>的道具。 此类型不包含dispatch 。 因此，从 TS 的角度来看，不存在dispatch 。

console.log记录由 JS 表示的对象并查看dispatch 。

要解决，将dispatch类型添加到道具类型，如下所示

import { Dispatch } from 'redux'

const _CartDropdown: React.FC<CartDropdownProps & RouteComponentProps<{}> & {dispatch: Dispatch}> = /* ... */