Skip to content
logo
Padosum Wiki
Github
On this page

useReducer를 TypeScript와 사용하기

수정하기
문서 생성 2023-06-21 22:19:15 최근 수정 2023-06-21 22:57:13
On this page

Goal

useReducer에 타입을 설정하는 방법 알아보기

State Type

interface GridState {
  grid: string[];
  columns: number;
  rows: number;
}

Action Type

enum GridSizeActionKind {
  INCREASE_COLUMN = "INCREASE_COLUMN",
  DECREASE_COLUMN = "DECREASE_COLUMN",
  INCREASE_ROW = "INCREASE_ROW",
  DECREASE_ROW = "DECREASE_ROW",
}
type GridSizeAction = {
  type: GridSizeActionKind;
};

reducer

const gridReducer = (state: GridState, action: GridSizeAction) => {
  switch (action.type) {
    case GridSizeActionKind.INCREASE_COLUMN:
      // ...
    case GridSizeActionKind.DECREASE_COLUMN:
      // ...
    case GridSizeActionKind.INCREASE_ROW:
      // ...
    case GridSizeActionKind.DECREASE_ROW:
      // ...
    default:
      return state;
  }
};

여기까진 아무런 문제 없이 괜찮았다. 문제는 payload가 있는 action의 경우는 어떻게 구분해야 하는 것이었다.

Payload가 있는 Action

찾아보니 Payload가 있는 action과 없는 action을 따로 type을 설정하는 방법이 있었다.

type GridAction = {
  type: "UPDATE_GRID";
  payload: string[];
};


type GridSizeAction = {
  type: GridSizeActionKind;
};

그리고 최종 action type을 union type으로 만들어 전달한다.

type Actions = GridAction | GridSizeAction;


const gridReducer = (state: GridState, action: Actions) => {
  switch (action.type) {
    case "UPDATE_GRID":
      return {
        ...state,
        grid: action.payload,
      };
    case GridSizeActionKind.INCREASE_COLUMN:
    // ...
  }
}

dispatch

dispatch는 만든 Action Type을 export 하고 import 해서 사용하면 된다. 

dispatch({
    type: GridSizeActionKind.INCREASE_COLUMN,
})

reference

LINKS TO THIS PAGE

Tags