fix(deps): update redux ecosystem (major) #5486
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR contains the following updates:
1.9.7
->2.3.0
8.1.3
->9.1.2
4.2.1
->5.0.1
Release Notes
reduxjs/redux-toolkit (@reduxjs/toolkit)
v2.3.0
Compare Source
This feature release adds a new RTK Query
upsertQueryEntries
util to batch-upsert cache entries more efficiently, passes through additional values for use inprepareHeaders
, and exports additional TS types around query options and selectors.Changelog
upsertQueryEntries
RTK Query already had an
upsertQueryData
thunk that would upsert a single cache entry. However, some users wanted to upsert many cache entries (potentially hundreds or thousands), and found thatupsertQueryData
had poor performance in those cases. This is becauseupsertQueryData
runs the full async request handling sequence, including dispatching bothpending
andfulfilled
actions, each of which run the main reducer and update store subscribers. That means there's2N
store / UI updates per item, so upserting hundreds of items becomes extremely perf-intensive.RTK Query now includes an
api.util.upsertQueryEntries
action that is meant to handle the batched upsert use case more efficiently. It's a single synchronous action that accepts an array of many{endpointName, arg, value}
entries to upsert. This results in a single store update, making this vastly better for performance vs many individualupsertQueryData
calls.We see this as having two main use cases. The first is prefilling the cache with data retrieved from storage on app startup (and it's worth noting that
upsertQueryEntries
can accept entries for many different endpoints as part of the same array).The second is to act as a "pseudo-normalization" tool. RTK Query is not a "normalized" cache. However, there are times when you may want to prefill other cache entries with the contents of another endpoint, such as taking the results of a
getPosts
list endpoint response and prefilling the individualgetPost(id)
endpoint cache entries, so that components that reference an individual item endpoint already have that data available.Currently, you can implement the "pseudo-normalization" approach by dispatching
upsertQueryEntries
in an endpoint lifecycle, like this:Down the road we may add a new option to query endpoints that would let you provide the mapping function and have it automatically update the corresponding entries.
For additional comparisons between
upsertQueryData
andupsertQueryEntries
, see theupsertQueryEntries
API reference.prepareHeaders
OptionsThe
prepareHeaders
callback forfetchBaseQuery
now receives two additional values in theapi
argument:arg
: the URL string orFetchArgs
object that was passed in tofetchBaseQuery
for this endpointextraOptions
: any extra options that were provided to the base queryAdditional TS Types
We've added a
TypedQueryStateSelector
type that can be used to pre-type selectors for use withselectFromResult
:We've also exported several additional TS types around base queries and tag definitions.
What's Changed
TypedQueryStateSelector
helper type by @aryaemami59 in https://github.com/reduxjs/redux-toolkit/pull/4656Full Changelog: reduxjs/redux-toolkit@v2.2.8...v2.3.0
v2.2.8
Compare Source
This bugfix release fixes a long-standing issue with RTK Query lazy query triggers returning stale data in some cases, fixes an error handling issue in RTK Query, and exports additional TS types.
Changelog
Lazy Query Trigger Handling
We'd had a couple long-standing issues reporting that
const result = await someLazyQueryTrigger()
sometimes returned stale data, especially if a mutation had just invalidated that query's tag.We finally got a good repro of this issue and identified it as a mis-written call inside of the middleware that skipped past the necessary handling to activate the correct query status tracking in that scenario. This should now be fixed.
Other Changes
Timeout handling in RTKQ endpoints should now correctly throw a timeout-related error instead of an
AbortError
.Base queries now have access to the current
queryCacheKey
value so it can be used in deciding query logic.We've exported several more TS types related to query options, as some users have been depending on those even though they previously weren't part of the public API.
What's Changed
QueryExtraOptions
andMutationExtraOptions
by @aryaemami59 in https://github.com/reduxjs/redux-toolkit/pull/4556mangleErrors
not preserving different error types by @aryaemami59 in https://github.com/reduxjs/redux-toolkit/pull/4586TypedUseQueryStateOptions
helper type by @aryaemami59 in https://github.com/reduxjs/redux-toolkit/pull/4604AbortError
being triggered incorrectly oncreateApi
endpoint timeout by @andrejpavlovic in https://github.com/reduxjs/redux-toolkit/pull/4628initiate
to refetch queries from middleware by @phryneas in https://github.com/reduxjs/redux-toolkit/pull/4651Full Changelog: reduxjs/redux-toolkit@v2.2.7...v2.2.8
v2.2.7
Compare Source
This bugfix release fixes issues with "TS type portability" errors, improves build artifact tree shaking behavior, and exports some additional TS types.
Changelog
TS Type Portability
We've had a slew of issues reported around "TS type portability" errors, such as:
The error messages are typically along the lines of:
@aryaemami59 did some deep investigation and concluded these were due to a mixture of using
interface
instead oftype
in most places, not pre-bundling our TS typedefs, and not exporting some of the unique symbols we use internally.Arya put together a highly detailed writeup and set of fixes in #4467: Fix: TypeScript Type Portability Issues, and that appears to resolve all of those issues we've seen. Thank you!
Other Changes
Arya also did significant work to improve RTK's treeshaking, tweaking internal definitions to let bundlers better separate out unused code.
We've exported additional types like
UpdateDefinitions
andRetryOptions
, per request.listenerMiddleware.withTypes()
methods now allow passing in anExtraArgument
generic.What's Changed
Full Changelog: reduxjs/redux-toolkit@v2.2.6...v2.2.7
v2.2.6
Compare Source
v2.2.5
Compare Source
This bugfix release fixes an issue in the recent
createEntityAdapter
sorting perf improvements that could (in specific cases) cause Immer to throw an error when trying to read a plain JS value instead of a proxy-wrapped value.What's Changed
current
may fail if the value is not a draft by @markerikson in https://github.com/reduxjs/redux-toolkit/pull/4412Full Changelog: reduxjs/redux-toolkit@v2.2.4...v2.2.5
v2.2.4
Compare Source
v2.2.3
Compare Source
This minor release fixes the types for functions that accept a React Context instance to match the changes in React Redux v9.
What's Changed
.withTypes
by @aryaemami59 in https://github.com/reduxjs/redux-toolkit/pull/4308Full Changelog: reduxjs/redux-toolkit@v2.2.2...v2.2.3
v2.2.2
Compare Source
This patch release fixes an incorrect build setting for the
legacy-esm
artifacts, and fixes an issue with RTKQ query hooks didn't always remove the cache entries if arguments were changed rapidly.Changes
legacy-esm
Artifact TranspilationThe
legacy-esm
build artifacts are intended for use by Webpack 4. Those were supposed to be transpiled to target"es2017"
, but were in fact still set to target"esnext"
- an oversight during the 2.0 development cycle. This release fixes that setting, so those artifacts are now correctly transpiled.Other Fixes
RTKQ query hooks now handle additional actions around argument changes that should result in cache entries being removed.
Additionally, 2.2.1 contained a fix to an incorrectly named type:
TypedUseMutationTrigger
is nowTypedMutationTrigger
.What's Changed
Full Changelog: reduxjs/redux-toolkit@v2.2.0...v2.2.2
v2.2.1
Compare Source
v2.2.0
Compare Source
This minor release:
entityAdapter.getInitialState(additionalProps, entities)
to allow prefilling stateentityAdapter.setAll(entityAdapter.getInitialState(additionalProps), entities)
undefined
if no additional properties are desiredcombineSlices
with no static reducersconst combinedReducer = combineSlices().withLazyLoadedSlices<LazyLoadedSlices>()
would have thrown an error'throw'
value foroverrideExisting
ininjectEndpoints
, which throws an error if a definition is injected with a name which is already usedenhanceEndpoints
LazyLoadedSlices
)action.meta.arg.isPrefetch
value to query thunk actions when prefetchedWhat's Changed
cli.js
tocli.mjs
by @aryaemami59 in https://github.com/reduxjs/redux-toolkit/pull/4169withLazyLoadedSlices
by @aryaemami59 in https://github.com/reduxjs/redux-toolkit/pull/4172overrideExisting
by @ffluk3 in https://github.com/reduxjs/redux-toolkit/pull/4189tsconfig.json
files of all CodesandBox examples by @aryaemami59 in https://github.com/reduxjs/redux-toolkit/pull/4190New Contributors
Full Changelog: reduxjs/redux-toolkit@v2.1.0...v2.2.0
v2.1.0
Compare Source
This minor release:
listenerMiddleware
andcreateDraftSafeSelector
skipPollingIfUnfocused
option to RTK QuerycreateSelector
instance used by RTK Querythis
valuecreate.asyncThunk
type parametersqueryFn
sWhat's Changed
listenerMiddleware.withTypes<RootState, AppDispatch>()
method by @aryaemami59 in https://github.com/reduxjs/redux-toolkit/pull/4049.withTypes
tocreateDraftSafeSelector
by @aryaemami59 in https://github.com/reduxjs/redux-toolkit/pull/4080this
in createSlice by @EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/4071tsconfig.typetests.json
to include all TS files by @aryaemami59 in https://github.com/reduxjs/redux-toolkit/pull/4091composeWithDevTools
spy by @aryaemami59 in https://github.com/reduxjs/redux-toolkit/pull/4093New Contributors
Full Changelog: reduxjs/redux-toolkit@v2.0.1...v2.1.0
v2.0.1
Compare Source
v2.0.0
Compare Source
This major release :
createSlice
andcreateReducer
middleware
andenhancers
options ofconfigureStore
to require callbackscombineSlices
method with support for lazy-loading slice reducerscreateSlice.reducers
, with optional support for defining thunks inside ofcreateSlice
autoBatchEnhancer
toconfigureStore
by 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.
Changelog
Object syntax for
createSlice.extraReducers
andcreateReducer
removedRTK'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 forcreateSlice.extraReducers
.We have removed the "object" form for both
createReducer
andcreateSlice.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.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!
configureStore
Options ChangesconfigureStore.middleware
must be a callbackSince the beginning,
configureStore
has accepted a direct array value as themiddleware
option. However, providing an array directly preventsconfigureStore
from 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
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:But note that we consistently recommend not replacing the default middleware entirely, and that you should use
return getDefaultMiddleware().concat(myMiddleware)
.configureStore.enhancers
must be a callbackSimilarly to
configureStore.middleware
, theenhancers
field must also be a callback, for the same reasons.The callback will receive a
getDefaultEnhancers
function 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
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.Also, note that if you supply the
enhancers
field, it must come after themiddleware
field in order for TS inference to work properly.Standalone
getDefaultMiddleware
andgetType
removedThe standalone version of
getDefaultMiddleware
has been deprecated since v1.6.1, and has now been removed. Use the function passed to themiddleware
callback instead, which has the correct types.We have also removed the
getType
export, 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.js
to support Webpack 4 (which does not recognize theexports
field 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.mjs
file 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.reactHooksModule
custom 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
useSelector
anduseDispatch
, 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
AbortController
polyfill.TypeScript Changes
configureStore
field order formiddleware
mattersIf you are passing both the
middleware
andenhancers
fields toconfigureStore
, themiddleware
field must come first in order for internal TS inference to work properly.Non-default middleware/enhancers must use
Tuple
We've seen many cases where users passing the
middleware
parameter 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 asdispatch
being typed asDispatch<AnyAction>
and not knowing about thunks).getDefaultMiddleware()
already used an internalMiddlewareArray
class, anArray
subclass 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 useTuple
if 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
enhancers
field.Entity adapter type updates
createEntityAdapter
now has anId
generic 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.id
field of your entity type, or theselectId
return 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
.entities
lookup 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
. TheDictionary
type has been removed.If you prefer to assume that the lookups might be undefined, use TypeScript's
noUncheckedIndexedAccess
configuration 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.
combineSlices
API 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'screateSlice
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.This release includes a new
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 callscombineReducers
using thesliceObject.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 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
combineSlices
Basic slice reducer injection
selectors
field increateSlice
The existing
createSlice
API now has support for definingselectors
directly as part of the slice. By default, these will be generated with the assumption that the slice is mounted in the root state usingslice.name
as the field, such asname: "todos"
->rootState.todos
. Additionally, there's now aslice.selectSlice
method 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.