如何使用 reselect createStructuredSelector function 和 typescript？

Question

I am trying to build an react redux typescript app.

I am using reslect library to create selectors.

I am getting an error while using createStructuredSlectore. Please find the error beolow.

Error: No overload matches this call

Please find the code below:

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;

also It is good to have an example.

Answer 1

What you need to do is pass the correct props to createStructuredSelector() . Simply export the type from the selectors.

selectors.ts

export type ItemCount = ReturnType<typeof selectItemCount>;

Change the interface to a union type and give it to the CartIcon componenent.

CartIcon.tsx

import { ItemsCount } from 'selectors';

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

Now there shouldn't be any overload from the created selector.

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

Answer 2

in selector.js file you export itemCount name but in your main file import selectItemCount from selectors. you should change itemCount name in selector.js to selectItemCount like this:

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

OR: you should change your import selectors like this:

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

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