react-redux에 typescript 활용하기_typesafe-actions 라이브러리 사용기

Issue

 

프로젝트 도중 typescript 기반의 react-redux 전역 상태를 세팅해야 되는 상황이 있었다.

 

redux 내 action, 액션 생성 함수, 리듀서에 대한 적절한 타입을 지정해주기 까다로운 상황 속에서 typesafe-actions 라는 라이브러리를 알게 되었다.

 

https://github.com/piotrwitek/typesafe-actions

GitHub - piotrwitek/typesafe-actions: Typesafe utilities for "action-creators" in Redux / Flux Architecture

 

이에 typesafe-actions 라이브러리를 활용하여 채팅 로그를 저장하는 전역 store을 구현하였고 이에 대해 회고해 보고자 한다.

 

Code

 

1) redux 상태 관리 코드 분립

 

flux 기반의 데이터 흐름을 위해 redux와 관련된 코드를 modules 폴더에 분립하여 주었다.

(module이란 키워드는 프로그래밍 상에서 광범위하게 쓰이기 때문에, 지금 보니 modules 폴더명은 그닥 좋지 못한 것 같다)

 

채팅 관련 정보를 저장하고 있는 comments 폴더 내에 크게 actions, reducer, types 하위 폴더로 분립해줌으로써, 각 기능에 대한 코드를 간략 및 명목화 시켰다.

📦modules
 ┣ 📂comments
 ┃ ┣ 📜actions.ts
 ┃ ┣ 📜reducer.ts
 ┃ ┗ 📜types.ts
 ┗ 📜index.ts

 

2) 액션 생성 함수에 대해 createAction 함수 사용

import { createAction } from 'typesafe-actions';
import type { CommentInfo } from './types';

export const ADD_COMMENT = 'comments/ADD_COMMENT' as const;
export const DELETE_COMMENT = 'comments/DELETE_COMMENT';
export const RESPONSE_COMMENT = 'response/RESPONSE_COMMENT';

let nextId = 5;

export const addComment = (commentInfo: CommentInfo) => ({
  type: ADD_COMMENT,
  payload: {
    ...commentInfo,
    messageId: ++nextId,
  },
});

export const deleteComment = createAction(DELETE_COMMENT)<number>();
export const responseComment = createAction(RESPONSE_COMMENT)<number | null>();

원래 타입스크립트 내에서 액션 값에 뒤에 as const 라고 const assertion을 해줘야, string literal type이 아닌 상수 그 자체 값으로 인식된다.

 

typesafe-acions 내 createAction 함수를 사용하여 액션을 지정하면 자동으로 이에 대한 타입 지정 과정을 처리해주기 때문에 생략이 가능하다.

 

하지만 이 경우에도 as const를 써야 될 경우와 쓰지 않을 경우로 나눠지는데, action.payload 값을 그대로 쓰지 않고 정제해야 될 경우(파라미터로 받아 온 데이터와 리턴되는 action.payload 값이 다를 경우)에는 createAction 함수를 쓰지 않고 const assertion을 한 뒤 일반 액션 생성 함수를 작성하는 것이 좋다.

// 예시 코드

// const assertion 사용
export const addTodo = (text: string) => ({
    type: ADD_TODO,
    payload: {
        id: nextId++,
        text
    }
})

// createAction 함수 사용 => 코드가 더 복잡해 질 수 있음
export const addTodo = createAction(ADD_TODO, action => (text: string) => action({
     id: nextId++,
     text
}))

 

3) InitialState와 Action에 대한 타입 지정

import { ActionType } from 'typesafe-actions';
import * as actions from './actions';

export type CommentsAction = ActionType<typeof actions>;
export type ResponseAction = ActionType<typeof actions>;

export type CommentInfo = {
  userid: number;
  messageId: number;
  userName: string;
  profileImage: string;
  content: string;
  date: string;
  responseId: number | null;
};

export type CommentsInfoState = CommentInfo[];

export type ResponseState = {
  responseId: null | number;
  responseActive: boolean;
};

액션에 대한 타입을 지정해 주기 위해 acions 모듈에서 각 action들을 한 번에 import 해 온 뒤, typeof 연산자를 사용하여 해당 acions 객체에 대한 타입 추론을 해주었다.

 

그리고 해당 typeof 연산을 typesafe-actions 내 ActionType 함수의 제너릭으로 지정해주어, action에 대한 타입 값을 손 쉽게 지정하여 주었다.

// 예시 코드

// ActionType을 쓰지 않을 경우(모든 액션에 대해 ReturnType 연산을 사용)
type TodosAction = ReturnType<typeof addTodo> | ReturnType<typeof toggleTodo> | ReturnType<typeof removeTodo>

// ActionType을 쓸 경우
const actions = { addTodo, toggleTodo, removeTodo };
type TodosAction = ActionType<typeof actions>;

 

4) createReducer 함수를 사용하여 리듀서 정의

import { createReducer } from 'typesafe-actions';
import { CommentsAction, CommentsInfoState } from './types';
import { ADD_COMMENT, DELETE_COMMENT, RESPONSE_COMMENT } from './actions';

const initialState: CommentsInfoState = [
  {
    userid: 1,
    messageId: 1,
    userName: '춘식',
    profileImage: './img/profile_yongwoo.png',
    content: '네이버로 보내줘~',
    date: '2021-02-10 23:26:30',
    responseId: null,
  },
  ( ... )
];

const comments = createReducer<CommentsInfoState, CommentsAction>(initialState, {
  [ADD_COMMENT]: (state, action) => state.concat(action.payload),
  [DELETE_COMMENT]: (state, action) => state.filter((info) => info.messageId !== action.payload),
});

export default comments;

types 모듈에서 정의 한 type 값들을 import하여 initialState에 타입을 지정해주며 createReducer 함수에 제너릭으로 사용하였다.

 

// 예시 코드

// createReducer 함수를 사용하지 않은 경우
function todos(state: TodosState = initialState, action: TodosAction): TodosState {
     switch(action.type) {
         case ADD_TODO:
             return state.concat({
                 id: action.payload.id,
                 text: action.payload.text,
                 done: false,
             })
         case TOGGLE_TODO:
             return state.map(todo =>
                 todo.id === action.payload ? { ...todo, done: !todo.done } : todo
                 )
         case REMOVE_TODO:
             return state.filter(todo => todo.id !== action.payload)
         default:
             return state
     }
 }
 
 // createReducer 함수를 사용한 경우
 const todos = createReducer<TodosState, TodosAction>(initialState, {
    [ADD_TODO]: (state, action) => state.concat({
        ...action.payload,
        done: false
    }),
    [TOGGLE_TODO]: (state, action) => state.map(
        todo => todo.id === action.payload ? { ...todo, done: !todo.done } : todo
    ),
    [REMOVE_TODO]: (state, action) => state.filter(todo => todo.id !== action.payload)
})