😀 Next.js + TypeScript + Redux + Redux-Saga 적용

Next.js + Redux + Redux-Saga + TypeScript를 사용한 프로젝트에 대한 포스트입니다.

🤔 사용 이유

현재 프로젝트에 사용하는 데이터들을 보다 더 효율적이고 편하게 관리하기 위해서 상태 관리 라이브러리인 Redux를 선택했습니다. 또한 비동기 처리와 각종 유용한 이펙트들을 이용하기 위해서 Redux-Saga를 선택했습니다.

🧐 Redux + Redux-Saga + Next.js 세팅

기본적인 Redux의 형태는 여기를 기반으로 만들었습니다.

1. 폴더 구조

1. /src/store/actions: 액션 크리에이터 함수와 액션들의 타입을 정의하는 공간
2. /src/store/api: ajax 요청 함수를 정의하는 공간
3. /src/store/reducers: 리듀서들을 정의하고 index.ts에서 rootReducer를 정의
4. /src/store/sagas: 사가들을 정의하고 index.ts에서 rootSaga를 정의
5. /src/configureStore.ts: 리듀서, 사가, 미들웨어를 합쳐 스토어를 생성하는 공간
6. /src/store/types.ts: 리덕스에서 사용하는 모든 타입들을 정의하는 공간

2. store 생성 및 세팅

• redux.sagaTask 참고

• /src/configureStore.ts

import {
  legacy_createStore as createStore,
  applyMiddleware,
  compose,
} from "redux";
import createSagaMiddleware from "redux-saga";
import { createWrapper } from "next-redux-wrapper";
import { composeWithDevTools } from "redux-devtools-extension";

import rootReducer from "./reducers";
import rootSaga from "./sagas";

const configureStore = () => {
  const sagaMiddleware = createSagaMiddleware();
  const middlewares = [sagaMiddleware];
  const enhancer =
    process.env.NEXT_PUBLIC_NODE_ENV === "production"
      ? compose(applyMiddleware(...middlewares))
      : composeWithDevTools(applyMiddleware(...middlewares));

  const store = createStore(rootReducer, enhancer);
  // typescript에서 오류가 안나기 위해서 "redux.d.ts"생성
  store.sagaTask = sagaMiddleware.run(rootSaga);

  return store;
};

// 나중에 "_app.tsx"에서 감싸줌
const wrapper = createWrapper(configureStore, {
  debug: process.env.NEXT_PUBLIC_NODE_ENV === "development",
});

export default wrapper;

• @types/redux.d.ts

import "redux";
import { Task } from "redux-saga";

declare module "redux" {
  export interface Store {
    sagaTask?: Task;
  }
}

• pages/_app.tsx

import type { AppProps } from "next/app";

// store
import wrapper from "@src/store/configureStore";

function MyApp({ Component, pageProps }: AppProps) {
  // redux관련 코드 제외하고 모두 생략
  return (
    <>
      <Component {...pageProps} />
    </>
  );
}

// "/src/configureStore.ts"에서 생성한 wrapper
export default wrapper.withRedux(MyApp);

3. SSR 적용 ( SSG, ISR 등 )

import type {
  GetServerSideProps,
  GetServerSidePropsContext,
  NextPage,
} from "next";

// redux + server-side-rendering
import wrapper from "@src/store/configureStore";
import { END } from "redux-saga";
import { axiosInstance } from "@src/store/api";

// actions
import { loadToMeRequest, loadPostsRequest } from "@src/store/actions";

// redux와 관련 없는 코드 생략
const Home: NextPage = () => {
  return (<></>);
};

export const getServerSideProps: GetServerSideProps =
  wrapper.getServerSideProps(
    (store) => async (context: GetServerSidePropsContext) => {
      /**
       * front-server와 backend-server가 서로 다르기때문에
       * axios의 "withCredentials" 옵션으로 브라우저의 쿠키를 전달할 수 없음
       * 따라서 직접 axios에 쿠키를 넣어주고 서버로 요청 후 다시 axios의 쿠키를 제거해주는 과정을 거침
       * 클라이언트는 여러 대지만 서버는 한대이기 때문에 서버 사용한 쿠키는 반드시 제거해 줘야 함
       */
      let cookie = context.req?.headers?.cookie;
      cookie = cookie ? cookie : "";
      axiosInstance.defaults.headers.Cookie = cookie;

      // 서버 사이드에서 dispatch할 내용을 적어줌
      store.dispatch(loadToMeRequest());
      store.dispatch(loadPostsRequest({ lastId: -1, limit: 15 }));

      // 밑에 두 개는 REQUEST이후 SUCCESS가 될 때까지 기다려주게 해주는 코드
      store.dispatch(END);
      await store.sagaTask?.toPromise();

      // 위에서 말한대로 axios의 쿠키 제거
      axiosInstance.defaults.headers.Cookie = "";
      
      // 위의 작업들이 정상작동을 한다면 클라이언트에서 렌더링할 때 이미 redux의 store에 데이터가 들어가 있음
	  // 따라서 props에 데이터를 전달할 필요 없음
      return {
        props: {},
      };
    }
  );

export default Home;

✨ 예시

간단하게 로그인관련 코드만 추가하겠습니다. 또한 rootReducer와 rootSaga 생성과 관련된 코드는 제외했습니다.

1. type

export const LOCAL_LOGIN_REQUEST = "LOCAL_LOGIN_REQUEST" as const;
export const LOCAL_LOGIN_SUCCESS = "LOCAL_LOGIN_SUCCESS" as const;
export const LOCAL_LOGIN_FAILURE = "LOCAL_LOGIN_FAILURE" as const;
export type LogInBody = {
  id: string;
  password: string;
};
export type LogInResponse = {
  ok: boolean;
  message: string;
  user: SimpleUser;
};

2. action

import {
  LOCAL_LOGIN_FAILURE,
  LOCAL_LOGIN_REQUEST,
  LOCAL_LOGIN_SUCCESS,
  LogInBody,
  LogInResponse,
} from "@src/store/types";

// 2022/05/06 - 로컬 로그인 액션 크리에이터 - by 1-blue
export const localLoginRequest = (data: LogInBody) => ({
  type: LOCAL_LOGIN_REQUEST,
  data,
});
export const localLoginSuccess = (data: LogInResponse) => ({
  type: LOCAL_LOGIN_SUCCESS,
  data,
});
export const localLoginFailure = (data: FailureResponse) => ({
  type: LOCAL_LOGIN_FAILURE,
  data,
});

3. reducer

import {
  RESET_MESSAGE,
  LOCAL_LOGIN_REQUEST,
  LOCAL_LOGIN_SUCCESS,
  LOCAL_LOGIN_FAILURE,
  LOCAL_LOGOUT_REQUEST,
  LOCAL_LOGOUT_SUCCESS,
  LOCAL_LOGOUT_FAILURE,
  SIGNUP_REQUEST,
  SIGNUP_SUCCESS,
  SIGNUP_FAILURE,
} from "@src/store/types";
import type { AuthActionRequest } from "../actions";

type StateType = {
  loginLoading: boolean;
  loginDone: null | string;
  loginError: null | string;
};

const initState: StateType = {
  // 2022/05/06 - 로그인 관련 변수 - by 1-blue
  loginLoading: false,
  loginDone: null,
  loginError: null,
};

function authReducer(prevState: StateType = initState, action: AuthActionRequest): StateType {
  switch (action.type) {
    // 2022/05/13 - 리셋 메시지 - by 1-blue
    case RESET_MESSAGE:
      return {
        ...prevState,
        loginLoading: false,
        loginDone: null,
        loginError: null,
      };

    // 2022/05/06 - 로그인 - by 1-blue
    case LOCAL_LOGIN_REQUEST:
      return {
        ...prevState,
        loginLoading: true,
        loginDone: null,
        loginError: null,
      };
    case LOCAL_LOGIN_SUCCESS:
      return {
        ...prevState,
        loginLoading: false,
        loginDone: action.data.message,
      };
    case LOCAL_LOGIN_FAILURE:
      return {
        ...prevState,
        loginLoading: false,
        loginError: action.data.message,
      };

    default:
      return prevState;
  }
}

export default authReducer;

4. api

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_SERVER_URL + "/api",
  withCredentials: true,
  timeout: 10000,
});

// type
import type { LogInBody, LogInResponse, SignUpBody } from "../types";

export const apiLocalLogin = (body: LogInBody) => axiosInstance.post<LogInResponse>("/auth", body);

5. saga

import { all, call, fork, put, takeLatest } from "redux-saga/effects";

// types
import type { AxiosResponse } from "axios";
import {
  LOCAL_LOGIN_FAILURE,
  LOCAL_LOGIN_REQUEST,
  LOCAL_LOGIN_SUCCESS,
  LogInResponse,
} from "@src/store/types";

// api
import { apiLocalLogin } from "@src/store/api";

function* localLogin(action: any) {
  try {
    const { data }: AxiosResponse<LogInResponse> = yield call(
      apiLocalLogin,
      action.data
    );

    yield put({ type: LOCAL_LOGIN_SUCCESS, data });
    yield put({ type: LOAD_TO_ME_SUCCESS, data });
  } catch (error: any) {
    console.error("authSaga localLogin >> ", error);

    const message =
      error?.name === "AxiosError"
        ? error.response.data.message
        : "서버측 에러입니다. \n잠시후에 다시 시도해주세요";

    yield put({ type: LOCAL_LOGIN_FAILURE, data: { message } });
  }
}
function* watchLocalLogin() {
  yield takeLatest(LOCAL_LOGIN_REQUEST, localLogin);
}

export default function* authSaga() {
  yield all([fork(watchLocalLogin)]);
}

👏 마무리

예시를 보면 알 수 있듯이 하나의 상태를 만들기 위해서는 정말 많은 코드가 필요합니다.
액션, 리듀서, api요청, 사가, 타입 생성의 정말 많은 코드가 늘어나는 게 상당히 불편하고, 수정할 때와 추가할 때마다 연관된 코드가 너무 많고 다른 파일에 나뉘어있어서 작업하기 정말 불편하고 힘들었습니다.
그래서 다음에 redux에서 추천하는 방식인 redux-toolkit으로 전부 바꿔보려고 합니다.