getDefaultMiddleware

デフォルトのミドルウェアのリストを含む配列を返します。

意図された使用法

デフォルトでは、configureStoreはReduxストアの設定にいくつかのミドルウェアを自動的に追加します。

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

// Store has middleware added, because the middleware list was not customized

ミドルウェアのリストをカスタマイズしたい場合は、ミドルウェア関数の配列をconfigureStoreに渡すことができます。

const store = configureStore({
  reducer: rootReducer,
  middleware: () => new Tuple(thunk, logger),
})

// Store specifically has the thunk and logger middleware applied

ただし、middlewareオプションを指定する場合は、ストアに追加したいすべてのミドルウェアを定義する必要があります。configureStoreは、リストしたものを超えて余分なミドルウェアを追加しません。

getDefaultMiddlewareは、カスタムミドルウェアを追加したいが、デフォルトのミドルウェアも追加したい場合に役立ちます。

import { configureStore } from '@reduxjs/toolkit'

import logger from 'redux-logger'

import rootReducer from './reducer'

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

// Store has all of the default middleware added, _plus_ the logger middleware

配列の展開演算子を使用する代わりに、返されたTupleのチェーン可能な.concat(...)および.prepend(...)メソッドを使用することをお勧めします。後者は、状況によっては貴重なTS型情報を失う可能性があります。

含まれるデフォルトミドルウェア

開発

Redux Toolkitの目標の1つは、偏りのないデフォルトを提供し、一般的な間違いを防ぐことです。その一環として、getDefaultMiddlewareには、3つの一般的な問題に対してランタイムチェックを提供するアプリの開発ビルドでのみ追加されるいくつかのミドルウェアが含まれています。

• 不変性チェックミドルウェア：状態の値のミューテーションを深く比較します。ディスパッチ中のreducerでのミューテーション、およびディスパッチ間（コンポーネントやセレクターなど）で発生するミューテーションを検出できます。ミューテーションが検出されると、エラーがスローされ、状態ツリー内でミューテーションされた値が検出されたキーパスが示されます。（redux-immutable-state-invariantからフォークされています。）

• シリアライズ可能性チェックミドルウェア：Redux Toolkitでの使用のために特別に作成されたカスタムミドルウェア。概念的にはimmutable-state-invariantに似ていますが、状態ツリーとアクションを深くチェックして、関数、Promise、Symbol、その他の非プレーンJSデータ値などの非シリアライズ可能な値をチェックします。非シリアライズ可能な値が検出されると、コンソールエラーが、非シリアライズ可能な値が検出されたキーパスとともに印刷されます。

• アクションクリエーターチェックミドルウェア：Redux Toolkitでの使用のために特別に作成された別のカスタムミドルウェア。誤って呼び出されずにディスパッチされたアクションクリエーターを特定し、アクションタイプをコンソールに警告します。

これらの開発ツールミドルウェアに加えて、Reduxの基本的な推奨副作用ミドルウェアであるため、デフォルトでredux-thunkも追加します。

現在、戻り値は

const middleware = [
  actionCreatorInvariant,
  immutableStateInvariant,
  thunk,
  serializableStateInvariant,
]

本番環境

現在、戻り値は

const middleware = [thunk]

含まれるミドルウェアのカスタマイズ

getDefaultMiddlewareは、各ミドルウェアを2つの方法でカスタマイズできるオプションオブジェクトを受け入れます。

• 対応するフィールドにfalseを渡すことで、各ミドルウェアを結果の配列から除外できます。
• 対応するフィールドに対応するオプションオブジェクトを渡すことで、各ミドルウェアのオプションをカスタマイズできます。

この例は、シリアライズ可能な状態チェックミドルウェアを除外し、thunkミドルウェアの「追加引数」に特定の値を渡す方法を示しています。

TypeScript

import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './reducer'
import { myCustomApiService } from './api'

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      thunk: {
        extraArgument: myCustomApiService,
      },
      serializableCheck: false,
    }),
})

JavaScript

import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './reducer'
import { myCustomApiService } from './api'

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      thunk: {
        extraArgument: myCustomApiService,
      },
      serializableCheck: false,
    }),
})

APIリファレンス

interface ThunkOptions<E = any> {
  extraArgument: E
}

interface ImmutableStateInvariantMiddlewareOptions {
  // See "Immutability Middleware" page for definition
}

interface SerializableStateInvariantMiddlewareOptions {
  // See "Serializability Middleware" page for definition
}

interface ActionCreatorInvariantMiddlewareOptions {
  // See "Action Creator Middleware" page for definition
}

interface GetDefaultMiddlewareOptions {
  thunk?: boolean | ThunkOptions
  immutableCheck?: boolean | ImmutableStateInvariantMiddlewareOptions
  serializableCheck?: boolean | SerializableStateInvariantMiddlewareOptions
  actionCreatorCheck?: boolean | ActionCreatorInvariantMiddlewareOptions
}

function getDefaultMiddleware<S = any>(
  options: GetDefaultMiddlewareOptions = {},
): Middleware<{}, S>[]