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));
