Colin's Blog
Redux Thunk를 이용한 실시간 데이터 업데이트 예제

Redux Thunk는 Redux 미들웨어 중 하나로, 비동기 작업을 처리하고 액션을 디스패치할 수 있게 해줍니다. 이러한 기능을 이용하여 실시간 데이터 업데이트를 처리하는 예제를 살펴보겠습니다.

프로젝트 설정

먼저 Redux와 Redux Thunk를 설치해야 합니다. 다음 명령을 사용하여 npm을 통해 설치합니다:

npm install redux redux-thunk

다음으로 Redux 스토어를 설정하고 Thunk 미들웨어를 적용합니다. store.js 파일을 만들고 다음 코드를 작성합니다:

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

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

export default store;

액션 생성자와 Thunk 함수

본 예제에서는 데이터를 비동기로 가져오는 작업을 수행하고, 가져온 데이터를 이용하여 액션을 디스패치하는 방식으로 실시간 데이터 업데이트를 구현합니다. 우선 액션 타입과 액션 생성자 함수를 작성합니다:

// actionTypes.js

export const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
export const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';

// actionCreators.js

export const fetchDataRequest = () => ({
  type: FETCH_DATA_REQUEST,
});

export const fetchDataSuccess = (data) => ({
  type: FETCH_DATA_SUCCESS,
  payload: data,
});

export const fetchDataFailure = (error) => ({
  type: FETCH_DATA_FAILURE,
  payload: error,
});

다음으로 실제로 비동기 작업을 처리하고 액션을 디스패치하는 Thunk 함수를 작성합니다:

// actions.js

import { fetchDataSuccess, fetchDataFailure, fetchDataRequest } from './actionCreators';

export const fetchData = () => {
  return async (dispatch) => {
    dispatch(fetchDataRequest());

    try {
      const response = await fetch('https://example.com/api/data');
      const data = await response.json();

      dispatch(fetchDataSuccess(data));
    } catch (error) {
      dispatch(fetchDataFailure(error));
    }
  };
};

컴포넌트에서 Thunk 함수 사용

이제 Redux Thunk를 사용하여 데이터를 가져오는 Thunk 함수를 컴포넌트에서 사용할 수 있습니다. DataViewer 컴포넌트를 예로 들어보겠습니다:

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions';

const DataViewer = () => {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.data);
  const loading = useSelector((state) => state.loading);
  const error = useSelector((state) => state.error);

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

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default DataViewer;

위와 같이 Thunk 함수를 사용하여 데이터를 가져오고, 상태값을 이용하여 로딩 상태와 에러 처리를 할 수 있습니다. 데이터를 가져와서 렌더링하는 예제입니다.

마무리

이 예제에서는 Redux Thunk를 사용하여 실시간 데이터 업데이트를 구현하는 방법을 알아보았습니다. 비동기 작업을 처리하고 액션을 디스패치하기 위해 Thunk 함수를 사용하는 것은 복잡할 수 있지만, Redux Thunk를 이용하면 간단하게 구현할 수 있습니다. 이를 통해 Redux 애플리케이션에서 효율적인 데이터 업데이트를 할 수 있습니다.

더 자세한 내용은 Redux 공식 문서를 참고하시기 바랍니다.

© 2018 Colin. All rights reserved.