[javascript] Redux와 Axios의 연동 방법은?

22 Nov 2023

javascript

Redux와 Axios는 웹 개발에서 자주 사용되는 라이브러리입니다. Redux는 상태 관리를 위한 도구이고, Axios는 HTTP 클라이언트 라이브러리입니다. Redux와 Axios를 함께 사용하면 애플리케이션의 상태를 효율적으로 관리하면서 서버와의 데이터 통신을 간편하게 처리할 수 있습니다.

Redux 상태에 데이터를 저장하고, Axios를 사용하여 서버와 통신하는 방법은 다음과 같습니다.

Redux Store 생성 Redux Store는 애플리케이션의 상태를 저장하는 중앙 데이터 저장소입니다. Redux Store를 생성하기 위해 redux 패키지를 설치하고 createStore 함수를 사용합니다.

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

Axios를 통한 HTTP 요청 처리 Axios를 사용하여 서버로 HTTP 요청을 보내고, 응답을 받아와야 합니다. Axios를 설치하기 위해 axios 패키지를 설치합니다.

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    // 서버로부터 받은 데이터 처리
  })
  .catch(error => {
    // 에러 처리
  });

Redux 상태 업데이트 Axios로부터 받은 데이터를 Redux 상태에 업데이트해야 합니다. 이를 위해 Redux 액션을 생성하고, 액션을 디스패치하여 상태를 업데이트합니다.

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

const dispatch = useDispatch();

axios.get('/api/data')
  .then(response => {
    dispatch(setData(response.data));
  })
  .catch(error => {
    // 에러 처리
  });

위의 예시에서 setData는 Redux 액션 생성자 함수입니다. 상태를 업데이트할 때마다 해당 액션을 디스패치하여 상태를 변경합니다.

Redux와 Axios의 연동 방법은 간단하지만 매우 유용합니다. Redux를 통해 상태를 통일된 방식으로 관리하고, Axios를 통해 서버와의 통신을 편리하게 처리할 수 있습니다.

더 자세한 정보를 찾으려면 Redux와 Axios의 공식 문서를 참고하시기 바랍니다.

Redux: https://redux.js.org/
Axios: https://axios-http.com/