getdefaultenhancers

20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

getDefaultEnhancers returns default enhancer array

getDefaultEnhancers returns an array containing the default list of enhancers added to the Redux store. The default enhancers array always contains applyMiddleware (created based on configureStore's middleware field) and autoBatchEnhancer (for batching low priority action updates).

getDefaultEnhancers usage with custom enhancers

When you supply the enhancer option to configureStore, you are responsible for defining all enhancers you want added to the store, excluding the devtools enhancer. configureStore will not add any extra enhancers beyond what you listed, including the middleware enhancer. getDefaultEnhancers is useful to add custom enhancers while still getting the default enhancers added.

getDefaultEnhancers API signature

getDefaultEnhancers has the signature: function getDefaultEnhancers<M extends Middlewares<any>>(options: GetDefaultEnhancersOptions = {}): EnhancerArray<[StoreEnhancer<{ dispatch: ExtractDispatchExtensions<M> }>]>

GetDefaultEnhancersOptions interface

GetDefaultEnhancersOptions has the following field: autoBatch (optional, type: boolean | AutoBatchOptions). When autoBatch is false, it excludes the autoBatchEnhancer. When passed an AutoBatchOptions object, it customizes the autoBatchEnhancer with those options.

getDefaultEnhancers example with offline enhancer

Example: const store = configureStore({ reducer: rootReducer, enhancers: (getDefaultEnhancers) => getDefaultEnhancers().concat(offline(offlineConfig)), }); This adds all default middleware and enhancers plus the offline enhancer.

getDefaultEnhancers example customizing autoBatch

Example: const store = configureStore({ reducer: rootReducer, enhancers: (getDefaultEnhancers) => getDefaultEnhancers({ autoBatch: { type: 'tick' }, }), }); This customizes the autoBatchEnhancer with specific options while keeping other default enhancers.

getDefaultMiddleware returns default middleware array

getDefaultMiddleware returns an array containing the default list of middleware that configureStore would add automatically.

getDefaultMiddleware usage with configureStore

When you provide the middleware option to configureStore, you become responsible for defining all middleware you want added. To keep the default middleware while adding custom middleware, use getDefaultMiddleware to get the defaults and then concatenate custom middleware to it.

getDefaultMiddleware with .concat() and .prepend() methods

The returned Tuple from getDefaultMiddleware has chainable .concat(...) and .prepend(...) methods. These should be preferred over the array spread operator because the spread operator can lose valuable TypeScript type information in some circumstances.

Default development middleware list

In development builds, getDefaultMiddleware returns: [actionCreatorInvariant, immutableStateInvariant, thunk, serializableStateInvariant]. These include three development-only checks for immutability, serializability, and action creator mistakes, plus redux-thunk for side effects.

Default production middleware list

In production builds, getDefaultMiddleware returns: [thunk]. Only redux-thunk is included for production.

getDefaultMiddleware options for excluding middleware

Each middleware in getDefaultMiddleware can be excluded from the result array by passing false for its corresponding field in the options object.

getDefaultMiddleware options for customizing middleware

Each middleware in getDefaultMiddleware can have its options customized by passing the matching options object for its corresponding field in the options object.

getDefaultMiddleware API signature

getDefaultMiddleware<S = any>(options: GetDefaultMiddlewareOptions = {}): Middleware<{}, S>[]. It takes an optional GetDefaultMiddlewareOptions object and returns an array of Middleware.

GetDefaultMiddlewareOptions interface

GetDefaultMiddlewareOptions has four optional fields: thunk (boolean | ThunkOptions), immutableCheck (boolean | ImmutableStateInvariantMiddlewareOptions), serializableCheck (boolean | SerializableStateInvariantMiddlewareOptions), actionCreatorCheck (boolean | ActionCreatorInvariantMiddlewareOptions). Each can be passed false to exclude that middleware or an options object to customize it.

ThunkOptions interface

ThunkOptions has one field: extraArgument of any type. This is used to pass custom values to thunk action creators.

getDefaultMiddleware example with custom thunk extraArgument

Example showing getDefaultMiddleware customization: configureStore({ reducer: rootReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ thunk: { extraArgument: myCustomApiService }, serializableCheck: false, }), }). This excludes the serializable state check and passes a custom API service to thunk middleware.

Immutability check middleware in development

The immutability check middleware is added only in development builds. It deeply compares state values for mutations, detecting mutations in reducers during dispatch and mutations between dispatches. When a mutation is detected, it throws an error indicating the key path where the mutation occurred. It is forked from redux-immutable-state-invariant.

Serializability check middleware in development

The serializability check middleware is added only in development builds. It deeply checks the state tree and actions for non-serializable values such as functions, Promises, Symbols, and other non-plain-JS-data values. When a non-serializable value is detected, a console error is printed with the key path.

Action creator check middleware in development

The action creator check middleware is added only in development builds. It identifies when an action creator was mistakenly dispatched without being called and warns to console with the action type.

Give your agent this brain