如何在打字稿中使用 reselect createStructuredSelector 函数？答案

【问题标题】：How to use reselect createStructuredSelector function with typescript?如何在打字稿中使用 reselect createStructuredSelector 函数？
【发布时间】：2019-10-19 14:35:04
【问题描述】：

我正在尝试构建一个 react redux typescript 应用程序。

我正在使用 reslect 库来创建选择器。

我在使用 createStructuredSlectore 时遇到错误。请找出以下错误。

错误：没有重载匹配此调用

请在下面找到代码：

import React from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';

import { toggleDropDown } from '../../redux/cart/cart.actions';
import { selectItemCount } from '../../redux/cart/cart.selectors';

import { ReactComponent as ShoppingIcon } from '../../assets/11.2 shopping-bag.svg.svg';

import './cart-icon.component.scss';

interface ICartIconProps {
    toggleDropDown: () => void;
    itemCount: number;
}

const CartIcon: React.FC<ICartIconProps> = ({toggleDropDown, itemCount}) => (
    <div className='cart-icon' onClick={toggleDropDown}>
        <ShoppingIcon className='shopping-icon'/>
        <span className='item-count'>{itemCount}</span>
    </div>
)

const mapDispatchToProps = (dispatch: import('redux').Dispatch) => ({
    toggleDropDown: () => dispatch(toggleDropDown())
})

// If I use Below code its working fine
// const mapStateToProps = (state: AppState) => ({
//     itemCount: selectItemCount(state)
// })

// Iam getiing error here with below code
const mapStateToProps = createStructuredSelector({
    itemCount: selectItemCount,
})



export default connect(mapStateToProps, mapDispatchToProps)(CartIcon);

Slectors.ts

import { createSelector } from 'reselect'

import { AppState } from '../store'
import { ShopItem } from '../../models/collection.model'

const selectCart = (state: AppState) => state.cart

export const selectCartItems = createSelector(
  [selectCart],
  cart => cart.cartItems
);

export const selectHidden = createSelector(
  [selectCart],
  cart => cart.hidden
);

export const selectItemCount = createSelector(
  [selectCartItems],
  (cartItems: ShopItem[]) => {
    return cartItems.reduce(
      (accumulatedValue, cartItem) =>
        accumulatedValue + (cartItem.quantity as number),
      0
    )
  }
);

cart.reducer.ts

import { CartActionsTypes } from "./cart.types";
import { addItemToCart } from "./cart.utils";

const INITIAL_STATE = {
    hidden:  true,
    cartItems: []
};

const cartReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case CartActionsTypes.TOGGLE_CART_DROPDOWN:
            return {
                ...state,
                hidden: !state.hidden
            }
        case CartActionsTypes.ADD_ITEM:
            return {
                ...state,
                cartItems: addItemToCart(state.cartItems, action.payload)
            }    
        default:
            return state;
    }
}

export default cartReducer;

也有例子就好了。

【问题讨论】：

标签： javascript reactjs typescript redux

【解决方案1】：

您需要做的是将正确的道具传递给createStructuredSelector()。只需从选择器中导出类型即可。

selectors.ts

export type ItemCount = ReturnType<typeof selectItemCount>;

将接口更改为联合类型并将其提供给 CartIcon 组件。

CartIcon.tsx

import { ItemsCount } from 'selectors';

type CartIconProps = ItemCount & {
    toggleDropdown: () => object
};

现在创建的选择器不应该有任何过载。

const mapStateToProps = createStructuredSelector<AppState, ItemCount>({
    itemCount: selectItemCount,
})

【讨论】：

【解决方案2】：

在 selector.js 文件中导出 itemCount 名称，但在主文件中从选择器导入 selectItemCount。您应该将 selector.js 中的 itemCount 名称更改为 selectItemCount，如下所示：

export const selectItemCount = createSelector([cartItems], (cartItems) => {
    return cartItems.reduce((accumulatedValue, cartItem) => accumulatedValue + cartItem.quantity, 0);
});

或者：你应该像这样改变你的导入选择器：

import { itemCount } from '../../redux/cart/cart.selectors';

const mapStateToProps = createStructuredSelector({
    itemCount: itemCount,
})

【讨论】：

嗨@HamidReza Behzadi，请找到更新的 selector.ts 文件，当我使用 typescript 重新选择时出现错误。