Zum Inhalt springen
verdict:

Redux Toolkit 2.0.0

featured

note: die Zusammenfassung und die Release Notes sind auf Englisch

warning: Eingriff nötig

8 Breaking Changes5 Kernpunkte

Major release with breaking changes: object reducer syntax removed, configureStore middleware must be a callback.

Zusammenfassung · nur aus den Release Notes · claude-haiku-5-5 · prompt v7

breaking changesalle zitiert, jeder mit einer Lösung

breaking[1]: The object form of createReducer and createSlice.extraReducers is removed.

We have removed the "object" form for both createReducer and createSlice.extraReducers in RTK 2.0, as the builder callback form is effectively the same number of lines of code, and works much better with TypeScript.

help: Convert object lookups to the builder callback form, for example with the createReducerBuilder or createSliceBuilder codemods from @reduxjs/rtk-codemods.

breaking[2]: configureStore middleware option only accepts a callback, not a direct array.

As a result, we've now made the middleware only accept the callback form. _If_ for some reason you still want to replace _all_ of the built-in middleware, do so by returning an array from the callback:

help: Use middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(myMiddleware) instead of passing an array.

breaking[3]: configureStore enhancers option must be a callback.

Similarly to configureStore.middleware, the enhancers field must also be a callback, for the same reasons.

help: Return getDefaultEnhancers().concat(myEnhancer) from the enhancers callback so the middleware enhancer is kept.

breaking[4]: The getType export is removed, and the standalone getDefaultMiddleware is removed.

We have also removed the getType export, which was used to extract a type string from action creators made with createAction. Instead, use the static property actionCreator.type.

help: Use the static actionCreator.type property instead of getType, and use the getDefaultMiddleware passed to the middleware callback.

breaking[5]: In TypeScript, custom middleware or enhancer arrays must be wrapped in Tuple.

We've renamed that type to Tuple, and configureStore's TS types now require that you _must_ use Tuple if you want to pass your own array of middleware:

help: Wrap your own middleware or enhancers in new Tuple(...), imported from @reduxjs/toolkit.

breaking[6]: reactHooksModule now takes useDispatch, useSelector and useStore together under a hooks key.

The module has now moved all three of these under the same configuration key, and will check that all three are provided if the key is present.

help: Move all three hooks under a single hooks key, and provide all three whenever the key is present.

breaking[7]: The Dictionary type is removed, and .entities lookups are typed as Record<Id, T>, so lookups are assumed to exist.

The .entities lookup table is now defined to use a standard TS Record<Id, MyEntityType>, which assumes that each item lookup exists by default. Previously, it used a Dictionary<MyEntityType> type, which assumed the result was MyEntityType | undefined. The Dictionary type has been removed.

help: Enable TypeScript's noUncheckedIndexedAccess option if you want lookups to be typed as possibly undefined.

breaking[8]: The UMD build artifacts are no longer included in the published package.

We've dropped those build artifacts from the published package, on the grounds that the use cases seem pretty rare today.

help: For script tag or no-bundler use, load redux-toolkit.browser.mjs from a CDN such as Unpkg instead.

Kernpunkte

release-notesgithub.com/reduxjs/redux-toolkit · 657 Zeilen
  1. This **major release** :
  2. - Removes the deprecated object syntax from `createSlice` and `createReducer`
  3. - Removes other deprecated options
  4. - Updates the `middleware` and `enhancers` options of `configureStore` to require callbacks
  5. - Updates the packaging for better ESM/CJS compatibility and modernizes the build output
  6. - Includes all changes to [Redux core 5.0](https://github.com/reduxjs/redux/releases/tag/v5.0.0), [Reselect 5.0](https://github.com/reduxjs/reselect/releases/tag/v5.0.0), and [Redux Thunk 3.0](https://github.com/reduxjs/redux-thunk/releases/tag/v3.0.0)
  7. - Updates RTKQ default subscription behavior
  8. - Adds a new `combineSlices` method with support for lazy-loading slice reducers
  9. - Adds a new "dynamic middleware" middleware with support for adding middleware at runtime
  10. - Adds a new callback syntax to `createSlice.reducers`, with optional support for defining thunks inside of `createSlice`
  11. - Adds the `autoBatchEnhancer` to `configureStore` by default
  12. - Has many additional TS tweaks and improvements
  13. This release has **breaking changes**. (Note: v2.0.1 was released with a couple hotfixes for Reselect and Redux Thunk right as this was being finalized.)
  14. This release is part of a wave of major versions of all the Redux packages: **Redux Toolkit 2.0, Redux core 5.0, React-Redux 9.0, Reselect 5.0, and Redux Thunk 3.0**.
  15. For full details on all of the breaking changes and other significant changes to all of those packages, see the **["Migrating to RTK 2.0 and Redux 5.0" migration guide](https://redux.js.org/usage/migrations/migrating-rtk-2)** in the Redux docs.
  16. > [!NOTE]
  17. > The Redux core, Reselect, and Redux Thunk packages are included as part of Redux Toolkit, and RTK users do not need to manually upgrade them - you'll get them as part of the upgrade to RTK 2.0. (If you're not using Redux Toolkit yet, [**please start migrating your existing legacy Redux code to use Redux Toolkit today!**](https://redux.js.org/usage/migrating-to-modern-redux))
  18. ```bash
  19. # RTK
  20. npm install @reduxjs/toolkit
  21. yarn add @reduxjs/toolkit
  22. ```
  23. ## Changelog
  24. ### Object syntax for `createSlice.extraReducers` and `createReducer` removed
  25. RTK's `createReducer` API was originally designed to accept a lookup table of action type strings to case reducers, like `{ "ADD_TODO": (state, action) => {} }`. We later added the "builder callback" form to allow more flexibility in adding "matchers" and a default handler, and did the same for `createSlice.extraReducers`.
  26. We have removed the "object" form for both `createReducer` and `createSlice.extraReducers` in RTK 2.0, as the builder callback form is effectively the same number of lines of code, and works much better with TypeScript.
  27. As an example, this:
  28. ```ts
  29. const todoAdded = createAction('todos/todoAdded')
  30. createReducer(initialState, {
  31. [todoAdded]: (state, action) => {},
  32. })
  33. createSlice({
  34. name,
  35. initialState,
  36. reducers: {
  37. /* case reducers here */
  38. },
  39. extraReducers: {
  40. [todoAdded]: (state, action) => {},
  41. },
  42. })
  43. ```
  44. should be migrated to:
  45. ```ts
  46. createReducer(initialState, (builder) => {
  47. builder.addCase(todoAdded, (state, action) => {})
  48. })
  49. createSlice({
  50. name,
  51. initialState,
  52. reducers: {
  53. /* case reducers here */
  54. },
  55. extraReducers: (builder) => {
  56. builder.addCase(todoAdded, (state, action) => {})
  57. },
  58. })
  59. ```
  60. ##### Codemods
  61. To simplify upgrading codebases, we've published a set of codemods that will automatically transform the deprecated "object" syntax into the equivalent "builder" syntax.
  62. The codemods package is available on NPM as [`@reduxjs/rtk-codemods`](https://www.npmjs.com/package/@reduxjs/rtk-codemods). More details are available [here](../api/codemods).
  63. To run the codemods against your codebase, run `npx @reduxjs/rtk-codemods <TRANSFORM NAME> path/of/files/ or/some**/*glob.js.`
  64. Examples:
  65. ```sh
  66. npx @reduxjs/rtk-codemods createReducerBuilder ./src
  67. npx @reduxjs/rtk-codemods createSliceBuilder ./packages/my-app/**/*.ts
  68. ```
  69. We also recommend re-running Prettier on the codebase before committing the changes.
  70. These codemods should work, but we would greatly appreciate feedback from more real-world codebases!
  71. ### `configureStore` Options Changes
  72. #### `configureStore.middleware` must be a callback
  73. Since the beginning, `configureStore` has accepted a direct array value as the `middleware` option. However, providing an array directly prevents `configureStore` from calling `getDefaultMiddleware()`. So, `middleware: [myMiddleware]` means there is no thunk middleware added (or any of the dev-mode checks).
  74. This is a footgun, and we've had numerous users accidentally do this and cause their apps to fail because the default middleware never got configured.
  75. As a result, we've now made the `middleware` only accept the callback form. _If_ for some reason you still want to replace _all_ of the built-in middleware, do so by returning an array from the callback:
  76. ```ts
  77. const store = configureStore({
  78. reducer,
  79. middleware: (getDefaultMiddleware) => {
  80. // WARNING: this means that _none_ of the default middleware are added!
  81. return [myMiddleware]
  82. // or for TS users, use:
  83. // return new Tuple(myMiddleware)
  84. },
  85. })
  86. ```
  87. But note that **we consistently recommend not replacing the default middleware entirely**, and that you should use `return getDefaultMiddleware().concat(myMiddleware)`.
  88. #### `configureStore.enhancers` must be a callback
  89. Similarly to `configureStore.middleware`, the `enhancers` field must also be a callback, for the same reasons.
  90. The callback will receive a `getDefaultEnhancers` function that can be used to customise the batching enhancer [that's now included by default](#configurestore-adds-autobatchenhancer-by-default).
  91. For example:
  92. ```ts
  93. const store = configureStore({
  94. reducer,
  95. enhancers: (getDefaultEnhancers) => {
  96. return getDefaultEnhancers({
  97. autoBatch: { type: 'tick' },
  98. }).concat(myEnhancer)
  99. },
  100. })
  101. ```
  102. It's important to note that the result of `getDefaultEnhancers` will **also** contain the middleware enhancer created with any configured/default middleware. To help prevent mistakes, `configureStore` will log an error to console if middleware was provided and the middleware enhancer wasn't included in the callback result.
  103. ```ts
  104. const store = configureStore({
  105. reducer,
  106. enhancers: (getDefaultEnhancers) => {
  107. return [myEnhancer] // we've lost the middleware here
  108. // instead:
  109. return getDefaultEnhancers().concat(myEnhancer)
  110. },
  111. })
  112. ```
  113. Also, note that **if you supply the `enhancers` field, it _must_ come _after_ the `middleware` field in order for TS inference to work properly**.
  114. #### Standalone `getDefaultMiddleware` and `getType` removed
  115. The standalone version of `getDefaultMiddleware` has been deprecated since v1.6.1, and has now been removed. Use the function passed to the `middleware` callback instead, which has the correct types.
  116. We have also removed the `getType` export, which was used to extract a type string from action creators made with `createAction`. Instead, use the static property `actionCreator.type`.
  117. ### RTK Query behaviour changes
  118. We've had a number of reports where RTK Query had issues around usage of `dispatch(endpoint.initiate(arg, {subscription: false}))`. There were also reports that multiple triggered lazy queries were resolving the promises at the wrong time. Both of these had the same underlying issue, which was that RTKQ wasn't tracking cache entries in these cases (intentionally). We've reworked the logic to always track cache entries (and remove them as needed), which should resolve those behavior issues.
  119. We also have had issues raised about trying to run multiple mutations in a row and how tag invalidation behaves. RTKQ now has internal logic to delay tag invalidation briefly, to allow multiple invalidations to get handled together. This is controlled by a new `invalidationBehavior: 'immediate' | 'delayed'` flag on `createApi`. The new default behavior is `'delayed'`. Set it to `'immediate'` to revert to the behavior in RTK 1.9.
  120. In RTK 1.9, we reworked RTK Query's internals to keep most of the subscription status inside the RTKQ middleware. The values are still synced to the Redux store state, but this is primarily for display by the Redux DevTools "RTK Query" panel. Related to the cache entry changes above, we've optimized how often those values get synced to the Redux state for perf.
  121. ### ESM/CJS Package Compatibility
  122. The biggest theme of the Redux v5 and RTK 2.0 releases is trying to get "true" ESM package publishing compatibility in place, while still supporting CJS in the published package.
  123. **The primary build artifact is now an ESM file, `dist/redux-toolkit.modern.mjs`**. Most build tools should pick this up. There's also a CJS artifact, and a second copy of the ESM file named `redux-toolkit.legacy-esm.js` to support Webpack 4 (which does not recognize the `exports` field in `package.json`). Additionally, all of the build artifacts now live under `./dist/` in the published package.
  124. #### Modernized Build Output
  125. We now publish modern JS syntax targeting ES2020, including optional chaining, object spread, and other modern syntax. If you need to target older browsers, please transpile the packages yourself (or use the `legacy-esm` build artifact for ES2017).
  126. #### Build Tooling
  127. We're now building the package using https://github.com/egoist/tsup. We also now include sourcemaps for the ESM and CJS artifacts.
  128. #### Dropping UMD Builds
  129. Redux has always shipped with UMD build artifacts. These are primarily meant for direct import as script tags, such as in a CodePen or a no-bundler build environment.
  130. We've dropped those build artifacts from the published package, on the grounds that the use cases seem pretty rare today.
  131. There's now a `redux-toolkit.browser.mjs` file in the package that can be loaded from a CDN like Unpkg.
  132. If you have strong use cases for us continuing to include UMD build artifacts, please let us know!
  133. ### Dependency Updates
  134. #### Redux Libraries
  135. RTK now depends on **[Redux core 5.0](https://github.com/reduxjs/redux/releases/tag/v5.0.0), [Reselect 5.0](https://github.com/reduxjs/reselect/releases/tag/v5.0.0), and [Redux Thunk 3.0](https://github.com/reduxjs/redux-thunk/releases/tag/v3.0.0)**. See the linked release notes for those libraries, as **each of them has additional breaking changes**. The ["Migrating to RTK 2.0 and Redux 5.0" docs page](https://redux.js.org/usage/migrations/migrating-rtk-2) also covers the combined changes in one page
  136. #### Immer 10
  137. RTK now also depends on [Immer 10.0](https://github.com/immerjs/immer/releases/tag/v10.0.0), which has several major improvements and updates:
  138. - Much faster update perf
  139. - Much smaller bundle size
  140. - Better ESM/CJS package formatting
  141. - No default export
  142. - No ES5 fallback
  143. We've also removed the prior call to automatically enable the Immer ES5 fallback mode any time RTK was loaded.
  144. ### Other Changes
  145. #### Bundle Size Optimizations
  146. Redux 4.1.0 optimized its bundle size by [extracting error message strings out of production builds](https://github.com/reduxjs/redux/releases/tag/v4.1.0), based on React's approach. We've applied the same technique to RTK. This saves about 1000 bytes from prod bundles (actual benefits will depend on which imports are being used).
  147. We also noted that [ESBuild does not deduplicate imports when it bundles source files](https://github.com/evanw/esbuild/issues/475), and this was causing RTK Query's bundle to contain a dozen references to `import { } from "@reduxjs/toolkit"`, including some of the same methods. Manually deduplicating those saves about 600 bytes off the production RTKQ artifact.
  148. #### `reactHooksModule` custom hook configuration
  149. Previously, custom versions of React Redux's hooks (`useSelector`, `useDispatch`, and `useStore`) could be passed separately to `reactHooksModule`, usually to enable using a different context to the default `ReactReduxContext`.
  150. In practicality, the react hooks module needs all three of these hooks to be provided, and it became an easy mistake to only pass `useSelector` and `useDispatch`, without `useStore`.
  151. The module has now moved all three of these under the same configuration key, and will check that all three are provided if the key is present.
  152. ```ts
  153. // previously
  154. const customCreateApi = buildCreateApi(
  155. coreModule(),
  156. reactHooksModule({
  157. useDispatch: createDispatchHook(MyContext),
  158. useSelector: createSelectorHook(MyContext),
  159. useStore: createStoreHook(MyContext),
  160. })
  161. )
  162. // now
  163. const customCreateApi = buildCreateApi(
  164. coreModule(),
  165. reactHooksModule({
  166. hooks: {
  167. useDispatch: createDispatchHook(MyContext),
  168. useSelector: createSelectorHook(MyContext),
  169. useStore: createStoreHook(MyContext),
  170. },
  171. })
  172. )
  173. ```
  174. #### Deprecated Options Removed
  175. Several other options were previously marked as deprecated, and have been removed. We've also removed polyfills like the `AbortController` polyfill.
  176. ### TypeScript Changes
  177. #### `configureStore` field order for `middleware` matters
  178. If you are passing _both_ the `middleware` and `enhancers` fields to `configureStore`, the `middleware` field _must_ come first in order for internal TS inference to work properly.
  179. #### Non-default middleware/enhancers must use `Tuple`
  180. We've seen many cases where users passing the `middleware` parameter to configureStore have tried spreading the array returned by `getDefaultMiddleware()`, or passed an alternate plain array. This unfortunately loses the exact TS types from the individual middleware, and often causes TS problems down the road (such as `dispatch` being typed as `Dispatch<AnyAction>` and not knowing about thunks).
  181. `getDefaultMiddleware()` already used an internal `MiddlewareArray` class, an `Array` subclass that had strongly typed `.concat/prepend()` methods to correctly capture and retain the middleware types.
  182. We've renamed that type to `Tuple`, and `configureStore`'s TS types now require that you _must_ use `Tuple` if you want to pass your own array of middleware:
  183. ```ts
  184. import { configureStore, Tuple } from '@reduxjs/toolkit'
  185. configureStore({
  186. reducer: rootReducer,
  187. middleware: (getDefaultMiddleware) => new Tuple(additionalMiddleware, logger),
  188. })
  189. ```
  190. (Note that this has no effect if you're using RTK with plain JS, and you could still pass a plain array here.)
  191. This same restriction applies to the `enhancers` field.
  192. #### Entity adapter type updates
  193. `createEntityAdapter` now has an `Id` generic argument, which will be used to strongly type the item IDs anywhere those are exposed. Previously, the ID field type was always `string | number`. TS will now try to infer the exact type from either the `.id` field of your entity type, or the `selectId` return type. You could also fall back to passing that generic type directly. **If you use the `EntityState<Data, Id>` type directly, you _must_ supply both generic arguments!**
  194. The `.entities` lookup table is now defined to use a standard TS `Record<Id, MyEntityType>`, which assumes that each item lookup exists by default. Previously, it used a `Dictionary<MyEntityType>` type, which assumed the result was `MyEntityType | undefined`. The `Dictionary` type has been removed.
  195. If you prefer to assume that the lookups _might_ be undefined, use TypeScript's `noUncheckedIndexedAccess` configuration option to control that.
  196. ### New Features
  197. These features are new in Redux Toolkit 2.0, and help cover additional use cases that we've seen users ask for in the ecosystem.
  198. ### `combineSlices` API with slice reducer injection for code-splitting
  199. The Redux core has always included `combineReducers`, which takes an object full of "slice reducer" functions and generates a reducer that calls those slice reducers. RTK's `createSlice` generates slice reducers + associated action creators, and we've taught the pattern of exporting individual action creators as named exports and the slice reducer as a default export. Meanwhile, we've never had official support for lazy-loading reducers, although we've had [sample code for some "reducer injection" patterns in our docs](https://redux.js.org/usage/code-splitting).
  200. This release includes a new [`combineSlices`](../api/combineSlices) API that is designed to enable lazy-loading of reducers at runtime. It accepts individual slices or an object full of slices as arguments, and automatically calls `combineReducers` using the `sliceObject.name` field as the key for each state field. The generated reducer function has an additional `.inject()` method attached that can be used to dynamically inject additional slices at runtime. It also includes a `.withLazyLoadedSlices()` method that can be used to generate TS types for reducers that will be added later. See [#2776](https://github.com/reduxjs/redux-toolkit/issues/2776) for the original discussion around this idea.
  201. For now, we are not building this into `configureStore`, so you'll need to call `const rootReducer = combineSlices(.....)` yourself and pass that to `configureStore({reducer: rootReducer})`.
  202. **Basic usage: a mixture of slices and standalone reducers passed to `combineSlices`**
  203. ```ts
  204. const stringSlice = createSlice({
  205. name: 'string',
  206. initialState: '',
  207. reducers: {},
  208. })
  209. const numberSlice = createSlice({
  210. name: 'number',
  211. initialState: 0,
  212. reducers: {},
  213. })
  214. const booleanReducer = createReducer(false, () => {})
  215. const api = createApi(/* */)
  216. const combinedReducer = combineSlices(
  217. stringSlice,
  218. {
  219. num: numberSlice.reducer,
  220. boolean: booleanReducer,
  221. },
  222. api
  223. )
  224. expect(combinedReducer(undefined, dummyAction())).toEqual({
  225. string: stringSlice.getInitialState(),
  226. num: numberSlice.getInitialState(),
  227. boolean: booleanReducer.getInitialState(),
  228. api: api.reducer.getInitialState(),
  229. })
  230. ```
  231. **Basic slice reducer injection**
  232. ```ts
  233. // Create a reducer with a TS type that knows `numberSlice` will be injected
  234. const combinedReducer =
  235. combineSlices(stringSlice).withLazyLoadedSlices<
  236. WithSlice<typeof numberSlice>
  237. >()
  238. // `state.number` doesn't exist initially
  239. expect(combinedReducer(undefined, dummyAction()).number).toBe(undefined)
  240. // Create a version of the reducer with `numberSlice` injected (mainly useful for types)
  241. const injectedReducer = combinedReducer.inject(numberSlice)
  242. // `state.number` now exists, and injectedReducer's type no longer marks it as optional
  243. expect(injectedReducer(undefined, dummyAction()).number).toBe(
  244. numberSlice.getInitialState()
  245. )
  246. // original reducer has also been changed (type is still optional)
  247. expect(combinedReducer(undefined, dummyAction()).number).toBe(
  248. numberSlice.getInitialState()
  249. )
  250. ```
  251. ### `selectors` field in `createSlice`
  252. The existing `createSlice` API now has support for defining [`selectors`](../api/createSlice#selectors) directly as part of the slice. By default, these will be generated with the assumption that the slice is mounted in the root state using `slice.name` as the field, such as `name: "todos"` -> `rootState.todos`. Additionally, there's now a `slice.selectSlice` method that does that default root state lookup.
  253. You can call `sliceObject.getSelectors(selectSliceState)` to generate the selectors with an alternate location, similar to how `entityAdapter.getSelectors()` works.
  254. ```ts
  255. const slice = createSlice({
  256. name: 'counter',
  257. initialState: 42,
  258. reducers: {},
  259. selectors: {
  260. selectSlice: (state) => state,
  261. selectMultiple: (state, multiplier: number) => state * multiplier,
  262. },
  263. })
  264. // Basic usage
  265. const testState = {
  266. [slice.name]: slice.getInitialState(),
  267. }
  268. const { selectSlice, selectMultiple } = slice.selectors
  269. expect(selectSlice(testState)).toBe(slice.getInitialState())
  270. expect(selectMultiple(testState, 2)).toBe(slice.getInitialState() * 2)
  271. // Usage with the slice reducer mounted under a different key
  272. const customState = {
  273. number: slice.getInitialState(),
  274. }
  275. const { selectSlice, selectMultiple } = slice.getSelectors(
  276. (state: typeof customState) => state.number
  277. )
  278. expect(selectSlice(customState)).toBe(slice.getInitialState())
  279. expect(selectMultiple(customState, 2)).toBe(slice.getInitialState() * 2)
  280. ```
  281. ### `createSlice.reducers` callback syntax and thunk support
  282. One of the oldest feature requests we've had is the ability to declare thunks directly inside of `createSlice`. Until now, you've always had to declare them separately, give the thunk a string action prefix, and handle the actions via `createSlice.extraReducers`:
  283. ```ts
  284. // Declare the thunk separately
  285. const fetchUserById = createAsyncThunk(
  286. 'users/fetchByIdStatus',
  287. async (userId: number, thunkAPI) => {
  288. const response = await userAPI.fetchById(userId)
  289. return response.data
  290. }
  291. )
  292. const usersSlice = createSlice({
  293. name: 'users',
  294. initialState,
  295. reducers: {
  296. // standard reducer logic, with auto-generated action types per reducer
  297. },
  298. extraReducers: (builder) => {
  299. // Add reducers for additional action types here, and handle loading state as needed
  300. builder.addCase(fetchUserById.fulfilled, (state, action) => {
  301. state.entities.push(action.payload)
  302. })
  303. },
  304. })
  305. ```
  306. Many users have told us that this separation feels awkward.
  307. We've _wanted_ to include a way to define thunks directly inside of `createSlice`, and have played around with various prototypes. There were always two major blocking issues, and a secondary concern:
  308. 1. It wasn't clear what the syntax for declaring a thunk inside should look like.
  309. 2. Thunks have access to `getState` and `dispatch`, but the `RootState` and `AppDispatch` types are normally inferred from the store, which in turn infers it from the slice state types. Declaring thunks inside `createSlice` would cause circular type inference errors, as the store needs the slice types but the slice needs the store types. We weren't willing to ship an API that would work okay for our JS users but not for our TS users, especially since we _want_ people to use TS with RTK.
  310. 3. You can't do synchronous conditional imports in ES modules, and there's no good way to make the `createAsyncThunk` import optional. Either `createSlice` always depends on it (and adds that to the bundle size), or it can't use `createAsyncThunk` at all.
  311. We've settled on these compromises:
  312. - **In order to create async thunks with `createSlice`, you specifically need to [set up a custom version of `createSlice` that has access to `createAsyncThunk`](../api/createSlice#createasyncthunk)**.
  313. - You can declare thunks inside of `createSlice.reducers`, by using a "creator callback" syntax for the `reducers` field that is similar to the `build` callback syntax in RTK Query's `createApi` (using typed functions to create fields in an object). Doing this does look a bit different than the existing "object" syntax for the `reducers` field, but is still fairly similar.
  314. - You can customize _some_ of the types for thunks inside of `createSlice`, but you _cannot_ customize the `state` or `dispatch` types. If those are needed, you can manually do an `as` cast, like `getState() as RootState`.
  315. In practice, we hope these are reasonable tradeoffs. Creating thunks inside of `createSlice` has been widely asked for, so we think it's an API that will see usage. If the TS customization options are a limitation, you can still declare thunks outside of `createSlice` as always, and most async thunks don't need `dispatch` or `getState` - they just fetch data and return. And finally, setting up a custom `createSlice` allows you to opt into `createAsyncThunk` being included in your bundle size (though it may already be included if used directly or as part of RTK Query - in either of these cases there's no _additional_ bundle size).
  316. Here's what the new callback syntax looks like:
  317. ```ts
  318. const createSliceWithThunks = buildCreateSlice({
  319. creators: { asyncThunk: asyncThunkCreator },
  320. })
  321. const todosSlice = createSliceWithThunks({
  322. name: 'todos',
  323. initialState: {
  324. loading: false,
  325. todos: [],
  326. error: null,
  327. } as TodoState,
  328. reducers: (create) => ({
  329. // A normal "case reducer", same as always
  330. deleteTodo: create.reducer((state, action: PayloadAction<number>) => {
  331. state.todos.splice(action.payload, 1)
  332. }),
  333. // A case reducer with a "prepare callback" to customize the action
  334. addTodo: create.preparedReducer(
  335. (text: string) => {
  336. const id = nanoid()
  337. return { payload: { id, text } }
  338. },
  339. // action type is inferred from prepare callback
  340. (state, action) => {
  341. state.todos.push(action.payload)
  342. }
  343. ),
  344. // An async thunk
  345. fetchTodo: create.asyncThunk(
  346. // Async payload function as the first argument
  347. async (id: string, thunkApi) => {
  348. const res = await fetch(`myApi/todos?id=${id}`)
  349. return (await res.json()) as Item
  350. },
  351. // An object containing `{pending?, rejected?, fulfilled?, settled?, options?}` second
  352. {
  353. pending: (state) => {
  354. state.loading = true
  355. },
  356. rejected: (state, action) => {
  357. state.error = action.payload ?? action.error
  358. },
  359. fulfilled: (state, action) => {
  360. state.todos.push(action.payload)
  361. },
  362. // settled is called for both rejected and fulfilled actions
  363. settled: (state, action) => {
  364. state.loading = false
  365. },
  366. }
  367. ),
  368. }),
  369. })
  370. // `addTodo` and `deleteTodo` are normal action creators.
  371. // `fetchTodo` is the async thunk
  372. export const { addTodo, deleteTodo, fetchTodo } = todosSlice.actions
  373. ```
  374. #### Codemod
  375. **Using the new callback syntax is entirely optional (the object syntax is still standard)**, but an existing slice would need to be converted before it can take advantage of the new capabilities this syntax provides. To make this easier, a [codemod](../api/codemods) is provided.
  376. ```sh
  377. npx @reduxjs/rtk-codemods createSliceReducerBuilder ./src/features/todos/slice.ts
  378. ```
  379. ### "Dynamic middleware" middleware
  380. A Redux store's middleware pipeline is fixed at store creation time and can't be changed later. We _have_ seen ecosystem libraries that tried to allow dynamically adding and removing middleware, potentially useful for things like code splitting.
  381. This is a relatively niche use case, but we've built [our own version of a "dynamic middleware" middleware](../api/createDynamicMiddleware). Add it to the Redux store at setup time, and it lets you add middleware later at runtime. It also comes with a [React hook integration that will automatically add a middleware to the store and return the updated dispatch method.](../api/createDynamicMiddleware#react-integration).
  382. ```ts
  383. import { createDynamicMiddleware, configureStore } from '@reduxjs/toolkit'
  384. const dynamicMiddleware = createDynamicMiddleware()
  385. const store = configureStore({
  386. reducer: {
  387. todos: todosReducer,
  388. },
  389. middleware: (getDefaultMiddleware) =>
  390. getDefaultMiddleware().prepend(dynamicMiddleware.middleware),
  391. })
  392. // later
  393. dynamicMiddleware.addMiddleware(someOtherMiddleware)
  394. ```
  395. ### `configureStore` adds `autoBatchEnhancer` by default
  396. [In v1.9.0, we added a new `autoBatchEnhancer`](https://github.com/reduxjs/redux-toolkit/releases/tag/v1.9.0) that delays notifying subscribers briefly when multiple "low-priority" actions are dispatched in a row. This improves perf, as UI updates are typically the most expensive part of the update process. RTK Query marks most of its own internal actions as "low-pri" by default, but you have to have the `autoBatchEnhancer` added to the store to benefit from that.
  397. We've updated `configureStore` to add the `autoBatchEnhancer` to the store setup by default, so that users can benefit from the improved perf without needing to manually tweak the store config themselves.
  398. ### `entityAdapter.getSelectors` accepts a `createSelector` function
  399. [`entityAdapter.getSelectors()`](../api/createEntityAdapter#selector-functions) now accepts an options object as its second argument. This allows you to pass in your own preferred `createSelector` method, which will be used to memoize the generated selectors. This could be useful if you want to use one of Reselect's new alternate memoizers, or some other memoization library with an equivalent signature.
  400. ### Next.js Setup Guide
  401. We now have a docs page that covers [how to set up Redux properly with Next.js](https://redux.js.org/usage/nextjs). We've seen a lot of questions around using Redux, Next, and the App Router together, and this guide should help provide advice.
  402. (At this time, the Next.js `with-redux` example is still showing outdated patterns - we're going to file a PR shortly to update that to match our docs guide.)
  403. ## What's Changed
  404. * Remove legacy object syntax for reducers by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3051
  405. * Upgrade build tooling by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3088
  406. * Migrate the RTK package to be full ESM by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3095
  407. * Migrate RTK test suite from Jest to Vitest by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3102
  408. * Fix type errors after upgrading to Redux 5 alpha by @Methuselah96 in https://github.com/reduxjs/redux-toolkit/pull/3177
  409. * Bump Redux dep to 5.0.0-alpha.2 by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3170
  410. * Test published artifacts in CI by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3213
  411. * Merge RTK CI examples into `v2.0-integration` by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3253
  412. * Add `arethetypeswrong` automated CLI check by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3294
  413. * update tip regarding overrideExisting to match actual behaviour by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3305
  414. * Add `attw` CLI option to treat problems as non-errors by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3316
  415. * Rework build setup and hopefully fix ESM compat issues by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3318
  416. * Bump Immer to 10.0-beta by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3320
  417. * Switch build setup from a custom ESBuild+TS script to `tsup` by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3362
  418. * Use original instead of immer draft for perf by @GeorchW in https://github.com/reduxjs/redux-toolkit/pull/3270
  419. * enable enhanceEndpoints.transformResponse to override ResultType by @dmitrigrabov in https://github.com/reduxjs/redux-toolkit/pull/2953
  420. * Fix global `responseHandler` being used in `fetchBaseQuery` by @praxxis in https://github.com/reduxjs/redux-toolkit/pull/3137
  421. * reset internalState.currentSubscriptions on `resetApiState` by @phryneas in https://github.com/reduxjs/redux-toolkit/pull/3333
  422. * Bump deps and mark `subscriptionUpdated` as autobatched by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3364
  423. * Redux 5alpha5 by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3367
  424. * add isAction helper function, and ensure listener middleware only runs for actions by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3372
  425. * Allow inference of enhancer state extensions, and fix inference when using callback form by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3207
  426. * combineSlices implementation by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3297
  427. * Bump Immer to 10.0 final by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3376
  428. * Allow partial preloaded state for combined slice reducer and update devDeps by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3381
  429. * ensure it's only possible to pass all or none of the hooks to reactHooksModule by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3400
  430. * Remove remaining deprecated exports by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3398
  431. * create action creator middleware by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3414
  432. * Restore query status types by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3420
  433. * Implement auto fork joining by @ericanderson in https://github.com/reduxjs/redux-toolkit/pull/3407
  434. * types: make it easier to wrap createAsyncThunk by @shrouxm in https://github.com/reduxjs/redux-toolkit/pull/3393
  435. * Fixed Stackoverflow bug if children prop is a ref to root/parent object by @cheprasov in https://github.com/reduxjs/redux-toolkit/pull/3428
  436. * Add getDefaultEnhancers callback, and add autoBatchEnhancer to defaults. by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3347
  437. * Update to Redux alpha 6 by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3442
  438. * Remove toString override from action creators, in favour of explicit .type field. by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3425
  439. * Add "creator callback" syntax to slice reducer field, to allow for async thunk creation by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3388
  440. * API for adding middleware dynamically by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3292
  441. * Add Id type parameter in createEntityAdapter by @Matt-Ord in https://github.com/reduxjs/redux-toolkit/pull/3187
  442. * Require usage of Tuple in TS by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3460
  443. * Require that enhancers is a callback by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3461
  444. * fix invalid createEntityAdapter call by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3490
  445. * Use Record<EntityId, T> instead of Dictionary<T> by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3424
  446. * Fix inference for reducers without actions specified by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3475
  447. * Prefer UnknownAction and Action to AnyAction by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3363
  448. * Allow passing a `createSelector` instance to adapter.getSelectors by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3481
  449. * add required type parameter to EntityState in docs by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3496
  450. * fix syntax for users with noPropertyAccessFromIndexSignature enabled by @evertbouw in https://github.com/reduxjs/redux-toolkit/pull/3495
  451. * Fix TransformedResponse type to unwrap promise by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3500
  452. * Fix multiple TS build and packaging issues by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3672
  453. * fix: Default export of the module has or is using private name type error when using latest alpha/beta by @eric-crowell in https://github.com/reduxjs/redux-toolkit/pull/3605
  454. * RTK Query: resolve type portability issues by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3678
  455. * fix(RTKQuery React): Resolved declare module pathing for Node16 by @eric-crowell in https://github.com/reduxjs/redux-toolkit/pull/3592
  456. * fix(2448): remove abort controller polyfill by @JulienKode in https://github.com/reduxjs/redux-toolkit/pull/2518
  457. * Throw error when type is empty in builder.addCase by @chawes13 in https://github.com/reduxjs/redux-toolkit/pull/3572
  458. * [RED-23] fix: Updated type references to resolve portable types issue by @tdurnford in https://github.com/reduxjs/redux-toolkit/pull/3728
  459. * add option to update provided tags by @dutzi in https://github.com/reduxjs/redux-toolkit/pull/3255
  460. * Add selectCachedArgsForQuery util by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3547
  461. * [RED-26] Remove Request.clone() usage in fetchBaseQuery by @alex-vukov in https://github.com/reduxjs/redux-toolkit/pull/3720
  462. * Try working around TS 4.1 mismatch by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3739
  463. * Optimize bundles for RTK 2.0 by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3740
  464. * Work around known TS bug with type inference by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3761
  465. * Remove middleware array option by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3760
  466. * warn for and migrate old options and require all hooks by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3549
  467. * [RED-24] Feature/entity adapter draftable entity state by @Olesj-Bilous in https://github.com/reduxjs/redux-toolkit/pull/3669
  468. * write create callback codemod by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3525
  469. * Copy of "Work around known TS bug with type inference #3761" by @julian-ford in https://github.com/reduxjs/redux-toolkit/pull/3777
  470. * Rework named hooks type (v1.9) by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3769
  471. * Rewrite HooksWithUniqueNames type (v2.0) by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3767
  472. * Adds the option of generating real TS enums instead of string unions by @labmorales in https://github.com/reduxjs/redux-toolkit/pull/2854
  473. * fix: adjust snake case regex by @juliengbt in https://github.com/reduxjs/redux-toolkit/pull/3785
  474. * Update error message: name of action type by @Kalibryyy in https://github.com/reduxjs/redux-toolkit/pull/3800
  475. * Created listenerApi.cancel() by @julian-ford in https://github.com/reduxjs/redux-toolkit/pull/3775
  476. * Add `listenerApi.throwIfCancelled()` by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3802
  477. * Add settled matcher for createAsyncThunk by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3768
  478. * Rewrite RTKQ internal subscription lookups and subscription syncing by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3824
  479. * keep subscription on data while query is running by @phryneas in https://github.com/reduxjs/redux-toolkit/pull/3709
  480. * Stop re-exporting `autotrackMemoize` by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3831
  481. * Delayed tag invalidations by @GeorchW in https://github.com/reduxjs/redux-toolkit/pull/3116
  482. * [RTK v2.0] output selector fields are currently missing in selector functions created using `createDraftSafeSelector`. by @aryaemami59 in https://github.com/reduxjs/redux-toolkit/pull/3722
  483. * createDynamicMiddleware bike shedding by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3763
  484. * Allow passing selector creators with different memoize options to getSelectors by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3833
  485. * Add selectSlice to slice instance by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3838
  486. * Throw an error if ApiProvider is nested inside a normal Provider. by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3855
  487. * Update store configuration using configureStore in createSlice.mdx by @PaoloDiBello in https://github.com/reduxjs/redux-toolkit/pull/3869
  488. * Create standardised methods of modifying reducer handler context. by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3872
  489. * Require calling buildCreateSlice to use create.asyncThunk by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3867
  490. * Restore the toString override, but keep it out of the docs. by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3877
  491. * Selector housekeeping - emplace and unwrapped by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3878
  492. * Update build tooling for 2.0 by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3902
  493. * Export EndpointBuilder by @golergka in https://github.com/reduxjs/redux-toolkit/pull/3893
  494. * Update to Redux core v5 rc1 and replace isAction/isPlainObject with core counterparts by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3904
  495. * Drop "ESM modern dev" build and rename "ESM prod" to "browser" by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/3905
  496. * fix isFSA import and avoid unnecessary type param by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3906
  497. * Avoid passing an identity function to createSelector by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3931
  498. **Full Changelog**: https://github.com/reduxjs/redux-toolkit/compare/v1.9.3...v2.0.0

auf github ansehenimported 2026-09-28 über npm