Redux Thunk를 활용한 파일 업로드 구현 방법

18 Oct 2023

redux

파일 업로드는 웹 애플리케이션에서 매우 중요한 기능 중 하나입니다. Redux Thunk는 비동기 액션을 처리할 때 유용한 Redux 미들웨어로, 파일 업로드와 같은 비동기 작업을 간단하게 처리할 수 있습니다. 이번 블로그 포스트에서는 Redux Thunk를 활용하여 파일 업로드를 구현하는 방법에 대해 알아보겠습니다.

Redux Thunk 설정

먼저 Redux Thunk를 사용하기 위해 Redux 스토어에 미들웨어를 추가해야 합니다. redux-thunk 패키지를 설치한 후, Redux 스토어에서 applyMiddleware 함수를 사용하여 미들웨어를 등록합니다.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

이제 Redux 스토어에 Redux Thunk 미들웨어가 등록되었습니다.

파일 업로드 액션 생성자

파일 업로드를 위해 액션 생성자를 작성해야 합니다. 액션 생성자는 일반적인 동기 액션과 마찬가지로 액션을 반환하지만, 비동기 작업을 처리할 수 있도록 함수를 반환합니다. 이를 통해 파일 업로드와 같은 비동기 작업을 처리할 수 있습니다.

import axios from 'axios';

export const uploadFile = (file) => async (dispatch) => {
  try {
    // 파일 업로드를 위한 API 호출
    const response = await axios.post('/api/upload', file);

    // 파일 업로드 성공 시 액션 디스패치
    dispatch({
      type: 'FILE_UPLOAD_SUCCESS',
      payload: response.data,
    });
  } catch (error) {
    // 파일 업로드 실패 시 액션 디스패치
    dispatch({
      type: 'FILE_UPLOAD_FAILURE',
      error: error.message,
    });
  }
};

위의 예제 코드에서는 uploadFile 액션 생성자를 정의하였습니다. 이 액션 생성자는 파일을 인자로 받아와서 비동기적으로 파일을 업로드하고, 업로드 성공 또는 실패에 따라 액션을 디스패치합니다. 업로드 성공 시에는 FILE_UPLOAD_SUCCESS 액션을, 실패 시에는 FILE_UPLOAD_FAILURE 액션을 디스패치합니다.

파일 업로드 리듀서

파일 업로드를 처리하기 위해 리듀서를 작성해야합니다. 이 리듀서는 파일 업로드와 관련된 액션들을 처리하여 상태를 업데이트합니다.

const initialState = {
  uploading: false,
  error: null,
  uploadedFile: null,
};

const fileUploadReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FILE_UPLOAD_SUCCESS':
      return {
        ...state,
        uploading: false,
        uploadedFile: action.payload,
        error: null,
      };
    case 'FILE_UPLOAD_FAILURE':
      return {
        ...state,
        uploading: false,
        error: action.error,
      };
    default:
      return state;
  }
};

export default fileUploadReducer;

위의 예제 코드에서는 파일 업로드와 관련된 액션들을 처리하는 리듀서를 작성하였습니다. FILE_UPLOAD_SUCCESS 액션은 상태를 업데이트하여 파일 업로드 상태를 성공으로 변경하고, 업로드된 파일 정보를 상태에 저장합니다. FILE_UPLOAD_FAILURE 액션은 업로드 실패 시 에러를 상태에 저장합니다.

컴포넌트에서 파일 업로드 액션 디스패치

마지막으로 Redux 스토어의 액션을 컴포넌트에서 디스패치하여 파일 업로드를 호출할 수 있습니다. 컴포넌트에서 uploadFile 액션 생성자를 통해 파일 업로드 액션을 디스패치합니다.

import { useDispatch } from 'react-redux';
import { uploadFile } from './actions';

const FileUploadForm = () => {
  const dispatch = useDispatch();

  const handleFileUpload = (file) => {
    dispatch(uploadFile(file));
  };

  // 파일 선택 및 업로드 이벤트 핸들링 등 컴포넌트의 파일 업로드 로직

  return (
    // 파일 선택 및 업로드 UI
  );
};

export default FileUploadForm;

위의 예제 코드에서는 FileUploadForm 컴포넌트에서 uploadFile 액션 생성자를 디스패치하여 파일 업로드를 호출하는 예제입니다. useDispatch 훅을 사용하여 디스패치 함수를 가져온 후, 파일 업로드 이벤트가 발생하면 액션을 디스패치할 수 있습니다.

결론

Redux Thunk를 활용하여 파일 업로드를 구현하는 방법에 대해 알아보았습니다. Redux Thunk를 사용하면 비동기 작업을 처리할 수 있는 간편한 방법을 제공받을 수 있으며, 파일 업로드와 같은 비동기 작업을 손쉽게 처리할 수 있습니다. 이를 통해 웹 애플리케이션에서 파일 업로드 기능을 구현할 때 Redux Thunk를 적극 활용해보세요.

자세한 내용은 아래에서 확인할 수 있습니다.

Redux Thunk GitHub 페이지