アクションクリエイターのミドルウェア

ディスパッチされる前に呼び出されるのではなく、アクションクリエイターが誤ってディスパッチされたかどうかを検出するカスタムミドルウェア。

一般的な間違いはdispatch(actionCreator)をdispatch(actionCreator())の代わりに呼び出すことです。アクションクリエイターは静的なtypeプロパティを持つので、これが「機能する」傾向がありますが、予期しない動作につながる可能性があります。

オプション

export interface ActionCreatorInvariantMiddlewareOptions {
  /**
   * The function to identify whether a value is an action creator.
   * The default checks for a function with a static type property and match method.
   */
  isActionCreator?: (action: unknown) => action is Function & { type?: unknown }
}

エクスポート

createActionCreatorInvariantMiddleware

指定したオプションを使用して、アクションクリエイターチェックミドルウェアのインスタンスを作成します。

getDefaultMiddlewareはすでにそうしているので、自分で呼び出す必要はほとんどありません。例

TypeScript

import {
  configureStore,
  createActionCreatorInvariantMiddleware,
  Tuple,
} from '@reduxjs/toolkit'
import reducer from './reducer'

// Augment middleware to consider all functions with a static type property to be action creators
const isActionCreator = (
  action: unknown
): action is Function & { type: unknown } =>
  typeof action === 'function' && 'type' in action

const actionCreatorMiddleware = createActionCreatorInvariantMiddleware({
  isActionCreator,
})

const store = configureStore({
  reducer,
  middleware: () => new Tuple(actionCreatorMiddleware),
})

JavaScript

import {
  configureStore,
  createActionCreatorInvariantMiddleware,
  Tuple,
} from '@reduxjs/toolkit'
import reducer from './reducer'

// Augment middleware to consider all functions with a static type property to be action creators
const isActionCreator = (action) =>
  typeof action === 'function' && 'type' in action

const actionCreatorMiddleware = createActionCreatorInvariantMiddleware({
  isActionCreator,
})

const store = configureStore({
  reducer,
  middleware: () => new Tuple(actionCreatorMiddleware),
})