Redux Thunk를 이용한 선택한 항목 상세보기 구현 예제

18 Oct 2023

redux

Redux Thunk는 Redux의 미들웨어 중 하나로, 비동기 작업을 처리하는 것을 도와줍니다. 이번 예제에서는 Redux Thunk를 활용하여 선택한 항목의 상세 정보를 가져오는 기능을 구현해보겠습니다.

1. Redux Thunk 설치

먼저 Redux Thunk를 설치해야 합니다. 다음 명령어를 사용하여 필요한 패키지를 설치합니다.

npm install redux-thunk

또는

yarn add redux-thunk

2. Redux Thunk 미들웨어 적용

Redux Thunk를 사용하기 위해 Redux Store에 미들웨어를 적용해야 합니다. 코드는 다음과 같습니다.

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

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

3. 액션 생성자와 Thunk 생성자 작성

다음으로 선택한 항목의 상세 정보를 가져오기 위한 액션 생성자와 Thunk 생성자를 작성해야 합니다.

// 액션 생성자
export const fetchItemSuccess = (item) => ({
  type: 'FETCH_ITEM_SUCCESS',
  payload: item,
});

// Thunk 생성자
export const fetchItem = (itemId) => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_ITEM_REQUEST' });

    // API 호출 등의 비동기 작업 수행
    api.getItem(itemId).then((response) => {
      dispatch(fetchItemSuccess(response.data));
    });
  };
};

액션 생성자인 fetchItemSuccess는 항목 데이터를 가져와서 FETCH_ITEM_SUCCESS 액션을 생성합니다. fetchItem은 Thunk 생성자로, 비동기 작업을 수행하는 함수를 반환합니다. 이 함수 내에서 실제 데이터를 가져오고, fetchItemSuccess 액션을 디스패치합니다.

4. 컴포넌트에서 Thunk 액션 디스패치

마지막으로 컴포넌트에서 Thunk 생성자를 호출하여 선택한 항목의 상세 정보를 가져옵니다. 다음은 예시 코드입니다.

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

const ItemDetail = ({ itemId }) => {
  const dispatch = useDispatch();
  const item = useSelector((state) => state.item);

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

  return (
    <div>
      <h1>{item.title}</h1>
      <p>{item.description}</p>
      {/* 항목의 상세 정보를 표시 */}
    </div>
  );
};

export default ItemDetail;

useDispatch를 사용하여 dispatch 함수를 가져온 후, useEffect 훅을 이용하여 컴포넌트가 마운트되거나 itemId가 변경될 때 Thunk 액션을 디스패치합니다. 상태로부터 항목 데이터를 가져와서 화면에 표시하면 됩니다.

마무리

Redux Thunk를 이용하여 선택한 항목의 상세 정보를 가져오는 예제를 살펴보았습니다. Redux Thunk를 사용하면 비동기 작업을 보다 쉽게 처리할 수 있으며, 액션 생성자와 Thunk 생성자를 활용하여 원하는 동작을 구현할 수 있습니다.

#redux #redux-thunk