[javascript] Redux에서 API 호출 방법은?

22 Nov 2023

javascript

Redux는 상태 관리를 위한 JavaScript 라이브러리로, API 호출을 효율적으로 관리할 수 있는 기능을 제공합니다. Redux를 사용하여 API를 호출하는 방법은 다음과 같습니다.

API 호출을 위한 액션(Action) 정의하기: Redux에서는 액션(Action)을 사용하여 어떠한 작업을 수행할지 정의합니다. API 호출을 위한 액션은 일반적으로 다음과 같은 구조를 가지고 있습니다.

{
  type: 'API_REQUEST',
  payload: { 
    method: 'GET',
    url: '/api/sample',
    body: {}
  }
}

위의 예시에서 type은 액션의 종류를 나타내는 문자열이며, payload는 API 호출에 필요한 정보를 담고 있는 객체입니다. method는 HTTP 메소드(GET, POST, PUT, DELETE 등)를 나타내며, url은 호출할 API의 주소입니다. body는 POST나 PUT 메소드일 때 전송할 데이터를 담고 있는 객체입니다.

API 호출을 처리하는 리듀서(Reducer) 작성하기: Redux에서는 리듀서(Reducer)를 사용하여 액션에 따라 상태를 업데이트합니다. API 호출에 대한 상태 업데이트를 처리하는 리듀서는 다음과 같이 작성할 수 있습니다.

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

function apiReducer(state = initialState, action) {
  switch (action.type) {
    case 'API_REQUEST':
      return {
        ...state,
        loading: true
      };
    case 'API_SUCCESS':
      return {
        ...state,
        loading: false,
        data: action.payload
      };
    case 'API_FAILURE':
      return {
        ...state,
        loading: false,
        error: action.payload
      };
    default:
      return state;
  }
}

export default apiReducer;

위의 예시에서는 API_REQUEST 액션이 디스패치되었을 때 loading 값을 true로 설정해 API 호출이 진행 중임을 나타냅니다. API_SUCCESS 액션이 디스패치되었을 때는 loading 값을 false로 설정하고, API에서 받은 데이터를 data에 저장합니다. API_FAILURE 액션이 디스패치되었을 때는 loading 값을 false로 설정하고, 에러 메시지를 error에 저장합니다.

미들웨어(Middleware) 사용하기: Redux에서는 미들웨어를 사용하여 액션을 호출하기 전, 후에 추가적인 작업을 할 수 있습니다. API 호출을 관리하기 위해 redux-thunk와 axios 미들웨어를 함께 사용하는 것이 일반적입니다.

import axios from 'axios';
import thunk from 'redux-thunk';

import apiReducer from './apiReducer';

const store = createStore(
  apiReducer,
  applyMiddleware(thunk.withExtraArgument(axios))
);

위 예시에서는 axios를 사용하여 실제 API 호출을 하게 됩니다. thunk.withExtraArgument(axios)를 사용하여 axios를 미들웨어에게 전달하고, 액션에서 해당 미들웨어를 사용할 수 있도록 합니다.

API 호출 액션 디스패치하기: 마지막으로, API 호출 액션을 디스패치하여 실제로 API 호출을 시작합니다. 이는 컴포넌트에서 수행할 수 있습니다.

import { useDispatch } from 'react-redux';
import { useEffect } from 'react';

import { apiRequest } from './actions';

function MyComponent() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(apiRequest());
  }, []);

  // 컴포넌트 내용 생략...
}

위의 예시에서는 useDispatch 훅을 사용하여 디스패치 함수를 가져온 후, useEffect 훅을 사용하여 컴포넌트가 마운트될 때 한 번만 apiRequest 액션을 디스패치하도록 설정합니다.

이렇게 Redux를 사용하여 API 호출을 효율적으로 관리할 수 있습니다.