Redux Thunk는 Redux 미들웨어로, 비동기 작업을 처리하기 위해 사용됩니다. 이를 통해 액션 생성자 함수에서 비동기 코드를 처리할 수 있고, Redux 상태를 업데이트할 수 있습니다. 이번 예제에서는 Redux Thunk를 사용하여 데이터를 가져오는 방법을 살펴보겠습니다.

1. 패키지 설치

먼저 Redux Thunk 패키지를 설치해야 합니다. 아래 명령을 사용하여 설치할 수 있습니다.

npm install redux-thunk

또는

yarn add redux-thunk

2. 미들웨어 설정

Redux Thunk를 사용하기 위해 미들웨어를 설정해야 합니다. Redux 스토어를 생성할 때 applyMiddleware 함수를 사용하여 미들웨어를 적용합니다. 아래 코드는 Redux Thunk를 미들웨어로 사용하는 예제입니다.

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

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

3. 액션 생성자 함수 작성

데이터를 가져오기 위한 액션 생성자 함수를 작성합니다. Redux Thunk를 사용하여 비동기 작업을 처리하려면 액션 생성자 함수가 함수를 반환해야 합니다. 이 함수는 dispatch를 인자로 받아 비동기 작업을 수행하고, 데이터를 가져온 후에 적절한 액션을 반환합니다.

예를 들어, 유저 정보를 가져오는 액션 생성자 함수는 다음과 같이 작성할 수 있습니다.

import axios from 'axios';

export const fetchUser = () => {
  return async (dispatch) => {
    try {
      dispatch({ type: 'FETCH_USER_REQUEST' });
      const response = await axios.get('/api/user');
      dispatch({ type: 'FETCH_USER_SUCCESS', payload: response.data });
    } catch (error) {
      dispatch({ type: 'FETCH_USER_ERROR', payload: error.message });
    }
  };
};

4. 액션 디스패치

마지막으로, 액션을 디스패치하여 비동기 작업을 시작합니다. 이를 위해 dispatch 함수를 사용하고, 액션 생성자 함수를 호출합니다.

import { useDispatch } from 'react-redux';
import { fetchUser } from './actions';

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

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

  //...
};

이제 Redux Thunk를 사용하여 데이터를 가져오는 예제를 구현하였습니다. Redux Thunk를 통해 비동기 작업을 처리함으로써 애플리케이션 상태를 업데이트하고, 원하는 데이터를 가져올 수 있습니다.

더 자세한 내용은 Redux Thunk 공식 문서를 참고하세요.

References:

• Redux Thunk 공식 문서