不可變性中間件

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 已經這麼做了。

範例

TypeScript

// 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),
})

JavaScript

// file: exampleSlice.js
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.js
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 執行相同操作，但不會移除所有其他中間件

TypeScript

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'],
      },
    }),
})

JavaScript

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 和 undefined）傳回 true