メインコンテンツへスキップ

イミュータビリティミドルウェア

redux-immutable-state-invariantミドルウェアをRedux Toolkit用にカスタマイズしたもの。検出されたミューテーションはエラーとしてスローされます。

このミドルウェアは、configureStoreとgetDefaultMiddlewareによって既定でストアに追加されます。

このミドルウェアの動作は、getDefaultMiddlewareのimmutableCheck値としてサポートされているオプションを渡すことでカスタマイズできます。

オプション

type IsImmutableFunc = (value: any) => boolean

interface ImmutableStateInvariantMiddlewareOptions {
  /**
    Callback function to check if a value is considered to be immutable.
    This function is applied recursively to every value contained in the state.
    The default implementation will return true for primitive types 
    (like numbers, strings, booleans, null and undefined).
   */
  isImmutable?: IsImmutableFunc
  /** 
    An array of dot-separated path strings or RegExps that match named nodes from 
    the root state to ignore when checking for immutability.
    Defaults to undefined
   */
  ignoredPaths?: (string | RegExp)[]
  /** Print a warning if checks take longer than N ms. Default: 32ms */
  warnAfter?: number
}

エクスポート

createImmutableStateInvariantMiddleware

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

getDefaultMiddlewareはすでにそれを行っているので、自分で呼び出す必要はないでしょう。

例

// file: exampleSlice.ts
import { createSlice } from '@reduxjs/toolkit'

export const exampleSlice = createSlice({
  name: 'example',
  initialState: {
    user: 'will track changes',
    ignoredPath: 'single level',
    ignoredNested: {
      one: 'one',
      two: 'two',
    },
  },
  reducers: {},
})

export default exampleSlice.reducer


// file: store.ts
import {
  configureStore,
  createImmutableStateInvariantMiddleware,
  Tuple,
} from '@reduxjs/toolkit'

import exampleSliceReducer from './exampleSlice'

const immutableInvariantMiddleware = createImmutableStateInvariantMiddleware({
  ignoredPaths: ['ignoredPath', 'ignoredNested.one', 'ignoredNested.two'],
})

const store = configureStore({
  reducer: exampleSliceReducer,
  // Note that this will replace all default middleware
  middleware: () => new Tuple(immutableInvariantMiddleware),
})

getDetfaultMiddlewareを使用して、他のすべてのミドルウェアを削除せずに同じことを行います。

import { configureStore } from '@reduxjs/toolkit'

import exampleSliceReducer from './exampleSlice'

const store = configureStore({
  reducer: exampleSliceReducer,
  // This replaces the original default middleware with the customized versions
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      immutableCheck: {
        ignoredPaths: ['ignoredPath', 'ignoredNested.one', 'ignoredNested.two'],
      },
    }),
})

isImmutableDefault​

「この値はイミュータブルか」チェックの既定の実装。現在は次のように実装されています

return (
  typeof value !== 'object' || value === null || typeof value === 'undefined'
)

これは、プリミティブ型（数値、文字列、ブール値、null、未定義など）にtrueを返します。

最終更新