Redux Thunk는 Redux의 미들웨어로, 비동기 액션을 처리하기 위해 사용됩니다. 이 문서에서는 Redux Thunk를 활용하여 로깅 기능을 추가하는 방법에 대해 알아보겠습니다.

Redux Thunk란 무엇인가요?

Redux Thunk는 Redux의 미들웨어로, 사이드 이펙트나 비동기 동작을 처리하는데 사용됩니다. Redux Thunk를 사용하면 액션 생성자 함수에서 비동기 동작을 수행할 수 있습니다. 이를 통해 액션 생성자 함수에서 비동기 동작을 처리하고, 액션을 디스패치할 수 있습니다.

Redux Thunk 설치하기

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

npm install redux redux-thunk

Redux와 Redux Thunk를 설치한 후, Redux 합성기 함수(reducer)에 Redux Thunk 미들웨어를 적용해야 합니다. 이를 위해 applyMiddleware 함수를 사용합니다.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

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

Redux 합성기 함수에 Redux Thunk 미들웨어를 적용하여 비동기 액션을 처리할 수 있게 준비가 완료되었습니다.

로깅 기능 추가하기

이제 Redux Thunk를 활용하여 로깅 기능을 추가해보겠습니다. 로깅 기능은 액션이 디스패치될 때마다 액션 정보와 상태 정보를 로깅하는 기능입니다. 아래는 로깅 기능을 추가하는 예시 코드입니다.

const logMiddleware = (store) => (next) => (action) => {
  console.log('Dispatching action:', action);
  console.log('Current state:', store.getState());
  next(action);
  console.log('Next state:', store.getState());
};

const store = createStore(reducer, applyMiddleware(thunk, logMiddleware));

위 코드에서 logMiddleware는 Redux Thunk와 함께 적용할 로깅 미들웨어입니다. 이 미들웨어 함수는 액션이 디스패치될 때마다 액션 정보와 상태 정보를 로깅합니다.

이제 액션을 디스패치할 때마다 로깅 기능이 동작하게 됩니다.

마무리

이 문서에서는 Redux Thunk를 활용하여 로깅 기능을 추가하는 방법을 알아보았습니다. Redux Thunk를 사용하면 액션 생성자 함수에서 비동기 동작을 처리하고, 로깅과 같은 사이드 이펙트를 추가할 수 있습니다.

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

#redux #redux-thunk