Typescript: Redux Toolkit store type

 

Redux Toolkit을 사용하면서 Dispatch와 useSelector를 사용하면 빨간줄로 확인할 수 있는 오류는 발생하지 않았다.

그러나 데이터는 생성하지 않고 오류를 발생시킨다.

 

알고보니 Dispatch와 useSelector를 사용하는데 store에 type을 지정해야 했다.

Typescript는 모든 오류를 빨간 줄로 알려줄 것이라는 생각은 하지 않아야 겠다.

 

export type AppDispatch = typeof store.dispatch;

export const useAppDispatch: () => AppDispatch = useDispatch;

 

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

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

 

공식 문서의 검색은 Redux toolkit ts로 진행하면 된다.

usage with typescirpt 항목과 링크로 들어간 부분의 useSelector 부분으로 나뉘어져 서술하고 있다.

Usage With TypeScript | Redux Toolkit

Usage with TypeScript | React Redux