Redux Thunk를 사용하여 비동기 형태의 상태 업데이트 예제

18 Oct 2023

redux

React 애플리케이션에서 Redux를 사용하여 상태를 관리하는 것은 일반적인 방법입니다. 그러나 Redux는 순수한 동기적인 상태 업데이트에만 최적화되어 있습니다. 비동기 작업을 처리해야 하는 경우 Redux Thunk를 사용하여 상태를 업데이트할 수 있습니다. 이번 블로그에서는 Redux Thunk를 사용하여 상태를 비동기적으로 업데이트하는 예제를 살펴보겠습니다.

Redux Thunk란?

Redux Thunk는 Redux의 미들웨어 중 하나입니다. 이를 사용하면 응용 프로그램의 액션 생성자에서 비동기 작업을 처리할 수 있습니다. 일반적으로 Redux에서는 액션 생성자가 동기 작업 (객체를 반환하는 작업) 만 수행하지만, Redux Thunk를 사용하면 액션 생성자가 대신 함수를 반환할 수 있습니다.

Redux Thunk 설치

Redux Thunk를 사용하기 위해 먼저 설치해야 합니다. npm 또는 yarn을 사용하여 다음 명령을 실행하십시오.

npm install redux-thunk

Redux Thunk 예제

이제 Redux Thunk의 예제 코드를 살펴보겠습니다. 우리는 비동기적으로 상태를 업데이트하기 위해 Redux Thunk를 사용할 것입니다.

1. 액션 타입 정의

먼저, 액션 타입을 정의해야 합니다. 예를 들어, FETCH_DATA 액션 타입을 만들어서 데이터를 가져오는 작업을 수행하도록 할 예정입니다.

// types.js

export const FETCH_DATA = 'FETCH_DATA';
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
export const FETCH_DATA_ERROR = 'FETCH_DATA_ERROR';

2. 액션 생성자 정의

다음으로, 액션 생성자를 정의합니다. FETCH_DATA 액션 생성자는 비동기 작업을 수행하고 FETCH_DATA_SUCCESS 또는 FETCH_DATA_ERROR 액션을 디스패치합니다.

// actions.js

import { FETCH_DATA, FETCH_DATA_SUCCESS, FETCH_DATA_ERROR } from './types';

export const fetchData = () => {
  return async (dispatch) => {
    dispatch({ type: FETCH_DATA });

    try {
      // 비동기 작업 수행
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();

      // 성공시 데이터를 가져오는 액션 디스패치
      dispatch({ type: FETCH_DATA_SUCCESS, payload: data });
    } catch (error) {
      // 실패시 에러를 처리하는 액션 디스패치
      dispatch({ type: FETCH_DATA_ERROR, payload: error.message });
    }
  };
};

3. 리듀서 정의

마지막으로, 리듀서를 정의합니다. FETCH_DATA_SUCCESS 액션을 받으면 상태를 업데이트하고 FETCH_DATA_ERROR 액션을 받으면 에러 상태를 저장합니다.

// reducer.js

import { FETCH_DATA_SUCCESS, FETCH_DATA_ERROR } from './types';

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

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

    case FETCH_DATA_ERROR:
      return { ...state, data: null, error: action.payload };

    default:
      return state;
  }
};

export default reducer;

결론

Redux Thunk를 사용하여 비동기 형태의 상태 업데이트를 처리하는 방법을 알아보았습니다. 비동기 작업을 처리해야 하는 경우 Redux Thunk는 유용한 도구입니다. React 애플리케이션에서 Redux Thunk를 사용하여 액션 생성자에서 비동기 작업을 수행하고 상태를 업데이트할 수 있습니다. 이를 통해 애플리케이션의 상태 관리를 더욱 유연하게 할 수 있습니다.

참고 자료:

Redux Thunk 공식 문서

#React #Redux #ReduxThunk