🐲 Next.js + TypeScript + Redux-Toolkit + Redux-Saga적용

Next.js + TypeScript + Redux-Toolkit + Redux-Saga 적용 방법에 대한 포스트입니다.

👇 설치

create-next-app을 이용해서 프로젝트를 생성했다고 가정하고 나머지 설치할 패키지입니다.

npm i @reduxjs/toolkit next-redux-wrapper redux-saga react-redux
npm i -D @types/react-redux

🤔 Redux-Toolkit 사용 이유

Redux에 대한 내용은 여기를 참고해 주세요!

Redux-Toolkit은 기본적으로 Redux를 베이스로 잡고 코드 작성의 편의성을 위해서 사용하는 라이브러리입니다.

Redux를 사용해봤다면 알겠지만 유용한 만큼 코드를 관리하기 불편하고 귀찮습니다.
하나의 상태를 만들기 위해서는 타입, 액션, 리듀서를 추가/수정이 필요하고 데이터를 변경할 때도 불변성을 지켜줘야 해서 쉽게 변경하기가 힘듭니다. 그리고 typescript를 적용하면 각각 주고 받는 타입을 정의하고 적절한 곳에 적용해줘야 합니다.
글로 적어서 별거 아닌 것처럼 보일 수 있지만 직접 만들어보면 하나의 타입을 추가할 때마다 한숨이 나올 정도로 반복적인 작업이라고 느껴집니다.

이런 Redux의 반복적인 작업을 어느 정도 해소하기 위해서 사용하는 게 Redux-Toolkit이라고 생각합니다.
위 설치에서 보면 알겠지만, 기본적으로 Redux-Toolkit에는 Redux, immer, redux-thunk 등의 라이브러리들이 내장되어 있어서 굳이 Redux를 따로 설치해주지 않아도 됩니다.

✨ Redux-Toolkit 사용법

기존 Redux의 코드를 간단하게 보고 싶다면 여기를 참고해 주세요!
전체 코드는 너무 많아서 기본 세팅할 수 있게 게시글들을 로드하는 코드만 추가했습니다.

1. 폴더 구조

1. /src/configureStore.ts: 리듀서, 사가, 미들웨어를 합쳐 스토어를 생성 + 리듀서 타입을 정의하는 공간
   ( 리듀서 타입이란 react-redux의 useSelector()훅을 이용해서 가져오는 store의 타입을 의미 )
2. /src/store/api: ajax 요청 함수를 정의하는 공간
3. /src/store/reducers: 리듀서들을 정의하고 index.ts에서 rootReducer를 정의 ( createSlice() 사용 )
4. /src/store/sagas: 사가들을 정의하고 index.ts에서 rootSaga를 정의
5. /src/store/types: 리덕스에서 사용하는 모든 타입들을 정의하는 공간 ( api에 대한 요청/응답 타입 정의 )

액션 타입과 액션 크리에이터는 createSlice()로 만든 slice.actions로 대체 ( 생성 방식을 참고해서 자동으로 액션을 생성해줌 )

2. type 생성

• 기본적으로 주고 받는 타입의 형태

type responseType = {
  status: {
    ok: boolean,
    // ... 상태랑 관련된 데이터들
  },
  data: {
    message: string;
    // ... 응답에 필요한 데이터들
  }
}

• /src/store/types/index.ts

// 응답 status 기본 타입
export type ResponseStatus = {
  status: {
    ok: boolean;
  };
};
// 응답 데이터 기본 타입
export type ResponseData = {
  message: string;
};
// 예측가능한 실패인 경우 응답 타입 ( 403, 409 등 )
export type ResponseFailure = {
  status: { ok: boolean };
  data: { message: string };
};

export type { LoadPostsBody, LoadPostsResponse } from "./post";

• /src/store/types/post.ts

import type { ResponseData, ResponseStatus } from ".";

// 모든 게시글들 정보 로드 요청/응답 타입
export type LoadPostsBody = {
  lastId: number;
  limit: number;
};
export type LoadPostsResponse = ResponseStatus & {
  data: ResponseData & {
    limit: number;
    posts: IPostWithPhotoAndCommentAndLikerAndCount[];  // "IPostWithPhotoAndCommentAndLikerAndCount"는 게시글 타입
  };
};

3. slice 생성

• /src/store/reducers/index.ts

import { HYDRATE } from "next-redux-wrapper";
import { combineReducers } from "@reduxjs/toolkit";
import type { AnyAction, CombinedState } from "@reduxjs/toolkit";

// reducers ( 나머지 리듀서도 있다고 가정 )
import authReducer, { AuthStateType } from "./authReducer";
import userReducer, { UserStateType } from "./userReducer";
import postReducer, { PostStateType } from "./postReducer";
import chatReducer, { ChatStateType } from "./chatReducer";

// actions ( 하나의 파일에서 import 해주기 위해서 export ~ from 사용 )
export { authActions } from "./authReducer";
export { userActions } from "./userReducer";
export { postActions } from "./postReducer";
export { chatActions } from "./chatReducer";

type ReducerState = {
  auth: AuthStateType;
  post: PostStateType;
  user: UserStateType;
  chat: ChatStateType;
};

// 원래 "rootReducer"로 합쳐줄 필요 없이 "configureStore()"에서 합칠 수 있지만 "HYDRATE"를 위해서 사용
const rootReducer = (state: any, action: AnyAction): CombinedState<ReducerState> => {
  switch (action.type) {
    // SSR을 위해서 사용 ( "next.js"의 "getServerSideProps()" )
    case HYDRATE:
      return {
        ...state,
        ...action.payload,
      };

    default:
      return combineReducers({
        auth: authReducer,
        user: userReducer,
        post: postReducer,
        chat: chatReducer,
      })(state, action);
  }
};

export default rootReducer;

• /src/store/reducers/postReducer.ts

import { createSlice } from "@reduxjs/toolkit";

import type { PayloadAction } from "@reduxjs/toolkit";
import type { LoadPostsBody, LoadPostsResponse } from "@src/store/types";
  
export type PostStateType = {
  posts: IPostWithPhotoAndCommentAndLikerAndCount[];  // "IPostWithPhotoAndCommentAndLikerAndCount"는 게시글 타입
  loadPostsLoading: boolean;
  loadPostsDone: null | string;
  loadPostsError: null | string;
};

const initialState: PostStateType = {
  // 모든 게시글들의 정보를 저장할 변수
  posts: [],
  
  // 모든 게시글들 요청 관련 변수
  loadPostsLoading: false,
  loadPostsDone: null,
  loadPostsError: null,
};

/**
 * "createSlice()"는 액션 타입, 액션 크리에이터, 리듀서를 한 번에 만드는 함수입니다.
 * name: 유니크한 액션을 만들 때 사용
 * initialState: 최초 상태
 * reducers: 리듀서들을 정의
 * PayloadAction로 인자의 타입을 정의해주면 자동완성 지원됨
 */
const postSlice = createSlice({
  name: "post",
  initialState,
  reducers: {
    // 모든 게시글들 패치
    loadPostsRequest(state, action: PayloadAction<LoadPostsBody>) {
      state.loadPostsLoading = true;
      state.loadPostsDone = null;
      state.loadPostsError = null;
    },
    loadPostsSuccess(state, action: PayloadAction<LoadPostsResponse>) {
      state.loadPostsLoading = false;
      state.loadPostsDone = action.payload.data.message;
      // 여기서는 "immer"가 적용되기 때문에 불변성을 지키지 않아도 됨
      // 하지만 아래처럼 불변성 지키는게 코드가 더 간단해보여서 이렇게 작성함
      state.posts = [...state.posts, ...action.payload.data.posts];
      state.hasMorePosts = action.payload.data.posts.length === action.payload.data.limit;
    },
    loadPostsFailure(state, action: PayloadAction<ResponseFailure>) {
      state.loadPostsLoading = false;
      state.loadPostsError = action.payload.data.message;
    },
  },
});

// 액션 타입과 액션 크리에이터 대신 사용 ( "dispatch()"에서 사용 => ex) dispatch(postActions.loadPostsRequest({ lastId: 0, limit: 10 })) )
export const postActions = postSlice.actions;
// RootReducer 생성 시 사용
export default postSlice.reducer;

4. api 생성

• /src/store/api/index.ts

import axios from "axios";

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

export { apiLoadPosts } from "./post";

• /src/store/api/post.ts

import { axiosInstance } from ".";

import type { LoadPostsBody, LoadPostsResponse } from "@src/store/types";

// 모든 게시글들 요청
export const apiLoadPosts = ({ lastId, limit }: LoadPostsBody) =>
  axiosInstance.get<LoadPostsResponse>(`/posts?lastId=${lastId}&limit=${limit}`);

5. saga 생성

• /src/store/sagas/index.ts

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

// 나머지 사가도 있다고 가정
import authSaga from "./authSaga";
import userSaga from "./userSaga";
import postSaga from "./postSaga";
import chatSaga from "./chatSaga";

export default function* rootSaga() {
  yield all([fork(authSaga), fork(userSaga), fork(postSaga), fork(chatSaga)]);
}

• /src/store/sagas/post.ts

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

// action
import { postActions } from "@src/store/reducers";

// types
import type { AxiosResponse } from "axios";
import type { PayloadAction } from "@reduxjs/toolkit";
import type { LoadPostsResponse, LoadPostsBody } from "@src/store/types";

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

function* loadPosts(action: PayloadAction<LoadPostsBody>) {
  try {
    // api 요청 및 응답 대기
    const { data }: AxiosResponse<LoadPostsResponse> = yield call(apiLoadPosts, action.payload);

    // 성공한 액션 디스패치
    yield put(postActions.loadPostsSuccess(data));
  } catch (error: any) {
    console.error("postSaga loadPosts >> ", error);

    // "AxiosError"라면 예측한 에러라서 백엔드로부터 전송된 메시지로 응답하고 아니라면 알 수 없는 서버 측 에러라는 메시지 응답
    // 팔로우한 유저를 다시 팔로우, 좋아요 누른 게시글에 다시 좋아요 누르는 경우 같은 경우 "409"로 응답하는데 "axios"에서 "2xx"가 아니면 에러로 처리함
    const message = (error?.name === "AxiosError") ? error.response.data.data.message : "서버측 에러입니다. \n잠시후에 다시 시도해주세요";

    // 실패한 액션 디스패치
    yield put(postActions.loadPostsFailure({ status: { ok: false }, data: { message } }));
  }
}
function* watchLoadPosts() {
  // "postActions.loadPostsRequest"의 요청이 오면 "loadPosts()" 실행
  yield takeLatest(postActions.loadPostsRequest, loadPosts);
}

export default function* postSaga() {
  yield all([fork(watchLoadPosts)]);
}

6. store 생성 ( 리듀서, 사가 적용 )

• /src/store/configureStore.ts

import createSagaMiddleware from "redux-saga";
import { createWrapper } from "next-redux-wrapper";
import { configureStore } from "@reduxjs/toolkit";

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

const createStore = () => {
  const sagaMiddleware = createSagaMiddleware();
  const middlewares = [sagaMiddleware];
  const store = configureStore({
    reducer: rootReducer,
    middleware: middlewares,
    devTools: process.env.NEXT_PUBLIC_NODE_ENV === "development",
  });
  // 여기서 type 에러 발생 시 "redux.d.ts" 정의 필요
  store.sagaTask = sagaMiddleware.run(rootSaga);

  return store;
};

const wrapper = createWrapper(createStore, {
  debug: process.env.NEXT_PUBLIC_NODE_ENV === "development",
});

const store = createStore();
// "useSelector()"에서 사용하는 타입
export type RootState = ReturnType<typeof store.getState>;

// "_app.ts"에서 "wrapper.withRedux()"로 감싸주면 됨
export default wrapper;

7. 사용 예시

import { useDispatch, useSelector } from "react-redux";

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

// actions
import { postActions } from "@src/store/reducers";

// type
import type { GetServerSideProps, GetServerSidePropsContext, NextPage } from "next";
import type { RootState } from "@src/store/configureStore";

// redux와 관련 없는 코드 생략
const Home: NextPage = () => {
  const dispatch = useDispatch();
  const { posts, hasMorePosts, loadPostsLoading } = useSelector(({ post }: RootState) => post);
  
  // 임시로 만든 예시
  const onClick = useCallback(() => {
    dispatch(postActions.loadPostsRequest({ lastId: -1, limit: 15 }));
  }, [dispatch])
  
  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(postActions.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;

👏 마무리

간소화한 예시 코드도 너무 많지만, 기존에 Redux만 사용할 때보다는 코드양이 줄었습니다. ( 기존 게시글 리듀서 -> 1130줄에서 890줄 )
물론 기존에는 불변성을 지키면서 만들어보고 익숙해지면 immer를 사용해야 한다는 마인드 때문에 불변성을 지키느라 코드가 많이 길어진 이유도 있습니다.
그리고 Action 관련한 코드를 신경 쓸 필요 없다는 것도 장점이지만 가장 큰 장점은 TypeScript와의 호환성이라고 느꼈습니다.
기존에 제대로 적용하지 못한 것일 수 있지만 reducer, saga에서 타입이 적용이 안 됐기 때문에 불편했고, 어딘가 맞춰지지 않는 느낌이 들었습니다.
하지만 Redux-Toolkit을 사용하면서 타입이 제대로 적용되는 점이 매우 좋았습니다. 개인적으로 React.js와 Redux를 사용할 정도로 공부했다면 이미 TypeScript를 사용할 수 있는 능력이 있다고 생각하고 이왕 Redux를 사용하는 김에 Redux-Toolkit과 TypeScript를 사용하는 게 미래의 본인에게도 더 이점이 되지 않을까 생각합니다.