Redux Thunk를 사용하여 비동기 상태 관리하기

18 Oct 2023

redux

비동기 작업은 모던 웹 애플리케이션에서 빠질 수 없는 요소입니다. 사용자 입력, API 호출 및 다양한 비동기 작업을 처리해야 할 때 Redux Thunk는 매우 유용한 미들웨어입니다. 이 블로그 포스트에서는 Redux Thunk를 사용하여 비동기 상태 관리를 어떻게 할 수 있는지 알아보겠습니다.

Redux Thunk란?

Redux Thunk는 Redux의 미들웨어 중 하나로, 액션 생성자 함수가 일반적인 객체 대신 함수를 반환할 수 있게 해줍니다. 이 함수는 Redux 스토어의 dispatch 메서드를 사용하여 액션을 디스패치할 수 있게 합니다. 이는 비동기 작업을 처리하는데 유용한 도구입니다.

비동기 작업 처리하기

비동기 작업을 처리하기 위해 Redux Thunk를 사용하는 방법은 다음과 같습니다.

비동기 작업을 위한 액션을 정의합니다. 예를 들어, 서버로부터 데이터를 가져오는 액션이라면 fetchData라는 액션을 정의합니다.
액션 생성자 함수에서 비동기 작업을 수행하는 함수를 반환합니다. 이 함수는 dispatch를 인자로 받아 비동기 작업을 수행하고 필요한 액션을 디스패치합니다.

예를 들어, 다음과 같이 fetchData 액션을 정의하고 이를 처리하기 위한 액션 생성자 함수를 만들 수 있습니다.

// 액션 정의
const FETCH_DATA = 'FETCH_DATA';

// 액션 생성자 함수
const fetchData = () => {
  return (dispatch) => {
    dispatch({ type: FETCH_DATA, loading: true });

    // 비동기 작업 수행
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => {
        dispatch({ type: FETCH_DATA, loading: false, data });
      })
      .catch((error) => {
        dispatch({ type: FETCH_DATA, loading: false, error });
      });
  };
};

위의 예시에서는 fetchData 액션 생성자 함수가 함수를 반환하고, 이 함수는 dispatch를 인자로 받아 비동기 작업을 수행합니다. 액션 생성자 함수 내부에서는 먼저 loading 상태를 디스패치하여 로딩 중임을 표시한 후, 데이터를 가져오고 성공 또는 실패에 따라 적절한 액션을 디스패치합니다.

Thunk 미들웨어 설정하기

Redux에서 Redux Thunk 미들웨어를 사용하려면 createStore 함수를 호출할 때 applyMiddleware를 사용하여 미들웨어를 설정해야 합니다. 다음은 Redux Thunk를 설정하는 예시입니다.

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

const store = createStore(rootReducer, applyMiddleware(thunk));

위의 예시에서는 redux-thunk 패키지를 가져와 Redux 미들웨어로 사용하고, applyMiddleware 함수를 사용하여 thunk를 적용합니다. 이렇게 설정하면 Redux Store에서 비동기 작업을 처리할 준비가 완료됩니다.

결론

Redux Thunk는 비동기 상태 관리를 위한 강력한 도구입니다. 액션 생성자 함수에서 비동기 작업을 처리할 수 있도록 해주므로 UI 상태와 비동기 상태를 쉽게 관리할 수 있습니다. Redux Thunk를 사용하여 비동기 작업을 처리해 보세요!

참고 자료: