Redux useSelector 사용시, 귀찮은 RootState(AppState)을 없애기

현재 팀에서는 typescript를 사용하지 않아 매우 불편하다.

typescript 도입하고 싶다고 하였지만, 여러번 반려당했다. 이유를 들어보면 어느정도 이해는 되긴한다.

그래서 나는 처음으로 typescript 없이 오직 javacsript 만으로 코딩을 하기 시작하였다.

여러 불편함을 너무 발견하였고, tight하게 타입을 정의하기보다는 loose하게 작업하자고 생각하였다. 그래서 혼자서 작업을 하고 있다.

현재 내가하는 목표는 prmitive type을 넣기보다는 property(object key etc.)를 추론할 수 있도록 타입을 넣고 있다.

 

redux를 사용하게 되면 아래처럼 RootState를 import해서 많이 사용할 것이다.

예시) 동영상 일부장면 ( https://www.youtube.com/watch?v=FM5yyBaqqcg )

이 코드의 문제점은 useSelector를 사용하는 곳은 무조건 RootState type을 넣는다는 것이다.

 

export const reducers = combineReducers({
  auth: authReducer,
  form: formReducer,
  nav: navReducer,
})

export type AppState = StateType<typeof reducers>

주로 위처럼 작성해서 type을 import해서 사용할 것이다. 하지만 type을 직접 import 하기보다는 declare 파일을 정의해서 사용하면 불편함이 감소할 것이다.

 

// @types/index.d.ts
import 'react-redux';

import { AppState } from '../reducers';

declare module 'react-redux' {
  interface DefaultRootState extends AppState { };
}

 

typescript는 interface merge를 지원한다. 그러므로 위처럼 작성하면 redux에 있는 DefaultRootState와 내가 작성한 DefaultRootState를 merge하게 된다.