reactjs - Lägg till parameter till redux useSelector-hook


Jag lär mig Typescript och jag har skapat en liten app med

create-react-app my-app --template redux-typescript 

Det har skapat en hook för att skriva useSelector

import { TypedUseSelectorHook,useSelector } from 'react-redux';
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Med useAppSelector vill jag välja något från butiken med en parameter

const favouriteList = useAppSelector((listKey) => selectFavouriteList(listKey));   

Utan Typescript trodde jag att jag kunde lösa detta med currying.

const selectFavouriteList = (state: RootState) => (listKey: string) => {
            return state.favourites.lists[listKey]
        }

Men TypeScript returnerar detta fel, det förväntar sig butiken som parameter.

Argument of type 'DefaultRootState' is not assignable to parameter of type '{ favourites: favouriteListState; }'.
  Property 'favourites' is missing in type 'DefaultRootState' but required in type '{ favourites: favouriteListState; }'.ts(2345)
store.ts(8, 9): 'favourites' is declared here.

Har någon ett förslag på hur man löser detta :-)?

Svar #1

Du skulle göra det på det här sättet:

const favouriteList = useAppSelector((state) => selectFavouriteList(state, listKey)); 

där listKey är en lokal variabel.

Om du vill göra curry, gör det åt andra hållet:

const selectFavouriteList = (listKey: string) => (state: RootState) => {
            return state.favourites.lists[listKey]
}

const favouriteList = useAppSelector(selectFavouriteList(listKey));