# TIL-20210423

# Today

redux typescript

# Content

현재 준비중인 프로젝트는 nextjs를 이용하여 FE를 구성했고, redux는 Thunk를 이용하여 비동기처리를 할 예정이다.

이에 맞추어 typescript를 이용해 간단한 redux관리를 구현해 보았다.

# actionTypes

export const USER_SIGNUP_SUCCESS = "user/signup/SUCCESS" as const;
export const USER_SIGNUP_ERROR = "user/signup/ERROR" as const;

먼저 actionType을 설정

# Actions

import axios, { AxiosResponse } from "axios";
import * as actionTypes from "./actionTypes";

const { USER_SIGNIN_SUCCESS, USER_SIGNIN_ERROR } = actionTypes;

type User = {
  id: number;
  userName: string;
  email: string;
  profile: string;
};

interface Signin {
  email: string;
  password: string;
}

type userState = {
  isLogin: boolean;
  user?: User | null;
  test?: any;
};

먼저 사용할 타입에 대해 간단하게 설정한다. 이후에 interface 디렉토리에서 한번에 타입관리를 하도록 변경

// 초기상태를 선언합니다.
const initialState: userState = {
  isLogin: false,
  user: null,
};

// action
export const successSignin = (data: AxiosResponse) => ({
  type: USER_SIGNIN_SUCCESS,
  payload: data,
});

export const errorSignin = (data: AxiosResponse | string) => ({
  // 'error'텍스트 전달을 위해 두 가지 인자 타입
  type: USER_SIGNIN_ERROR,
  payload: data,
});

export const signin = ({ email, password }: Signin) => {
  return async (dispatch: Function) => {
    try {
      const data = await axios.post(
        "https://localhost:4000/user",
        { email, password },
        { withCredentials: true }
      );
      return dispatch(successSignin(data));
    } catch (e) {
      dispatch(errorSignin("error"));
      throw e;
    }
  };
};

// ReturnType<typeof _____> 는 특정 함수의 반환값을 추론해줍니다
// ActionType에서 as const를 통해 특정 값으로 정해줘야 정상적으로 작동
type userAction =
  | ReturnType<typeof successSignin>
  | ReturnType<typeof errorSignin>;

// 이 리덕스 모듈에서 관리 할 상태의 타입을 선언합니다

function user(state: userState = initialState, action: userAction): userState {
  switch (action.type) {
    case USER_SIGNIN_SUCCESS:
      return { ...state, test: action.payload };
    case USER_SIGNIN_ERROR:
      return { ...state, test: action.payload };
    default:
      return state;
  }
}

export default user;

이후에 redux-actions를 이용해 변경해볼 필요도 있을 것 같다.

ps. redux-actions라이브러리를 찾아 본 결과 typescript와 호환이 잘 안된다고 한다.

# reference

redux-actions with typescript (opens new window)

← TIL-20210421 TIL-20210508 →