v2.0.0-beta.0

[markerikson]

This beta release updates many of our TS types for improved type safety and behavior, updates entityAdapter.getSelectors() to accept a createSelector option, depends on the latest [email protected] release, and includes all prior changes from the 2.0 alphas. This release has breaking changes.

npm i @reduxjs/toolkit@next

yarn add @reduxjs/toolkit@next

Changelog

Store Configuration Tweaks and Type Safety

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).

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.

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:

import { configureStore, Tuple } from '@reduxjs/toolkit'

configureStore({
  reducer: rootReducer,
  middleware: new Tuple(additionalMiddleware, logger),
})

(Note that this has no effect if you're using RTK with plain JS, and you could still pass a plain array here.)

Similarly, the enhancers field used to accept an array directly. It now is a callback that receives a getDefaultEnhancers method, equivalent to getDefaultMiddleware():

const store = configureStore({
  reducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
  enhancers: (getDefaultEnhancers) =>
    getDefaultEnhancers({
      autoBatch: false,
    }).concat(batchedSubscribe(debounceNotify)),
})

It too expects a Tuple return value if you're using TS.

Entity Adapter Updates

entityAdapter.getSelectors() 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.

createEntityAdapter now accepts an Id generic argument, which will be used to strongly type the item IDs anywhere those are exposed.

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.

If you prefer to assume that the lookups might be undefined, use TypeScript's noUncheckedIndexedAccess configuration option to control that.

New UnknownAction Type

The Redux core TS types have always exported an AnyAction type, which is defined to have {type: string} and treat any other field as any. This makes it easy to write uses like console.log(action.whatever), but unfortunately does not provide any meaningful type safety.

We now export an UnknownAction type, which treats all fields other than action.type as unknown. This encourages users to write type guards that check the action object and assert its specific TS type. Inside of those checks, you can access a field with better type safety.

UnknownAction is now the default any place in the Redux and RTK source that expects an action object.

AnyAction still exists for compatibility, but has been marked as deprecated.

Note that Redux Toolkit's action creators have a .match() method that acts as a useful type guard:

if (todoAdded.match(someUnknownAction)) {
  // action is now typed as a PayloadAction<Todo>
}

Earlier Alpha Changes

Summarizing the changes from earlier alphas:

New Features

• combineSlices API with built-in support for slice reducer injection for code-splitting
• selectors field in createSlice
• Callback form of createSlice.reducers, which allows defining thunks inside createSlice
• "Dynamic middleware" middleware
• configureStore adds autoBatchEnhancer by default

Breaking Changes

• Object argument for createReducer and createSlice.extraReducers has been removed
• Packaging converted to have full ESM/CJS compatibility
• Dropped UMD build artifacts
• JS build output is now "modern" and not transpiled for IE11 compatibility
• Updated to Immer 10, and dropped the legacy ES5 compat option
• Updated Redux core dep to 5.0-beta
• actionCreator.toString() override removed (although we're reconsidering this)
• Standalone getDefaultMiddleware removed
• Other deprecated fields removed

What's Changed

• Add Id type parameter in createEntityAdapter by @Matt-Ord in Add Id type parameter in createEntityAdapter #3187
• Require usage of Tuple in TS by @EskiMojo14 in Require usage of Tuple in TS #3460
• Require that enhancers is a callback by @EskiMojo14 in Require that enhancers is a callback #3461
• fix invalid createEntityAdapter call by @EskiMojo14 in fix invalid createEntityAdapter call #3490
• Use Record<EntityId, T> instead of Dictionary by @EskiMojo14 in Use Record<EntityId, T> instead of Dictionary<T> #3424
• Fix inference for reducers without actions specified by @EskiMojo14 in Fix inference for reducers without actions specified #3475
• Prefer UnknownAction and Action to AnyAction by @EskiMojo14 in Prefer UnknownAction and Action to AnyAction #3363
• Allow passing a createSelector instance to adapter.getSelectors by @EskiMojo14 in Allow passing a createSelector instance to adapter.getSelectors #3481

Full Changelog: v2.0.0-alpha.6...v2.0.0-beta.0

---

This discussion was created from the release v2.0.0-beta.0.

[einarq]

RTK 2 is looking really good! Looking forward to the final release.

Small question: Why was Dictionary removed? Found it quite handy. I can of course inline it in the app, but was wondering if it was considered harmful in any way.

[EskiMojo14]

see #930 for the full context - basically the original intention was similar to what noUncheckedIndexedAccess does now. Now that rule exists, we can leave it up to the user how it should behave.

[ryota-murakami]

@EskiMojo14 @markerikson

Great works!
I don't use entityAdapter because I don't facing situation that need normalization.

And one more thing I upgrade RTK v2.0.0 on this project and then I got bunch of type error.
After a quick check, the problem was that I used a Type that was no longer exported from v2 in several places.

.e.g
https://github.com/laststance/nsx/blob/main/src/redux/API.ts#L1

So I would like to confirm with you that in the Redux Toolkit Query, the namespace "@reduxjs/toolkit/query" Is only correct path for intended to be exposed externally as an API?

[EskiMojo14]

@ryota-murakami correct - the only entry points supported are:

• @reduxjs/toolkit
• @reduxjs/toolkit/react
• @reduxjs/toolkit/query
• @reduxjs/toolkit/query/react

Any types you import from /dist or /src that aren't exported from those entry points are technically internal, and thus are liable to change without any specific communication regarding them.

[ryota-murakami]

@EskiMojo14 Thanks! I'm going to fix types 😄

[tommedema]

When I run npm i @reduxjs/toolkit@beta and check package.json it actually installs "@reduxjs/toolkit": "^1.3.0-beta.1",

[markerikson]

My bad, that should have been @reduxjs/toolkit@next - sorry about that!

[devanecondition]

I'm trying to add middleware to the default middleware like this (using typescript):

export const store = configureStore({
  reducer: {
    // reducers
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(myMiddleware),
})

Everything works as expected, however i'm getting a typescript error for middleware:

Type '(getDefaultMiddleware: GetDefaultMiddleware<any>) => Tuple<[ThunkMiddleware<any, UnknownAction>, Middleware<{}, any, Dispatch<UnknownAction>>]>' is not assignable to type 'Tuple<Middlewares<any>> | ((getDefaultMiddleware: GetDefaultMiddleware<any>) => Tuple<Middlewares<any>>) | undefined'.
  Type '(getDefaultMiddleware: GetDefaultMiddleware<any>) => Tuple<[ThunkMiddleware<any, UnknownAction>, Middleware<{}, any, Dispatch<UnknownAction>>]>' is not assignable to type '(getDefaultMiddleware: GetDefaultMiddleware<any>) => Tuple<Middlewares<any>>'.
    Type 'Tuple<[ThunkMiddleware<any, UnknownAction>, Middleware<{}, any, Dispatch<UnknownAction>>]>' is not assignable to type 'Tuple<Middlewares<any>>'.
      Type '[ThunkMiddleware<any, UnknownAction>, Middleware<{}, any, Dispatch<UnknownAction>>]' is not assignable to type 'Middlewares<any>'.
        Type 'Middleware<{}, any, Dispatch<UnknownAction>> | ThunkMiddleware<any, UnknownAction>' is not assignable to type 'Middleware<{}, any, Dispatch<UnknownAction>>'.
          Type 'ThunkMiddleware<any, UnknownAction>' is not assignable to type 'Middleware<{}, any, Dispatch<UnknownAction>>'.
            Types of parameters 'next' and 'next' are incompatible.
              Type 'unknown' is not assignable to type 'T'.
                'T' could be instantiated with an arbitrary type which could be unrelated to 'unknown'.ts(2322)
configureStore.d.ts(25, 5): The expected type comes from property 'middleware' which is declared here on type 'ConfigureStoreOptions<any, UnknownAction, Tuple<Middlewares<any>>, Tuple<[StoreEnhancer<{ dispatch: {}; }>, StoreEnhancer]>, any>'

Should I be using Tuple for this?

[markerikson]

Can you show the source code and typing for your myMiddleware ? Also, what version of redux do you have installed?

[devanecondition]

This is my bad. I had to update my redux to 5.0.0-beta.0. Thanks for the quick reply!

[spiralabhishek]

export const store: AppStore = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false
    }).concat([
      createStateSyncMiddleware({
        channel: "ketchcloth",
        broadcastChannelOption: { type: "localstorage", webWorkerSupport: false },
        blacklist: ['persist/PERSIST', 'persist/PURGE', 'persist/REHYDRATE']
      })
    ])
})

I getting same error here

``
TS2322: Type '(getDefaultMiddleware: GetDefaultMiddleware) => Tuple<[ThunkMiddleware<any, UnknownAction>, ...Middleware<{}, any, Dispatch>[]]>' is not assignable to type '(getDefaultMiddleware: GetDefaultMiddleware) => Tuple<Middlewares>'.
Type 'Tuple<[ThunkMiddleware<any, UnknownAction>, ...Middleware<{}, any, Dispatch>[]]>' is not assignable to type 'Tuple<Middlewares>'.
Type '[ThunkMiddleware<any, UnknownAction>, ...Middleware<{}, any, Dispatch>[]]' is not assignable to type 'Middlewares'.
Type 'ThunkMiddleware<any, UnknownAction> | Middleware<{}, any, Dispatch>' is not assignable to type 'Middleware<{}, any, Dispatch>'.
Type 'ThunkMiddleware<any, UnknownAction>' is not assignable to type 'Middleware<{}, any, Dispatch>'.
Types of parameters 'next' and 'next' are incompatible.
Type 'unknown' is not assignable to type 'T'.
'T' could be instantiated with an arbitrary type which could be unrelated to 'unknown'.
48 | export const store: AppStore = configureStore({
49 | reducer: rootReducer,

50 | middleware: (getDefaultMiddleware) =>
| ^^^^^^^^^^
51 | getDefaultMiddleware({
52 | serializableCheck: false,
53 | immutableCheck: false
``

[spiralabhishek]

"@reduxjs/toolkit": "^2.1.0", "redux": "^5.0.1",

[spiralabhishek]

`import { Action, AnyAction, configureStore, Store, ThunkAction } from "@reduxjs/toolkit"
import { useDispatch } from "react-redux"
import { ThunkDispatch } from "redux-thunk"
import { persistStore, persistReducer } from "redux-persist"
import { createStateSyncMiddleware } from "redux-state-sync"
// import storage from "redux-persist/lib/storage"
import { Persistor } from "redux-persist/lib/types"
import { encryptTransform } from "redux-persist-transform-encrypt"
import combineReducer from "redux/reducer"
import localForage from "localforage"

const persistConfig = {
key: "ketchcloth",
storage: localForage,
transforms: [
encryptTransform({
secretKey: process.env.REACT_APP_PERSIST_SECRET_KEY || "",
onError: (error: Error) => {
// Handle the error.
console.log("ERROR", error)
}
})
]
}

export type RootState = ReturnType

const persistedReducer = persistReducer(persistConfig, combineReducer)

// 2. Create a type for thunk dispatch
export type AppThunkDispatch = ThunkDispatch<RootState, any, AnyAction>

export type AppStore = Omit<Store<RootState, AnyAction>, "dispatch"> & {
dispatch: AppThunkDispatch
}

const rootReducer = (state: any, action: AnyAction) => {
if (action.type === "auth/logout/fulfilled") {
state = {
...state,
Customer: undefined,
ShoppingCartState: undefined
}
}
return persistedReducer(state, action)
}

export const store: AppStore = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: false,
immutableCheck: false
}).concat([
createStateSyncMiddleware({
channel: "ketchcloth",
broadcastChannelOption: { type: "localstorage", webWorkerSupport: false },
blacklist: ['persist/PERSIST', 'persist/PURGE', 'persist/REHYDRATE']
})
])
})

export const persistor: Persistor = persistStore(store)

export type AppThunk<ReturnType = void> = ThunkAction<
ReturnType,
RootState,
unknown,
Action

export const useAppDispatch = () => useDispatch()`

[Andynopol]

combineSlices

I came up with this 1 year ago :))

Glad it is going to be supported in the main library and I don't have to maintain the codebase for long :D

These were my junk takes on this matter:

//Extend slice function with wrapped reducer
/**
 *  @remarks
 * 
 *  This method extends an already declared slice in oreder to attach custom actions to the reducer.
 * 
 *  @param originalSlice The root slice you want to extend
 *  @param caseReducers The case reducers you want to add to the current ones. Current slice reducers will be override.
 *  @param extraReducers Extra reducers to add to the slice.
 *  @param newName The resulted slice new name if you want to override it. If not, it will get the originalSlice name
 *  @param newInitialState The resulted slice initalState. If none is provided, the originalSlice's initalState will be preserved
 * 
 *  @returns slice: Slice
 *  The extended slice containing the current reducers concatenated with the new caseReducers and with the extraReducers 
 *
 */

export const extendSliceWrap = ( originalSlice: Slice, caseReducers?: ValidateSliceCaseReducers<any, SliceCaseReducers<any>>, extraReducers?: ( ( builder: ActionReducerMapBuilder<NoInfer<any>> ) => void ), newName?: string, newInitialState?: any ) => {

  const wrappingSlice = createSlice( {
    name: newName || originalSlice.name,
    initialState: newInitialState || originalSlice.getInitialState(),
    reducers: { ...caseReducers },
    extraReducers
  } );
  const wrappedReducer = ( state: RootState, action: any ) => originalSlice.reducer( wrappingSlice.reducer( state, action ), action );
  return {
    ...wrappingSlice,
    reducer: wrappedReducer,
    caseReducers: {
      ...originalSlice.caseReducers,
      ...wrappingSlice.caseReducers
    }
  };
};

//Extend slice function
/**
 *  @remarks
 * 
 *  This method extends an already declared slice in oreder to attach custom actions to the reducer.
 * 
 *  @param originalSlice The root slice you want to extend
 *  @param caseReducers The case reducers you want to add to the current ones. Current slice reducers will be override.
 *  @param extraReducers Extra reducers to add to the slice.
 *  @param newName The resulted slice new name if you want to override it. If not, it will get the originalSlice name
 *  @param newInitialState The resulted slice initalState. If none is provided, the originalSlice's initalState will be preserved
 * 
 *  @returns slice: Slice
 *  The extended slice containing the current reducers concatenated with the new caseReducers and with the extraReducers 
 *
 */

export const extendSlice = ( originalSlice: Slice, caseReducers?: ValidateSliceCaseReducers<any, SliceCaseReducers<any>>, extraReducers?: ( ( builder: ActionReducerMapBuilder<NoInfer<any>> ) => void ), newName?: string, newInitialState?: any ) => {
  return createSlice( {
    name: newName || originalSlice.name,
    initialState: newInitialState || originalSlice.getInitialState(),
    reducers: { ...caseReducers, ...originalSlice.caseReducers },
    extraReducers
  } );
};

Hopefully the extrareducers can merge as well.

[EskiMojo14]

then yeah, i would suggest using the approach above with reduce-reducers
it's a lot simpler both to type and functionally

[Andynopol]

Is it a library this reduce-reducers? Sorry if I am dumb founded. I searched in the docs for this reduce reducers and no sign of it.

[EskiMojo14]

import { providedSlice } from "your-package";

const clientSlice = createSlice({
  name: providedSlice.name,
  initialState: providedSlice.getInitialState,
  reducers: {
    extraClientAction: (state) => {}
  }
})

export const { extraClientAction } = clientSlice.actions;

export const finalReducer = reduceReducers(providedSlice.reducer, clientSlice.reducer);

[EskiMojo14]

Is it a library this reduce-reducers? Sorry if I am dumb founded. I searched in the docs for this reduce reducers and no sign of it.

yes, i linked it in my previous comment

[EskiMojo14]

it's also mentioned in the FAQ: https://redux.js.org/faq/reducers#how-do-i-share-state-between-two-reducers-do-i-have-to-use-combinereducers