타입스크립트에서 useSelector 사용하기

useSelector란

리덕스의 스토어의 상태값을 가져올 때 사용하는 hook 함수이다.
connect를 사용하지 않고 바로 스토어의 상태값을 가져올 수 있어 편리하다.

useSelector 타입스크립트에 적용

타입스크립트에서 useSelector를 사용하는데 조금 다르게 사용하였다.
제네릭을 사용하여 타입을 추가 지정해주었다. 제네릭의 첫번째 자리에는 리듀서의 타입, 두번째 자리에는 스토어의 상태값 중에서 사용하고자할 상태의 타입을 지정해주어야 한다.

useSelector<defaultRootState,select>를 사용

// reducers/index.ts
export interface IReducerState {
	user: IUserReducerState;
	form: IFormReducerState;
}

// reducers/form.ts
export const initialState = {
  isGettingFormList: false,
  formList: [],
  formTotalNumber: 0,
  getFormListErrorReason: "",
  isGettingFormGroup: false,
  formGroup: [],
  ...
};

export type IFormReducerState = typeof initialState;
  
// useSelector 사용 예
const {formList, formTotalNumber} = useSelector<IReducerState, IFormReducerState>(state => state.form)

defaultRootState는 IReducerState를 지정해주고 select에는 IFormReducerState를 지정하여 여러 state값을 구조분해할당으로 가져와 사용하였다.
구조분해할당이 원치 않으면 다음과 같이 설정하여도 된다.

const formList - useSelector<IReducerState,any[]>(state.form.formList)
const formTotalNumber - useSelector<IReducerState,number>(state.form.formTotalNumber)

두번째 방법은 타입을 일일히 지정해주어야 되므로 코드가 길어진다. 그래서 구조분해할당을 사용하는 것이 좋을듯 싶다.