REACT Redux ③ReduxのMiddlewareミドルウェア（よく使う一覧）

Reduxのミドルウェアは、アクションがリデューサーに到達する前に、アクションを拡張したり処理したりするための機能を提供します。以下は、Reduxでよく使われるミドルウェアの一覧です。

1. redux-thunk

機能: アクションクリエーター内で非同期操作を扱うことができます。関数を返すアクションクリエーターを使用し、その中で非同期操作を実行し、操作が完了した後にアクションをディスパッチできます。

インストール:

npm install redux-thunk

使用例:

import { configureStore } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk),
});

export default store;

2. redux-saga

機能: Generator 関数を使って副作用（非同期操作など）を管理します。redux-saga は、アクションをリッスンし、必要に応じて非同期操作を実行する強力な方法を提供します。

インストール:

npm install redux-saga

使用例:

import createSagaMiddleware from 'redux-saga';
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(sagaMiddleware),
});

sagaMiddleware.run(rootSaga);

export default store;

Saga 定義:

import { takeEvery, call, put } from 'redux-saga/effects';

function* fetchDataSaga() {
  try {
    const response = yield call(fetch, 'https://api.example.com/data');
    const data = yield response.json();
    yield put({ type: 'FETCH_DATA_SUCCESS', payload: data });
  } catch (error) {
    yield put({ type: 'FETCH_DATA_FAILURE', payload: error.message });
  }
}

export default function* rootSaga() {
  yield takeEvery('FETCH_DATA_REQUEST', fetchDataSaga);
}

3. redux-logger

機能: 各アクションと状態の変化をログに記録します。Redux アプリケーションのデバッグに非常に便利です。

インストール:

npm install redux-logger

使用例

import { configureStore } from '@reduxjs/toolkit';
import logger from 'redux-logger';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
});

export default store;

4. redux-promise

機能: アクション内で Promise オブジェクトを扱うことができます。このミドルウェアは Promise の成功または失敗を自動的に処理します。

インストール:

npm install redux-promise

使用例:

import { configureStore } from '@reduxjs/toolkit';
import promise from 'redux-promise';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(promise),
});

export default store;

5. redux-devtools-extension

機能: Redux DevTools 拡張と統合し、Redux ステートやアクションのリアルタイムでの表示を提供します。

インストール:

npm install redux-devtools-extension

使用例:

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = configureStore({
  reducer: rootReducer,
  devTools: composeWithDevTools(),
});

export default store;

6. redux-immutable

機能: Redux ステートツリーを不可変にし、immutable.js と組み合わせて使用します。これにより、ステートツリーが毎回不可変であることが保証されます。

インストール:

npm install redux-immutable immutable

使用例:

import { configureStore } from '@reduxjs/toolkit';
import { combineReducers } from 'redux-immutable';
import { fromJS } from 'immutable';
import rootReducer from './reducers';

const store = configureStore({
  reducer: combineReducers({
    data: rootReducer
  }),
  preloadedState: fromJS({ /* 初期状態 */ })
});

export default store;

7. redux-observable

機能: RxJS ライブラリを使って副作用（非同期操作など）を処理します。redux-observable は、Observable を使用して非同期操作を管理します。

インストール:

npm install redux-observable rxjs

使用例:

import { createEpicMiddleware } from 'redux-observable';
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';
import rootEpic from './epics';

const epicMiddleware = createEpicMiddleware();

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(epicMiddleware),
});

epicMiddleware.run(rootEpic);

export default store;

Epic 定義:

import { ofType } from 'redux-observable';
import { switchMap } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';
import { of } from 'rxjs';

const fetchDataEpic = action$ =>
  action$.pipe(
    ofType('FETCH_DATA_REQUEST'),
    switchMap(() =>
      ajax.getJSON('https://api.example.com/data').pipe(
        switchMap(response => of({ type: 'FETCH_DATA_SUCCESS', payload: response })),
        catchError(error => of({ type: 'FETCH_DATA_FAILURE', payload: error.message }))
      )
    )
  );

export default fetchDataEpic;

redux-thunk: 非同期操作を扱うためのミドルウェア。アクションクリエーター内で関数を返す。
redux-saga: Generator 関数を使って副作用を管理。
redux-logger: アクションや状態の変化をログに記録し、デバッグを支援。
redux-promise: アクション内の Promise オブジェクトを自動的に処理。
redux-devtools-extension: Redux DevTools 拡張と統合し、状態やアクションのリアルタイム表示を提供。
redux-immutable: Redux ステートツリーを不可変にする。
redux-observable: RxJS を使用して副作用を処理。