From fd2ddfcfd6d8f78011d860940e1fb441cfbdcd35 Mon Sep 17 00:00:00 2001 From: Josh Fraser Date: Wed, 7 Jul 2021 19:28:15 +1000 Subject: [PATCH] =?UTF-8?q?=F0=9F=97=91=20=F0=9F=93=9D=20Deprecate=20getDe?= =?UTF-8?q?faultMiddleware=20export?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- docs/api/configureStore.mdx | 6 +-- docs/api/getDefaultMiddleware.mdx | 23 ----------- docs/rtk-query/usage/automated-refetching.mdx | 2 +- docs/usage/usage-guide.md | 38 ++++++++++--------- docs/usage/usage-with-typescript.md | 2 - packages/toolkit/src/getDefaultMiddleware.ts | 3 ++ 6 files changed, 28 insertions(+), 46 deletions(-) diff --git a/docs/api/configureStore.mdx b/docs/api/configureStore.mdx index fb0e40a70..57ed32461 100644 --- a/docs/api/configureStore.mdx +++ b/docs/api/configureStore.mdx @@ -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). diff --git a/docs/api/getDefaultMiddleware.mdx b/docs/api/getDefaultMiddleware.mdx index 9a3ade5ff..85d6db620 100644 --- a/docs/api/getDefaultMiddleware.mdx +++ b/docs/api/getDefaultMiddleware.mdx @@ -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() -``` - -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 diff --git a/docs/rtk-query/usage/automated-refetching.mdx b/docs/rtk-query/usage/automated-refetching.mdx index 2139eb982..dc7f0ac25 100644 --- a/docs/rtk-query/usage/automated-refetching.mdx +++ b/docs/rtk-query/usage/automated-refetching.mdx @@ -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: - +
diff --git a/docs/usage/usage-guide.md b/docs/usage/usage-guide.md index ab9cfcb78..6fe298d86 100644 --- a/docs/usage/usage-guide.md +++ b/docs/usage/usage-guide.md @@ -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 @@ -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'], + }, + }), }) ``` @@ -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, @@ -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) diff --git a/docs/usage/usage-with-typescript.md b/docs/usage/usage-with-typescript.md index d8e0559c2..37ee78d7e 100644 --- a/docs/usage/usage-with-typescript.md +++ b/docs/usage/usage-with-typescript.md @@ -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' diff --git a/packages/toolkit/src/getDefaultMiddleware.ts b/packages/toolkit/src/getDefaultMiddleware.ts index 0d6d0a71e..40a442ea5 100644 --- a/packages/toolkit/src/getDefaultMiddleware.ts +++ b/packages/toolkit/src/getDefaultMiddleware.ts @@ -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,