Redux Thunk를 사용하여 다중 파일 업로드하기

18 Oct 2023

redux

이번 블로그에서는 Redux Thunk를 사용하여 다중 파일 업로드를 처리하는 방법에 대해 알아보겠습니다.

1. Redux Thunk란?

Redux Thunk는 Redux의 미들웨어 중 하나로, 비동기 액션을 처리하기 위해 사용됩니다. 일반적으로 Redux에서는 동기 액션만 처리할 수 있지만, Redux Thunk를 사용하면 비동기 작업을 처리할 수 있게 됩니다. 이를 통해 다중 파일 업로드와 같은 비동기 작업을 간편하게 처리할 수 있습니다.

2. 다중 파일 업로드 예시

// actions.js

import { UPLOAD_FILES_START, UPLOAD_FILES_SUCCESS, UPLOAD_FILES_FAILURE } from './actionTypes';

export const uploadFiles = (files) => {
  return (dispatch) => {
    dispatch({ type: UPLOAD_FILES_START });

    // 파일 업로드 API 호출
    uploadAPI(files)
      .then((response) => {
        dispatch({
          type: UPLOAD_FILES_SUCCESS,
          payload: response.data,
        });
      })
      .catch((error) => {
        dispatch({
          type: UPLOAD_FILES_FAILURE,
          payload: error.message,
        });
      });
  };
};

// API 호출 함수
const uploadAPI = (files) => {
  return new Promise((resolve, reject) => {
    // 파일 업로드 로직 처리
    // ...
    // 성공 시 resolve(), 실패 시 reject() 호출
  });
};

// actionTypes.js

export const UPLOAD_FILES_START = 'UPLOAD_FILES_START';
export const UPLOAD_FILES_SUCCESS = 'UPLOAD_FILES_SUCCESS';
export const UPLOAD_FILES_FAILURE = 'UPLOAD_FILES_FAILURE';

// reducer.js

import { UPLOAD_FILES_START, UPLOAD_FILES_SUCCESS, UPLOAD_FILES_FAILURE } from './actionTypes';

const initialState = {
  isLoading: false,
  error: null,
  uploadedFiles: [],
};

const fileUploadReducer = (state = initialState, action) => {
  switch (action.type) {
    case UPLOAD_FILES_START:
      return {
        ...state,
        isLoading: true,
        error: null,
        uploadedFiles: [],
      };
    case UPLOAD_FILES_SUCCESS:
      return {
        ...state,
        isLoading: false,
        uploadedFiles: action.payload,
      };
    case UPLOAD_FILES_FAILURE:
      return {
        ...state,
        isLoading: false,
        error: action.payload,
      };
    default:
      return state;
  }
};

export default fileUploadReducer;

위의 예시 코드에서는 uploadFiles 액션을 사용하여 파일 업로드 작업을 수행합니다. 액션은 Redux Thunk를 통해 비동기적으로 처리되며, 파일 업로드 API에 파일들을 전송합니다. API 호출 결과에 따라 성공 혹은 실패에 대한 액션을 디스패치합니다.

또한, 액션 타입과 초기 상태를 관리하는 actionTypes.js와 reducer.js 파일도 함께 사용되었습니다.

3. 마무리

Redux Thunk를 사용하여 다중 파일 업로드를 처리하는 방법에 대해 알아보았습니다. 이를 통해 비동기 작업을 Redux에서 좀 더 쉽고 효율적으로 관리할 수 있게 됩니다. 본 예시 코드를 참고하여 실제 프로젝트에서 활용해 보시기 바랍니다.

참고 문서:

Redux Thunk 공식 문서: https://github.com/reduxjs/redux-thunk
Redux 공식 문서: https://redux.js.org/