[javascript] Redux에서 비동기 작업을 어떻게 처리하는가?

22 Nov 2023

javascript

가장 인기 있는 Redux 미들웨어 중 하나는 Redux Thunk입니다. 이 미들웨어는 함수를 디스패치할 수 있게 해주고, 이를 통해 비동기 작업을 처리할 수 있습니다. 다음은 Redux Thunk를 사용하여 비동기 작업을 처리하는 예제 코드입니다.

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

// 미들웨어를 적용하여 스토어 생성
const store = createStore(rootReducer, applyMiddleware(thunk));

// 비동기 작업을 처리하는 액션 생성자 함수
const fetchData = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });
    // 비동기 작업 수행
    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_DATA_FAILURE', payload: error });
      });
  };
};

// 비동기 작업 액션 디스패치 예제
store.dispatch(fetchData());

위 예제에서, fetchData 함수는 비동기 작업을 수행하는 액션 생성자 함수입니다. 이 함수는 Redux Thunk 미들웨어에 의해 인식되고, 디스패치 함수를 인자로 받아서 비동기 작업을 처리합니다.

비동기 작업을 처리하는 과정에서 액션을 디스패치하여 앱 상태를 업데이트 할 수 있습니다. 위 예제에서는 데이터를 가져오기 전과 성공 또는 실패 후에 관련된 액션을 디스패치합니다.

이와 같은 방식으로 Redux 미들웨어를 사용하여 비동기 작업을 처리할 수 있습니다. Redux Thunk 외에도 Redux Saga, Redux Observable 등의 다른 미들웨어도 있으며, 프로젝트의 요구에 맞는 미들웨어를 선택하여 사용할 수 있습니다.

참고 자료:

Redux Thunk: https://github.com/reduxjs/redux-thunk