Reduxのミドルウェアとは何か、そしてthunkはどのように機能するのか？

Question

Accepted Answer

**ミドルウェア** はアクションのdispatchとアクションがreducerに到達する間に位置し、アクションをインターセプトして **side effect** (非同期APIコール、ログ) を処理できます — reducerはそれらが純粋である必要があるためこれができません。**Thunk** は最も一般的なミドルウェアで、非同期ロジックを可能にします。

## ミドルウェアが適用される場所

```text
dispatch(action) → [ middleware 1 → middleware 2 → ... ] → reducer → store
                     (can inspect, modify, delay, or stop actions; do side effects)
```

ミドルウェアは `dispatch` をラップするため、すべてのアクションはreducerに到達する前にそれを通過します。これはreducerが禁止するside effectの指定された場所です。

## thunkが解決する問題

```js
// reducers are pure → can't do this. Plain actions are just objects → can't either.
async function loadUsers() {
  const users = await fetch("/api/users").then(r => r.json()); // a SIDE EFFECT
  // ...need to dispatch the result into the store
}
```

非同期作業 (fetch) を行ってからその結果をdispatchする場所が必要です。Thunkミドルウェアはプレーンなオブジェクトの代わりに **関数** をdispatchすることを可能にします。

## thunk — dispatchを取得する関数

```js
// a "thunk" is a function (dispatch, getState) => { ... } doing async work
function fetchUsers() {
  return async (dispatch, getState) => {
    dispatch({ type: "users/loading" });           // 1. signal loading
    try {
      const users = await api.getUsers();           // 2. async side effect
      dispatch({ type: "users/loaded", payload: users }); // 3. dispatch the result
    } catch (err) {
      dispatch({ type: "users/error", payload: err.message }); // 4. handle errors
    }
  };
}

// thunk middleware sees a FUNCTION was dispatched and calls it with dispatch/getState
store.dispatch(fetchUsers());
```

thunkは非同期作業を実行し、各段階でプレーンなアクション (`loading`/`loaded`/`error`) をdispatchします — reducerを純粋に保ちながらside effectはthunkに存在します。

## その他のミドルウェアの用途と代替案

```text
✓ Logging every action, analytics, crash reporting
✓ Redux Toolkit includes thunk by default + createAsyncThunk for less boilerplate
Alternatives for complex async flows: redux-saga (generators), redux-observable (RxJS)
```

## なぜ重要なのか

ミドルウェアはReducerができないすべてのもの — 特に **非同期side effect** — を処理する方法であり、reducerを予測可能でテスト可能にする純粋性を保持します。

Thunkは非同期を行うための標準的でアプローチしやすい方法です (データの取得、loading/success/errorアクションのdispatch)。

ミドルウェアパイプラインとthunkパターンを理解することは、実際のReduxアプリケーション — ほぼすべてのアプリケーションがデータをロードする必要があるため — に不可欠です。RTKの `createAsyncThunk` はまさにこれに基づいています。