[redux + ts] dispatch, selector의 인자 타입 커스텀 훅으로 생성하기(매번 타입 선언을 하지 않아도 된다!)

redux의 dispatch와 selector를 사용할 때, 타입스크립트가 적용된 경우 매번 타입을 선언해줘야하는 번거로움이 있다. 이러한 번거로움을 최소화하기 위해 커스텀 훅을 생성할 수 있다. 

 

/* store.ts */
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

반응형

/* hook.ts */
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import type { RootState, AppDispatch } from './store';

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

728x90

무조건적으로 해당 훅을 만들어서 사용하는 걸 추천한다! 매번 타입 선언해주다보면 화딱지 난다. 게으른 개발자가 되자!(같은 코드를 굳이 반복해서 치지 말자는 뜻이다.)

 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖