[typescript] store의 타입을 가진 react-redux useSelector hook 만들기

빠른요약

// store/index.ts

import { useSelector } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: { books: booksSliceReducer, searchResult: searchResultReducer },
});

type RootState = ReturnType<typeof store.getState>;
type SelectFn = (state: RootState) => typeof state[keyof typeof state];

export const useMySelector = (selectFn: SelectFn) => useSelector(selectFn);

 

 

기존에 사용하던 불편한 방식

// store/index.ts

import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: { books: booksSliceReducer, searchResult: searchResultReducer },
});

export type RootState = ReturnType<typeof store.getState>;

// component/MyComp.tsx

import { type RootState } from "@/store";

const { booksData } = useSelector((state: RootState) => state.books);

useSelector 훅을 사용할 때마다  RootState 타입을 import 해와야해서 불편하다.

 

 

개선된 방식

// store/index.ts

import { useSelector } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: { books: booksSliceReducer, searchResult: searchResultReducer },
});

type RootState = ReturnType<typeof store.getState>;
type SelectFn = (state: RootState) => typeof state[keyof typeof state];

export const useMySelector = (selectFn: SelectFn) => useSelector(selectFn);

store의 타입을 지정한 custom useSelector 훅을 만들어 두면  더이상 RootState 타입을 임포트 하지 않고 타입스크립트의 이점을 누릴 수 있다.