Redux Thunk를 사용한 오류 처리 로직 예제

18 Oct 2023

redux

Redux Thunk는 Redux 미들웨어로, 비동기 작업과 함께 액션을 디스패치할 수 있게 해줍니다. 이를 통해 오류 처리 로직을 간편하게 구현할 수 있습니다. 이제 Redux Thunk를 사용하여 오류 처리 로직을 구현하는 예제를 살펴보겠습니다.

1. Redux Thunk 설치

먼저, Redux Thunk를 설치해야 합니다. 아래 명령어를 사용하여 설치할 수 있습니다.

npm install redux-thunk

혹은

yarn add redux-thunk

2. 액션과 리듀서 작성하기

Redux의 액션과 리듀서를 작성합니다. 이 예제에서는 FETCH_DATA_SUCCESS와 FETCH_DATA_ERROR라는 두 가지 액션을 사용합니다.

// actions.js

export const fetchDataSuccess = (data) => {
  return {
    type: 'FETCH_DATA_SUCCESS',
    payload: data
  };
}

export const fetchDataError = (error) => {
  return {
    type: 'FETCH_DATA_ERROR',
    payload: error
  };
}

// reducer.js

const initialState = {
  data: null,
  error: null
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_SUCCESS':
      return {
        ...state,
        data: action.payload,
        error: null
      };
    case 'FETCH_DATA_ERROR':
      return {
        ...state,
        data: null,
        error: action.payload
      };
    default:
      return state;
  }
}

export default reducer;

3. 비동기 작업과 함께 액션 디스패치하기

Redux Thunk를 사용하여 비동기 작업과 함께 액션을 디스패치할 수 있습니다. 예를 들어, API에서 데이터를 가져오는 비동기 작업을 수행하고, 성공적으로 데이터를 받아오면 FETCH_DATA_SUCCESS 액션을, 오류가 발생하면 FETCH_DATA_ERROR 액션을 디스패치하는 로직을 구현해보겠습니다.

// asyncActions.js

import axios from 'axios';
import { fetchDataSuccess, fetchDataError } from './actions';

export const fetchData = () => {
  return async (dispatch) => {
    try {
      const response = await axios.get('https://api.example.com/data');
      dispatch(fetchDataSuccess(response.data));
    } catch (error) {
      dispatch(fetchDataError(error.message));
    }
  };
}

4. 컴포넌트에서 비동기 작업 및 오류 처리 로직 사용하기

마지막으로, 컴포넌트에서 비동기 작업 및 오류 처리 로직을 사용할 수 있습니다. 예를 들어, 데이터를 가져오는 버튼을 눌렀을 때 데이터를 가져오고, 오류가 발생한 경우 에러 메시지를 표시하는 컴포넌트를 작성해보겠습니다.

// MyComponent.js

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './asyncActions';

const MyComponent = () => {
  const dispatch = useDispatch();
  const data = useSelector(state => state.data);
  const error = useSelector(state => state.error);

  useEffect(() => {
    // 컴포넌트가 마운트될 때 데이터를 가져오는 비동기 작업을 수행합니다.
    dispatch(fetchData());
  }, [dispatch]);

  return (
    <div>
      {data && <div>Data: {data}</div>}
      {error && <div>Error: {error}</div>}
    </div>
  );
}

export default MyComponent;

위 예제를 통해 Redux Thunk를 사용하여 오류 처리 로직을 구현하는 방법을 살펴보았습니다. Redux Thunk를 사용하면 비동기 작업과 액션 디스패치를 함께 처리할 수 있어서 코드를 간결하게 유지할 수 있습니다.

참고 자료:

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