Skip to content

Commit

Permalink
馃棏 馃摑 Deprecate getDefaultMiddleware export
Browse files Browse the repository at this point in the history
- Mark getDefaultMiddleware as deprecated
- Docs: replace usage of gDM imports with callback notation
- Docs: remove references to gDM export
- Fix console warning on Automated Refetching page
  • Loading branch information
Shrugsy committed Jul 7, 2021
1 parent bbdac06 commit fd2ddfc
Show file tree
Hide file tree
Showing 6 changed files with 28 additions and 46 deletions.
6 changes: 3 additions & 3 deletions docs/api/configureStore.mdx
Expand Up @@ -89,9 +89,9 @@ want added to the store. `configureStore` will automatically pass those to `appl
If not provided, `configureStore` will call `getDefaultMiddleware` and use the
array of middleware functions it returns.

Alternately, you may pass a callback function that will receive `getDefaultMiddleware` as its argument,
and should return a middleware array. This lets you skip importing `getDefaultMiddleware` separately. If using TypeScript, prefer using this syntax, as we provide a more strongly-typed version of `getDefaultMiddleware` that will correctly
retain the types of the provided middleware when constructing the store.
Where you wish to add onto or customize the default middleware,
you may pass a callback function that will receive `getDefaultMiddleware` as its argument,
and should return a middleware array.

For more details on how the `middleware` parameter works and the list of middleware that are added by default, see the
[`getDefaultMiddleware` docs page](./getDefaultMiddleware.mdx).
Expand Down
23 changes: 0 additions & 23 deletions docs/api/getDefaultMiddleware.mdx
Expand Up @@ -64,29 +64,6 @@ const store = configureStore({

It is preferrable to use the chainable `.concat(...)` and `.prepend(...)` methods of the returned `MiddlewareArray` instead of the array spread operator, as the latter can lose valuable type information under some circumstances.

## getDefaultMiddleware import

While the callback notation with `configureStore` shown in the last example is the recommended way of using `getDefaultMiddleware`, it can also be imported to be used independently from 'configureStore':

```ts
// file: reducer.ts noEmit

export default function rootReducer(state = {}, action: any) {
return state
}

// file: store.ts
import { getDefaultMiddleware } from '@reduxjs/toolkit'

interface State {
// ...
}

const middlewares = getDefaultMiddleware<State>()
```

The benefit of using the callback notation is that the `State` type is already pre-bound, which might prevent circular type references when trying to specify generics by hand.

## Included Default Middleware

### Development
Expand Down
2 changes: 1 addition & 1 deletion docs/rtk-query/usage/automated-refetching.mdx
Expand Up @@ -388,7 +388,7 @@ In order to provide stronger control over invalidating the appropriate data, you
The matrix below shows examples of which invalidated tags will affect and invalidate which provided tags:
<table class="checkbox-table">
<table className="checkbox-table">
<thead>
<tr>
<th className="diagonal-cell">
Expand Down
38 changes: 21 additions & 17 deletions docs/usage/usage-guide.md
Expand Up @@ -139,7 +139,9 @@ export default function configureAppStore(preloadedState) {
}
```

If you provide the `middleware` argument, `configureStore` will only use whatever middleware you've listed. If you want to have some custom middleware _and_ the defaults all together, you can call [`getDefaultMiddleware`](../api/getDefaultMiddleware.mdx) and include the results in the `middleware` array you provide.
If you provide the `middleware` argument, `configureStore` will only use whatever middleware you've listed.
If you want to have some custom middleware _and_ the defaults all together, you can use the callback notation,
call [`getDefaultMiddleware`](../api/getDefaultMiddleware.mdx) and include the results in the `middleware` array you return.

## Writing Reducers

Expand Down Expand Up @@ -1033,16 +1035,17 @@ The [serializability dev check middleware](../api/serializabilityMiddleware.mdx)
```js
configureStore({
//...
middleware: getDefaultMiddleware({
serializableCheck: {
// Ignore these action types
ignoredActions: ['your/action/type'],
// Ignore these field paths in all actions
ignoredActionPaths: ['meta.arg', 'payload.timestamp'],
// Ignore these paths in the state
ignoredPaths: ['items.dates'],
},
}),
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
// Ignore these action types
ignoredActions: ['your/action/type'],
// Ignore these field paths in all actions
ignoredActionPaths: ['meta.arg', 'payload.timestamp'],
// Ignore these paths in the state
ignoredPaths: ['items.dates'],
},
}),
})
```

Expand All @@ -1051,7 +1054,7 @@ configureStore({
If using Redux-Persist, you should specifically ignore all the action types it dispatches:

```jsx
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import { configureStore } from '@reduxjs/toolkit'
import {
persistStore,
persistReducer,
Expand All @@ -1078,11 +1081,12 @@ const persistedReducer = persistReducer(persistConfig, rootReducer)

const store = configureStore({
reducer: persistedReducer,
middleware: getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
},
}),
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
},
}),
})

let persistor = persistStore(store)
Expand Down
2 changes: 0 additions & 2 deletions docs/usage/usage-with-typescript.md
Expand Up @@ -89,8 +89,6 @@ The type of the `dispatch` function type will be directly inferred from the `mid

As TypeScript often widens array types when combining arrays using the spread operator, we suggest using the `.concat(...)` and `.prepend(...)` methods of the `MiddlewareArray` returned by `getDefaultMiddleware()`.

Also, we suggest using the callback notation for the `middleware` option to get a correctly pre-typed version of `getDefaultMiddleware` that does not require you to specify any generics by hand.

```ts
import { configureStore } from '@reduxjs/toolkit'
import additionalMiddleware from 'additional-middleware'
Expand Down
3 changes: 3 additions & 0 deletions packages/toolkit/src/getDefaultMiddleware.ts
Expand Up @@ -63,6 +63,9 @@ export function curryGetDefaultMiddleware<
* @return The default middleware used by `configureStore()`.
*
* @public
*
* @deprecated Prefer to use the callback notation for the `middleware` option in `configureStore`
* to access a pre-typed `getDefaultMiddleware` instead.
*/
export function getDefaultMiddleware<
S = any,
Expand Down

0 comments on commit fd2ddfc

Please sign in to comment.