[Redux] Redux Thunk를 왜 사용해야 할까

먼저!! Redux Toolkit의 createAsyncThunk를 사용하면 상태 관리가 더 자동화되고 코드가 훨씬 간결해진다.

하지만, Toolkit 없이 Thunk의 기본 개념을 먼 익히기 위해 사용해보았다.

 

1. Redux Thunk란?

Redux는 기본적으로 동기적인 액션만 처리할 수 있다. 하지만 네트워크 요청처럼 비동기 로직이 필요한 경우, redux-thunk를 사용하면 비동기 작업을 액션 내부에서 처리할 수 있다.

✅ Redux에서 비동기 작업이 필요한 이유

기본적으로 Redux는 객체를 반환하는 순수 함수 기반의 상태 관리 시스템이다.

const fetchProducts = () => {
  const res = fetch("https://fakestoreapi.com/products"); // 비동기 API 호출
  return { type: "SET_PRODUCTS", payload: res };
};

dispatch(fetchProducts());

 

위 코드에서 API 호출 결과가 payload로 들어가길 기대하지만, fetch는 비동기 함수이므로 Promise 객체가 반환된다. Redux의 dispatch는 객체만 받기 때문에 이런 식으로 동작하면 안 된다.

➡ 이를 해결하려면 dispatch에서 비동기 함수를 실행할 수 있도록 하는 미들웨어가 필요하고, Redux Thunk가 그 역할을 한다.

---

🚨 비동기 함수를 아직도 이해하지 못한 너..

엥? 비동기 함수라서라고? 그러면 그냥 async/await만 추가하면 안돼? 

놀랍게도 내가 생각했던 질문이다.. 비동기에 집중할게 아니고 반환값에 집중해야 한다.

 

👉 단순히 async 처리를 하더라도 반환값이 Promise가 된다는 것이 중요!
👉 하지만 dispatch()는 객체를 받아야 하는데, Promise는 처리할 수 없음.

---

 

✅ Redux Thunk 적용

Redux Thunk를 적용하면 함수를 반환하는 액션을 dispatch할 수 있다.

export const fetchProducts = () => {
  return async (dispatch) => {
    const response = await fetch("https://fakestoreapi.com/products");
    const data = await response.json();
    dispatch({ type: "SET_PRODUCTS", payload: data });
  };
};

이제 dispatch(fetchProducts()) 하면 내부적으로 API 요청 → 성공 시 dispatch 실행 흐름이 자연스럽게 처리된다.

 

 

🚀 그런데 왜 굳이 Thunk를 사용해야 할까?

액션 내부에서 처리하지 않고, 그냥 컴포넌트 내부에서 fetch 해와서 데이터 처리하면 되지 않나? 라는 의문을 가진 너..

1. Redux의 철학을 유지하기 위해
   • Redux는 상태를 중앙에서 관리해야 하고, 비즈니스 로직(API 호출)도 Redux 액션 내부에서 처리하는 게 적절함.
2. 코드 재사용성과 유지보수를 위해
   • 여러 컴포넌트에서 동일한 API 호출을 할 때, 컴포넌트마다 useEffect에서 API 호출하는 게 아니라,
     fetchProducts() 같은 액션을 한 번만 만들어서 재사용할 수 있음.
3. 비동기 로직을 분리하여 깔끔한 코드 구조 유지
   • 컴포넌트는 UI를 관리하고, API 호출/데이터 저장 같은 로직은 Redux 액션이 처리하도록 분리할 수 있음.

 

정리

✔ 컴포넌트에서 API 호출 로직을 직접 실행하지 않고 Redux 액션을 통해 관리하고 싶음
✔ 하지만 Redux의 dispatch()는 원래 객체({ type, payload })만 받기 때문에 비동기 작업을 처리할 수 없음
✔ Thunk를 사용하면 dispatch()가 함수도 실행할 수 있어서 비동기 API 호출 후 데이터를 Redux에 저장할 수 있음