next+ts Redux action 전체 코드 둘러보기

action

import { NextRouter } from "next/router";

import { da } from "../../type";

import { LoginData } from "../types/state";

import {

  Delete,

  Increase,

  LOGIN_FAIL,

  LOGIN_PENDING,

  LOGIN_SUCCESS,

  LOGOUT,

  Update,

} from "./actionTypes";

export const dataadd = (payload: da | undefined) => {

  return {

    type: Increase,

    payload,

  };

};

export const datadel = (payload: String | undefined) => {

  return {

    type: Delete,

    payload,

  };

};

export const dataupdate = (payload: da) => {

  return {

    type: Update,

    payload,

  };

};

export const LOGIN = (payload: LoginData | undefined, router: NextRouter) => {

  return {

    type: LOGIN_PENDING,

    payload,

    router,

  };

};

export const LOGINSUCCESS = (payload: LoginData) => {

  return {

    type: LOGIN_SUCCESS,

    payload,

  };

};

export const LOGINFAIL = () => {

  return {

    type: LOGIN_FAIL,

  };

};

export const reset = () => {

  return {

    type: LOGOUT,

  };

};

actinoTypes

export const Increase = "caremaker/dataincrease";

export const Delete = "caremaker/datadelete";

export const Update = "caremaker/dataupdate";

export const LOGIN_PENDING = "caremaker/LOGIN_PENDING";

export const LOGIN_SUCCESS = "caremaker/LOGIN_SUCCESS";

export const LOGIN_FAIL = "caremaker/LOGIN_FAIL";

export const LOGOUT = "caremaker/LOGOUT";

action 위주로 설명하겠습니다.

actionTypes는 앞에 프로젝트명/이름 이런식으로 간단하게 작성했습니다.

export const dataadd = (payload: da | undefined) => {

  return {

    type: Increase,

    payload,

  };

};

payload라는 인수를 받아서 그대로 전달해주게 됩니다. 처음에는 데이터를 넣고 undefined면 데이터를 추가안하고 제대로됬으면 추가하는 식으로 redux에서 해결할려고해서 이렇게 작성되었습니다.

export const datadel = (payload: String | undefined) => {

  return {

    type: Delete,

    payload,

  };

};

해당 idx를 인수로 받고 그 인수를 이용해서 해당 데이터를 삭제하기 위해 인수를 string으로 받게 되었습니다.

export const dataupdate = (payload: da) => {

  return {

    type: Update,

    payload,

  };

};

string으로 받을까 처음 생각했는데 한번더 생각해보니 변경된 내용이 뭐인지 알수 없게 되서 안될거 같아서 da로 변경해서 받게 되었습니다.

export const LOGIN = (payload: LoginData | undefined, router: NextRouter) => {

  return {

    type: LOGIN_PENDING,

    payload,

    router,

  };

};

처음에는 logindata만 받을려고 했는데 로그인하고 화면 이동을 위해서는 router도 같이 보내줘야된다고 보게 되어서 저렇게 router도 같이 보내게 되었습니다.

export const LOGINSUCCESS = (payload: LoginData) => {

  return {

    type: LOGIN_SUCCESS,

    payload,

  };

};

pending이후 처리된 데이터를활용하여 실행하는 것입니다.

export const LOGINFAIL = () => {

  return {

    type: LOGIN_FAIL,

  };

};

에러가 났는지를 확인하기위해 실행하는 것입니다.

export const reset = () => {

  return {

    type: LOGOUT,

  };

};

로그아웃을 위해 common.login을 다시 admin으로 설정해주는단계입니다.