React 프로젝트 Redux에 TypeSCript 적용 과정

React 프로젝트 Redux에 TypeSCript 적용

Redux에 Type 적용 과정

1. data 타입 정의
2. 액션 리턴 타입 정의
3. 초기값 타입 정의
4. 리듀서 타입 정의
5. rootReducer RootState 타입 정의

data 타입 정의

초기값이 객체면서 객체 안의 타입이 많다면 미리 정의 해두는 게 편합니다. 또 전역 상태로 자주 쓰이기 때문에 언제든지 재사용이 가능합니다.

• 전역상태로 사용할 user 객체 데이터

[
 {
    id: 0,
    emial: 'dongwon@gmail.com',
    name: '동원',
    address: '서울특별시',
    ...
 },
]

• user data 타입 정의

export interface IUser {
  id: number;
  emial: string;
  name: string;
  address: string;
  ....
}

액션 타입 정의

• 액션 생성 함수
  액션 생성 함수의 파라미터에 타입을 미리 정의한 IUser[]로 타입을 설정합니다. 배열 형태로 구성했기 때문에 []로 설정했습니다.

export const check = (data: IUser[]) => ({
  type: CHECK,
  data,
});

• 액션 리턴 타입 정의
  액션 리턴 타입을 정의합니다. | 연산자로 여러 개를 연결할 수 있습니다.

type AuthAction =
  | ReturnType<typeof login>
  | ReturnType<typeof logout>
  | ReturnType<typeof check>;

초기값 타입 정의

• 초기값 타입
  미리 정의했던 IUser[]를 이용해 초기값의 타입을 정의합니다.

type AuthState = {
  user: IUser[];
};

리듀서 타입 정의

• 리듀서의 파라미터, 리턴 타입을 정의합니다. state는 초기값 타입, action은 action 타입 리턴 타입으로 초기값 타입을 정의합니다.

function auth(state: AuthState = initialStete, action: AuthAction): AuthState {
  switch (action.type) {
    case CHECK:
      return {
        ...state,
        user: action.data,
      };
    default:
      return state;
  }
}

rootReducer RootState 타입 정의

• 전역으로 사용할 RootState 타입 정의

// index.tsx
const rootReducer = combineReducers({
  auth,
});

export default rootReducer;

export type RootState = ReturnType<typeof rootReducer>;

• useSelector hooks로 전역 변수 가져올 때 오류나는 경우
  useSelector 정의로 이동해 TState: any 로 수정

• useSelector에 RootState 타입 추가

// index.t.ts
export function useSelector<TState = any, TSelected = unknown>..

// component
import { RootState } from '../../reducers';

const { user } = useSelector(({ auth } : RootState) => ({
  user: auth.user,
}));