[TIL]2024.02.27 Thunk

JunSeok·2024년 2월 27일

TIL

목록 보기

25/27

Thunk

Thunk 란

Thunk는 Redux와 함께 사용되는 미들웨어 중 하나로, 비동기 작업을 처리하고 액션 생성자에서 비동기 로직을 다룰 수 있게 도와주는 도구이다. 특히 React 애플리케이션에서 Redux와 함께 사용되어 상태 관리를 효과적으로 처리하는 데 도움이 된다.

Thunk는 기본적으로 액션 생성자가 객체 대신 함수를 반환할 수 있도록 해주는 것이 주요 특징이다. 이 함수는 dispatch와 getState를 인자로 받을 수 있으며, 비동기 작업을 처리한 후에 실제 액션을 디스패치할 수 있다.

사용법

1. 설치

npm install redux-thunk

또는

yarn add redux-thunk

2. 스토어 설정

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers'; // 프로젝트에 맞는 리듀서를 가져옵니다.

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

export default store;

Redux 스토어를 생성할 때, applyMiddleware 함수를 사용하여 Redux Thunk 미들웨어를 추가한다.

3. 액션 생성자

// 예제 액션 생성자
const fetchData = () => {
  return (dispatch, getState) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });

    // 비동기 작업 수행 (예: API 호출)
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        dispatch({
          type: 'FETCH_DATA_SUCCESS',
          payload: data
        });
      })
      .catch(error => {
        dispatch({
          type: 'FETCH_DATA_FAILURE',
          payload: error
        });
      });
  };
};

export { fetchData };

액션 생성자를 함수로 작성하고, 비동기 작업을 수행한 후에 액션을 디스패치 한다.

4. Thunk 액션 디스패치

import { useDispatch } from 'react-redux';
import { fetchData } from '../actions'; // 액션 생성자 파일 경로에 맞게 수정

const MyComponent = () => {
  const dispatch = useDispatch();

  const handleFetchData = () => {
    // Thunk 액션 디스패치
    dispatch(fetchData());
  };

  // 컴포넌트 렌더링 및 이벤트 핸들러 등 추가
};