Redux의 미들웨어란 무엇이며 thunk는 어떻게 동작하나요?

Question

Accepted Answer

**미들웨어(middleware)**는 action을 dispatch하는 것과 action이 reducer에 도달하는 것 사이에 위치하여, action을 가로채 **부수 효과**(비동기 API 호출, 로깅)를 처리하게 합니다 — reducer는 순수해야 하므로 이를 할 수 없습니다. **Thunk**는 가장 흔한 미들웨어로, 비동기 로직을 가능하게 합니다.

## 미들웨어의 위치

```text
dispatch(action) → [ 미들웨어 1 → 미들웨어 2 → ... ] → reducer → store
                     (action을 검사, 수정, 지연, 중단; 부수 효과 수행 가능)
```

미들웨어는 `dispatch`를 감싸므로, 모든 action은 reducer에 도달하기 전에 이를 통과합니다. reducer가 금지하는 부수 효과를 위한 지정된 장소입니다.

## thunk가 해결하는 문제

```js
// reducer는 순수 → 이걸 못함. 일반 action은 그냥 객체 → 역시 못함.
async function loadUsers() {
  const users = await fetch("/api/users").then(r => r.json()); // 부수 효과
  // ...결과를 store에 dispatch해야 함
}
```

비동기 작업(fetch)을 하고 그 결과를 dispatch할 장소가 필요합니다. thunk 미들웨어는 일반 객체 대신 **함수**를 dispatch할 수 있게 해줍니다.

## thunk — dispatch를 받는 함수

```js
// "thunk"는 (dispatch, getState) => { ... } 형태의 함수로 비동기 작업을 함
function fetchUsers() {
  return async (dispatch, getState) => {
    dispatch({ type: "users/loading" });           // 1. 로딩 신호
    try {
      const users = await api.getUsers();           // 2. 비동기 부수 효과
      dispatch({ type: "users/loaded", payload: users }); // 3. 결과 dispatch
    } catch (err) {
      dispatch({ type: "users/error", payload: err.message }); // 4. 에러 처리
    }
  };
}

// thunk 미들웨어는 FUNCTION이 dispatch된 것을 보고 dispatch/getState로 호출함
store.dispatch(fetchUsers());
```

thunk는 비동기 작업을 수행하고 각 단계에서 일반 action(`loading`/`loaded`/`error`)을 dispatch합니다 — 부수 효과는 thunk 안에 두면서 reducer는 순수하게 유지합니다.

## 다른 미들웨어 용도 & 대안

```text
✓ 모든 action 로깅, 분석, 크래시 리포팅
✓ Redux Toolkit은 기본으로 thunk를 포함 + 보일러플레이트가 적은 createAsyncThunk
복잡한 비동기 흐름의 대안: redux-saga(제너레이터), redux-observable(RxJS)
```

## 왜 중요한가

미들웨어는 reducer가 할 수 없는 모든 것 — 특히 **비동기 부수 효과** — 을 Redux가 처리하는 방식이며, reducer를 예측 가능하고 테스트 가능하게 만드는 순수성을 보존합니다.

thunk는 비동기 작업(데이터 가져오기, 로딩/성공/에러 action dispatch)을 하는 표준적이고 접근하기 쉬운 방법입니다.

미들웨어 파이프라인과 thunk 패턴을 이해하는 것은 실제 Redux 앱에 필수적입니다. 거의 모든 앱이 데이터를 로드해야 하기 때문입니다. RTK의 `createAsyncThunk`는 바로 이 위에 구축됩니다.