Typescript환경에서의 Redux

Enum의 사용

기본적으로 Reducer문을 작성하다보면 어떠한 상수가 자주 사용될 것이다.
이럴 경우 번호로 관리하는 것보다 상수를 enum으로 등록하여 사용하는게 더 도움이 된다.
실제로 redux에서 작업유형을 상수로 정의하는것이 일반적인 관행이다.

export enum ViewTypes {
    ALL = 1,
    COMPLETED = 2,
    NOT_COMPLETED = 3
}

더욱 직관적으로 코드의 가독성을 향상 시켜주며, 잘못된 값이 전송되는 것을 방지할 수 있다.

Action의 유형

작업을 요구하는 Action자체에서 Payload로 들어오는 데이터의 타입이 명시되어 있지않을경우
any타입으로 추론되는 문제가 있다. 해당부분도 직접 명시하여 해결해야 한다.

export enum ActionTypes {
    ADD_TODO = "ADD_TODO",
    EDIT_TODO = 'EDIT_TODO',
    DELETE_TODO = "DELETE_TODO",
    FILTER_TODO = "FILTER_TODO",
}

export interface TodoBaseAction {
    type: ActionTypes
}

우선 enum으로 타입을 명시한다. 제3자가 코드를 쉽게 살펴 볼 수 있는 가독성을 확보할 수 있다.

export interface PayloadTypes {
    ADD_TODO: {
        data: {
            id: string,
            text: string
        }
    },
    EDIT_TODO: {
        data: {
            id: string,
            text: string
        }
    },
    DELETE_TODO: {
        data: {
            id: string
        }
    },
    FILTER_TODO: {
        view: ViewTypes.ALL | ViewTypes.COMPLETED | ViewTypes.NOT_COMPLETED
    }
}

위와 같이 Action, Payload의 interface를 선언할 경우, 뛰어난 확장성을 제공하는 액션의 타입을 명시 할 수 있다.

export interface AddTodoAction extends TodoBaseAction {
    type: ActionTypes.ADD_TODO,
    payload: PayloadTypes.ADD_TODO
}
export interface DeleteTodoAction extends TodoBaseAction {
    type: ActionTypes.DELETE_TODO,
    payload: PayloadTypes.DELETE_TODO
}
export interface EditTodoAction extends TodoBaseAction {
    type: ActionTypes.EDIT_TODO,
    payload: PayloadTypes.EDIT_TODO
}
export interface FilterTodoAction extends TodoBaseAction {
    type: ActionTypes.FILTER_TODO,
    payload: PayloadTypes.FILTER_TODO
}

타입을 깔끔하게 정리할 수 있고, 타입만으로도 동작을 유추할 수 있는 깔끔한 코드가 작성된다.
이러한 타입의 확장을 고려하면서 타입을 선언하도록 신경써보자.

dispatch의 타입 export

기본적으로 리덕스의 Store에도 타입이 명시되어 있지만, 파일이 다를 경우 컴포넌트에서 Store의 타입을 인식하지 못
dispatch의 제네릭타입이 <UnknownAction>이 되어, 정상적으로 값을 보내려면 타입에러가 발생하는 경우가 있었다.

import { configureStore } from '@reduxjs/toolkit';
import todoSlice from './reducers';
 
const store = configureStore({
    reducer: {
        todo: todoSlice.reducer,
    },
});
 
export type AppDispatch = typeof store.dispatch;
export default store;

export type AppDispatch = typeof store.dispatch를 export하여
해당 컴포넌트에 import하면 문제는 해결되었다.

제대로 읽어보지 않았었지만, Redux-toolkit의 doc에도 소개되어있었다. 공식문서를 참고하지 못한 내 실수였다.

Reference Doc / Dev.to

댓글은 포스팅에 도움이됩니다. 적극적인 의견 감사드립니다.

댓글을 불러오는 중...