[javascript] Redux에서 에러 핸들링(Error Handling) 방법은?

22 Nov 2023

javascript

Redux에서 에러 핸들링(Error Handling) 방법은?

Redux를 사용하여 상태 관리를 할 때, 때로는 API 호출이나 비동기 작업 중에 발생하는 에러를 처리해야 할 수 있습니다. 이러한 상황에서 Redux는 에러를 효율적으로 처리하기 위해 몇 가지 방법을 제공합니다.

미들웨어(Middleware)를 사용하기 Redux의 미들웨어를 사용하면 비동기 작업을 처리하고 에러를 다룰 수 있습니다. 가장 많이 사용되는 미들웨어 중 하나는 redux-thunk입니다. 이를 통해 액션 크리에이터 함수 안에서 비동기 작업을 수행하고, API 호출의 결과에 따라 다른 액션을 디스패치할 수 있습니다. 만약 API 요청이 실패하면 에러 액션을 디스패치하여 상태를 업데이트할 수 있습니다.

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';

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

// API 호출을 수행하는 액션 크리에이터 함수
const fetchData = () => async (dispatch) => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();

    dispatch({ type: 'FETCH_SUCCESS', payload: data });
  } catch (error) {
    dispatch({ type: 'FETCH_ERROR', payload: error.message });
  }
};

// 리듀서
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_SUCCESS':
      return { ...state, data: action.payload, error: null };
    case 'FETCH_ERROR':
      return { ...state, data: null, error: action.payload };
    default:
      return state;
  }
};

// 미들웨어를 적용한 스토어 생성
const store = createStore(reducer, applyMiddleware(thunkMiddleware));

액션에 에러 핸들링 정보 추가하기 액션 객체에 에러의 여부와 에러 메시지 등의 정보를 포함시켜 디스패치할 수도 있습니다. 이렇게 액션에 에러 핸들링 정보를 추가하면 리듀서에서 해당 정보를 활용하여 상태를 업데이트할 수 있습니다.

const fetchData = () => async (dispatch) => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();

    dispatch({ type: 'FETCH_SUCCESS', payload: data });
  } catch (error) {
    dispatch({ type: 'FETCH_ERROR', payload: { isError: true, message: error.message } });
  }
};

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

Redux를 사용하여 에러를 핸들링하는 방법에는 미들웨어를 활용하거나 액션 객체에 에러 정보를 추가하는 방법 등이 있습니다. 이러한 방법들을 활용하여 Redux 애플리케이션에서 에러를 효율적으로 관리할 수 있습니다.

참고 자료: