v2.0.0 #3945
markerikson
announced in
Announcements
v2.0.0
#3945
Replies: 1 comment
-
|
Congratulations on getting 2.0 out the door and thank you so much of this fantastic toolkit!! |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
This major release :
createSliceandcreateReducermiddlewareandenhancersoptions ofconfigureStoreto require callbackscombineSlicesmethod with support for lazy-loading slice reducerscreateSlice.reducers, with optional support for defining thunks inside ofcreateSliceautoBatchEnhancertoconfigureStoreby defaultThis 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.)
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.
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 in the Redux docs.
Note
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!)
# RTK npm install @reduxjs/toolkit yarn add @reduxjs/toolkitChangelog
Object syntax for
createSlice.extraReducersandcreateReducerremovedRTK's
createReducerAPI 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 forcreateSlice.extraReducers.We have removed the "object" form for both
createReducerandcreateSlice.extraReducersin RTK 2.0, as the builder callback form is effectively the same number of lines of code, and works much better with TypeScript.As an example, this:
should be migrated to:
Codemods
To simplify upgrading codebases, we've published a set of codemods that will automatically transform the deprecated "object" syntax into the equivalent "builder" syntax.
The codemods package is available on NPM as
@reduxjs/rtk-codemods. More details are available here.To run the codemods against your codebase, run
npx @reduxjs/rtk-codemods <TRANSFORM NAME> path/of/files/ or/some**/*glob.js.Examples:
We also recommend re-running Prettier on the codebase before committing the changes.
These codemods should work, but we would greatly appreciate feedback from more real-world codebases!
configureStoreOptions ChangesconfigureStore.middlewaremust be a callbackSince the beginning,
configureStorehas accepted a direct array value as themiddlewareoption. However, providing an array directly preventsconfigureStorefrom callinggetDefaultMiddleware(). So,middleware: [myMiddleware]means there is no thunk middleware added (or any of the dev-mode checks).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.
As a result, we've now made the
middlewareonly 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:But note that we consistently recommend not replacing the default middleware entirely, and that you should use
return getDefaultMiddleware().concat(myMiddleware).configureStore.enhancersmust be a callbackSimilarly to
configureStore.middleware, theenhancersfield must also be a callback, for the same reasons.The callback will receive a
getDefaultEnhancersfunction that can be used to customise the batching enhancer that's now included by default.For example:
It's important to note that the result of
getDefaultEnhancerswill also contain the middleware enhancer created with any configured/default middleware. To help prevent mistakes,configureStorewill log an error to console if middleware was provided and the middleware enhancer wasn't included in the callback result.Also, note that if you supply the
enhancersfield, it must come after themiddlewarefield in order for TS inference to work properly.Standalone
getDefaultMiddlewareandgetTyperemovedThe standalone version of
getDefaultMiddlewarehas been deprecated since v1.6.1, and has now been removed. Use the function passed to themiddlewarecallback instead, which has the correct types.We have also removed the
getTypeexport, which was used to extract a type string from action creators made withcreateAction. Instead, use the static propertyactionCreator.type.RTK Query behaviour changes
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.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 oncreateApi. The new default behavior is'delayed'. Set it to'immediate'to revert to the behavior in RTK 1.9.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.
ESM/CJS Package Compatibility
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.
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 namedredux-toolkit.legacy-esm.jsto support Webpack 4 (which does not recognize theexportsfield inpackage.json). Additionally, all of the build artifacts now live under./dist/in the published package.Modernized Build Output
We now publish modern JS syntax targeting ES2020, including optional chaining, object spread, and other modern syntax. If you need to
Build Tooling
We're now building the package using https://github.com/egoist/tsup. We also now include sourcemaps for the ESM and CJS artifacts.
Dropping UMD Builds
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.
We've dropped those build artifacts from the published package, on the grounds that the use cases seem pretty rare today.
There's now a
redux-toolkit.browser.mjsfile in the package that can be loaded from a CDN like Unpkg.If you have strong use cases for us continuing to include UMD build artifacts, please let us know!
Dependency Updates
Redux Libraries
RTK now depends on Redux core 5.0, Reselect 5.0, and Redux Thunk 3.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 also covers the combined changes in one page
Immer 10
RTK now also depends on Immer 10.0, which has several major improvements and updates:
We've also removed the prior call to automatically enable the Immer ES5 fallback mode any time RTK was loaded.
Other Changes
Bundle Size Optimizations
Redux 4.1.0 optimized its bundle size by extracting error message strings out of production builds, 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).
We also noted that ESBuild does not deduplicate imports when it bundles source files, 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.reactHooksModulecustom hook configurationPreviously, custom versions of React Redux's hooks (
useSelector,useDispatch, anduseStore) could be passed separately toreactHooksModule, usually to enable using a different context to the defaultReactReduxContext.In practicality, the react hooks module needs all three of these hooks to be provided, and it became an easy mistake to only pass
useSelectoranduseDispatch, withoutuseStore.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.
Deprecated Options Removed
Several other options were previously marked as deprecated, and have been removed. We've also removed polyfills like the
AbortControllerpolyfill.TypeScript Changes
configureStorefield order formiddlewaremattersIf you are passing both the
middlewareandenhancersfields toconfigureStore, themiddlewarefield must come first in order for internal TS inference to work properly.Non-default middleware/enhancers must use
TupleWe've seen many cases where users passing the
middlewareparameter to configureStore have tried spreading the array returned bygetDefaultMiddleware(), 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 asdispatchbeing typed asDispatch<AnyAction>and not knowing about thunks).getDefaultMiddleware()already used an internalMiddlewareArrayclass, anArraysubclass that had strongly typed.concat/prepend()methods to correctly capture and retain the middleware types.We've renamed that type to
Tuple, andconfigureStore's TS types now require that you must useTupleif you want to pass your own array of middleware:(Note that this has no effect if you're using RTK with plain JS, and you could still pass a plain array here.)
This same restriction applies to the
enhancersfield.Entity adapter type updates
createEntityAdapternow has anIdgeneric argument, which will be used to strongly type the item IDs anywhere those are exposed. Previously, the ID field type was alwaysstring | number. TS will now try to infer the exact type from either the.idfield of your entity type, or theselectIdreturn type. You could also fall back to passing that generic type directly. If you use theEntityState<Data, Id>type directly, you must supply both generic arguments!The
.entitieslookup table is now defined to use a standard TSRecord<Id, MyEntityType>, which assumes that each item lookup exists by default. Previously, it used aDictionary<MyEntityType>type, which assumed the result wasMyEntityType | undefined. TheDictionarytype has been removed.If you prefer to assume that the lookups might be undefined, use TypeScript's
noUncheckedIndexedAccessconfiguration option to control that.New Features
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.
combineSlicesAPI with slice reducer injection for code-splittingThe 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'screateSlicegenerates 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.This release includes a new
combineSlicesAPI 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 callscombineReducersusing thesliceObject.namefield 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 for the original discussion around this idea.For now, we are not building this into
configureStore, so you'll need to callconst rootReducer = combineSlices(.....)yourself and pass that toconfigureStore({reducer: rootReducer}).Basic usage: a mixture of slices and standalone reducers passed to
combineSlicesBasic slice reducer injection
selectorsfield increateSliceThe existing
createSliceAPI now has support for definingselectorsdirectly as part of the slice. By default, these will be generated with the assumption that the slice is mounted in the root state usingslice.nameas the field, such asname: "todos"->rootState.todos. Additionally, there's now aslice.selectSlicemethod that does that default root state lookup.You can call
sliceObject.getSelectors(selectSliceState)to generate the selectors with an alternate location, similar to howentityAdapter.getSelectors()works.createSlice.reducerscallback syntax and thunk supportOne 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 viacreateSlice.extraReducers:Many users have told us that this separation feels awkward.
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:getStateanddispatch, but theRootStateandAppDispatchtypes are normally inferred from the store, which in turn infers it from the slice state types. Declaring thunks insidecreateSlicewould 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.createAsyncThunkimport optional. EithercreateSlicealways depends on it (and adds that to the bundle size), or it can't usecreateAsyncThunkat all.We've settled on these compromises:
createSlice, you specifically need to set up a custom version ofcreateSlicethat has access tocreateAsyncThunk.createSlice.reducers, by using a "creator callback" syntax for thereducersfield that is similar to thebuildcallback syntax in RTK Query'screateApi(using typed functions to create fields in an object). Doing this does look a bit different than the existing "object" syntax for thereducersfield, but is still fairly similar.createSlice, but you cannot customize thestateordispatchtypes. If those are needed, you can manually do anascast, likegetState() as RootState.In practice, we hope these are reasonable tradeoffs. Creating thunks inside of
createSlicehas 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 ofcreateSliceas always, and most async thunks don't needdispatchorgetState- they just fetch data and return. And finally, setting up a customcreateSliceallows you to opt intocreateAsyncThunkbeing 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).Here's what the new callback syntax looks like:
Codemod
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 is provided.
"Dynamic middleware" middleware
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.
This is a relatively niche use case, but we've built our own version of a "dynamic middleware" middleware. 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..
configureStoreaddsautoBatchEnhancerby defaultIn v1.9.0, we added a new
autoBatchEnhancerthat 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 theautoBatchEnhanceradded to the store to benefit from that.We've updated
configureStoreto add theautoBatchEnhancerto the store setup by default, so that users can benefit from the improved perf without needing to manually tweak the store config themselves.entityAdapter.getSelectorsaccepts acreateSelectorfunctionentityAdapter.getSelectors()now accepts an options object as its second argument. This allows you to pass in your own preferredcreateSelectormethod, 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.Next.js Setup Guide
We now have a docs page that covers how to set up Redux properly with Next.js. We've seen a lot of questions around using Redux, Next, and the App Router together, and this guide should help provide advice.
(At this time, the Next.js
with-reduxexample is still showing outdated patterns - we're going to file a PR shortly to update that to match our docs guide.)What's Changed
v2.0-integrationby @markerikson in Merge RTK CI examples intov2.0-integration#3253arethetypeswrongautomated CLI check by @markerikson in Addarethetypeswrongautomated CLI check #3294attwCLI option to treat problems as non-errors by @markerikson in AddattwCLI option to treat problems as non-errors #3316tsupby @markerikson in Switch build setup from a custom ESBuild+TS script totsup#3362responseHandlerbeing used infetchBaseQueryby @praxxis in Fix globalresponseHandlerbeing used infetchBaseQuery#3137resetApiStateby @phryneas in reset internalState.currentSubscriptions onresetApiState#3333subscriptionUpdatedas autobatched by @markerikson in Bump deps and marksubscriptionUpdatedas autobatched #3364createSelectorinstance to adapter.getSelectors by @EskiMojo14 in Allow passing acreateSelectorinstance to adapter.getSelectors #3481listenerApi.throwIfCancelled()by @markerikson in AddlistenerApi.throwIfCancelled()#3802autotrackMemoizeby @markerikson in Stop re-exportingautotrackMemoize#3831createDraftSafeSelector. by @aryaemami59 in [RTK v2.0] output selector fields are currently missing in selector functions created usingcreateDraftSafeSelector. #3722Full Changelog: v1.9.3...v2.0.0
This discussion was created from the release v2.0.0.
Beta Was this translation helpful? Give feedback.
All reactions