Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🗑 📝 Deprecate getDefaultMiddleware export #1258

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/api/configureStore.mdx
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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