Typing useSelector

Automatic state suggestions for your useSelector hook. This is based on version 7.1.1 of react-redux. We first create a type of the state using the rootReducer. If not already done so, create a folder to contain your types and add it to typeRoots in config.json. Last, reimplement the typings for useSelector using the exported RootState.

@/state.ts

const rootReducer = combineReducers({
  ...
});

export type RootState = ReturnType<typeof rootReducer>;

@/tsconfig.json

{
  "compilerOptions": {
    "typeRoots": ["types", "node_modules/@types"]
  }
}

@/types/react-redux.d.ts

import { RootState } from "@/state";

declare module "react-redux" {
  export function useSelector<TState, TSelected>(
    selector: (state: RootState) => TSelected,
    equalityFn?: (left: TSelected, right: TSelected) => boolean,
  ): TSelected;
}