diff --git a/packages/toolkit/src/createAction.ts b/packages/toolkit/src/createAction.ts
index 0647a04621..ab52d1c4fc 100644
--- a/packages/toolkit/src/createAction.ts
+++ b/packages/toolkit/src/createAction.ts
@@ -224,7 +224,7 @@ export type PayloadActionCreator<
* A utility function to create an action creator for the given action type
* string. The action creator accepts a single argument, which will be included
* in the action object as a field called payload. The action creator function
- * will also have its toString() overriden so that it returns the action type,
+ * will also have its toString() overridden so that it returns the action type,
* allowing it to be used in reducer logic that is looking for that action type.
*
* @param type The action type to use for created actions.
@@ -241,7 +241,7 @@ export function createAction(
* A utility function to create an action creator for the given action type
* string. The action creator accepts a single argument, which will be included
* in the action object as a field called payload. The action creator function
- * will also have its toString() overriden so that it returns the action type,
+ * will also have its toString() overridden so that it returns the action type,
* allowing it to be used in reducer logic that is looking for that action type.
*
* @param type The action type to use for created actions.
@@ -286,6 +286,16 @@ export function createAction(type: string, prepareAction?: Function): any {
return actionCreator
}
+/**
+ * Returns true if value is a plain object with a `type` property.
+ */
+export function isAction(action: unknown): action is Action {
+ return isPlainObject(action) && 'type' in action
+}
+
+/**
+ * Returns true if value is an action with a string type and valid Flux Standard Action keys.
+ */
export function isFSA(action: unknown): action is {
type: string
payload?: unknown
@@ -293,8 +303,8 @@ export function isFSA(action: unknown): action is {
meta?: unknown
} {
return (
- isPlainObject(action) &&
- typeof (action as any).type === 'string' &&
+ isAction(action) &&
+ typeof action.type === 'string' &&
Object.keys(action).every(isValidKey)
)
}
diff --git a/packages/toolkit/src/index.ts b/packages/toolkit/src/index.ts
index 2ea3e1384c..3ea7634832 100644
--- a/packages/toolkit/src/index.ts
+++ b/packages/toolkit/src/index.ts
@@ -39,6 +39,8 @@ export {
// js
createAction,
getType,
+ isAction,
+ isFSA as isFluxStandardAction,
} from './createAction'
export type {
// types
@@ -103,7 +105,7 @@ export type {
// types
ActionReducerMapBuilder,
} from './mapBuilders'
-export { MiddlewareArray } from './utils'
+export { MiddlewareArray, EnhancerArray } from './utils'
export { createEntityAdapter } from './entities/create_adapter'
export type {
diff --git a/packages/toolkit/src/listenerMiddleware/index.ts b/packages/toolkit/src/listenerMiddleware/index.ts
index d96b9257db..56205295ee 100644
--- a/packages/toolkit/src/listenerMiddleware/index.ts
+++ b/packages/toolkit/src/listenerMiddleware/index.ts
@@ -1,6 +1,6 @@
import type { Dispatch, AnyAction, MiddlewareAPI } from 'redux'
import type { ThunkDispatch } from 'redux-thunk'
-import { createAction } from '../createAction'
+import { createAction, isAction } from '../createAction'
import { nanoid } from '../nanoid'
import type {
@@ -426,6 +426,11 @@ export function createListenerMiddleware<
const middleware: ListenerMiddleware =
(api) => (next) => (action) => {
+ if (!isAction(action)) {
+ // we only want to notify listeners for action objects
+ return next(action)
+ }
+
if (addListener.match(action)) {
return startListening(action.payload)
}
diff --git a/packages/toolkit/src/listenerMiddleware/tests/fork.test.ts b/packages/toolkit/src/listenerMiddleware/tests/fork.test.ts
index 2756e09f15..6d9e6abb56 100644
--- a/packages/toolkit/src/listenerMiddleware/tests/fork.test.ts
+++ b/packages/toolkit/src/listenerMiddleware/tests/fork.test.ts
@@ -367,7 +367,7 @@ describe('fork', () => {
},
})
- store.dispatch(increment)
+ store.dispatch(increment())
expect(await deferredResult).toBe(listenerCompleted)
})
diff --git a/packages/toolkit/src/query/react/ApiProvider.tsx b/packages/toolkit/src/query/react/ApiProvider.tsx
index 1f2bc7be27..abaef8c2cc 100644
--- a/packages/toolkit/src/query/react/ApiProvider.tsx
+++ b/packages/toolkit/src/query/react/ApiProvider.tsx
@@ -12,7 +12,7 @@ import type { Api } from '@reduxjs/toolkit/dist/query/apiTypes'
*
* @example
* ```tsx
- * // codeblock-meta title="Basic usage - wrap your App with ApiProvider"
+ * // codeblock-meta no-transpile title="Basic usage - wrap your App with ApiProvider"
* import * as React from 'react';
* import { ApiProvider } from '@reduxjs/toolkit/query/react';
* import { Pokemon } from './features/Pokemon';
diff --git a/packages/toolkit/src/query/react/buildHooks.ts b/packages/toolkit/src/query/react/buildHooks.ts
index 9d89188514..28e2916bf7 100644
--- a/packages/toolkit/src/query/react/buildHooks.ts
+++ b/packages/toolkit/src/query/react/buildHooks.ts
@@ -140,7 +140,7 @@ interface UseQuerySubscriptionOptions extends SubscriptionOptions {
*
* @example
* ```tsx
- * // codeblock-meta title="Skip example"
+ * // codeblock-meta no-transpile title="Skip example"
* const Pokemon = ({ name, skip }: { name: string; skip: boolean }) => {
* const { data, error, status } = useGetPokemonByNameQuery(name, {
* skip,
diff --git a/packages/toolkit/src/tests/EnhancerArray.typetest.ts b/packages/toolkit/src/tests/EnhancerArray.typetest.ts
new file mode 100644
index 0000000000..56e89a30d1
--- /dev/null
+++ b/packages/toolkit/src/tests/EnhancerArray.typetest.ts
@@ -0,0 +1,135 @@
+import { configureStore } from '@reduxjs/toolkit'
+import type { StoreEnhancer } from 'redux'
+
+declare const expectType: (t: T) => T
+
+declare const enhancer1: StoreEnhancer<
+ {
+ has1: true
+ },
+ { stateHas1: true }
+>
+
+declare const enhancer2: StoreEnhancer<
+ {
+ has2: true
+ },
+ { stateHas2: true }
+>
+
+{
+ // prepend single element
+ {
+ const store = configureStore({
+ reducer: () => 0,
+ enhancers: (dE) => dE.prepend(enhancer1),
+ })
+ expectType(store.has1)
+ expectType(store.getState().stateHas1)
+
+ // @ts-expect-error
+ expectType(store.has2)
+ // @ts-expect-error
+ expectType(store.getState().stateHas2)
+ }
+
+ // prepend multiple (rest)
+ {
+ const store = configureStore({
+ reducer: () => 0,
+ enhancers: (dE) => dE.prepend(enhancer1, enhancer2),
+ })
+ expectType(store.has1)
+ expectType(store.getState().stateHas1)
+ expectType(store.has2)
+ expectType(store.getState().stateHas2)
+
+ // @ts-expect-error
+ expectType(store.has3)
+ // @ts-expect-error
+ expectType(store.getState().stateHas3)
+ }
+
+ // prepend multiple (array notation)
+ {
+ const store = configureStore({
+ reducer: () => 0,
+ enhancers: (dE) => dE.prepend([enhancer1, enhancer2] as const),
+ })
+ expectType(store.has1)
+ expectType(store.getState().stateHas1)
+ expectType(store.has2)
+ expectType(store.getState().stateHas2)
+
+ // @ts-expect-error
+ expectType(store.has3)
+ // @ts-expect-error
+ expectType(store.getState().stateHas3)
+ }
+
+ // concat single element
+ {
+ const store = configureStore({
+ reducer: () => 0,
+ enhancers: (dE) => dE.concat(enhancer1),
+ })
+ expectType(store.has1)
+ expectType(store.getState().stateHas1)
+
+ // @ts-expect-error
+ expectType(store.has2)
+ // @ts-expect-error
+ expectType(store.getState().stateHas2)
+ }
+
+ // prepend multiple (rest)
+ {
+ const store = configureStore({
+ reducer: () => 0,
+ enhancers: (dE) => dE.concat(enhancer1, enhancer2),
+ })
+ expectType(store.has1)
+ expectType(store.getState().stateHas1)
+ expectType(store.has2)
+ expectType(store.getState().stateHas2)
+
+ // @ts-expect-error
+ expectType(store.has3)
+ // @ts-expect-error
+ expectType(store.getState().stateHas3)
+ }
+
+ // concat multiple (array notation)
+ {
+ const store = configureStore({
+ reducer: () => 0,
+ enhancers: (dE) => dE.concat([enhancer1, enhancer2] as const),
+ })
+ expectType(store.has1)
+ expectType(store.getState().stateHas1)
+ expectType(store.has2)
+ expectType(store.getState().stateHas2)
+
+ // @ts-expect-error
+ expectType(store.has3)
+ // @ts-expect-error
+ expectType(store.getState().stateHas3)
+ }
+
+ // concat and prepend
+ {
+ const store = configureStore({
+ reducer: () => 0,
+ enhancers: (dE) => dE.concat(enhancer1).prepend(enhancer2),
+ })
+ expectType(store.has1)
+ expectType(store.getState().stateHas1)
+ expectType(store.has2)
+ expectType(store.getState().stateHas2)
+
+ // @ts-expect-error
+ expectType(store.has3)
+ // @ts-expect-error
+ expectType(store.getState().stateHas3)
+ }
+}
diff --git a/packages/toolkit/src/tests/configureStore.test.ts b/packages/toolkit/src/tests/configureStore.test.ts
index 49831e51e6..aa93a5f842 100644
--- a/packages/toolkit/src/tests/configureStore.test.ts
+++ b/packages/toolkit/src/tests/configureStore.test.ts
@@ -231,9 +231,7 @@ describe('configureStore', () => {
const store = configureStore({
reducer,
- enhancers: (defaultEnhancers) => {
- return [...defaultEnhancers, dummyEnhancer]
- },
+ enhancers: (defaultEnhancers) => defaultEnhancers.concat(dummyEnhancer),
})
expect(dummyEnhancerCalled).toBe(true)
diff --git a/packages/toolkit/src/tests/configureStore.typetest.ts b/packages/toolkit/src/tests/configureStore.typetest.ts
index ae7d4872c7..d22bb776fd 100644
--- a/packages/toolkit/src/tests/configureStore.typetest.ts
+++ b/packages/toolkit/src/tests/configureStore.typetest.ts
@@ -194,6 +194,86 @@ const _anyMiddleware: any = () => () => () => {}
)
expectType(store.someProperty)
expectType(store.anotherProperty)
+
+ const storeWithCallback = configureStore({
+ reducer: () => 0,
+ enhancers: (defaultEnhancers) =>
+ defaultEnhancers
+ .prepend(anotherPropertyStoreEnhancer)
+ .concat(somePropertyStoreEnhancer),
+ })
+
+ expectType>(
+ store.dispatch
+ )
+ expectType(storeWithCallback.someProperty)
+ expectType(storeWithCallback.anotherProperty)
+ }
+
+ {
+ type StateExtendingEnhancer = StoreEnhancer<{}, { someProperty: string }>
+
+ const someStateExtendingEnhancer: StateExtendingEnhancer =
+ (next) =>
+ // @ts-expect-error how do you properly return an enhancer that extends state?
+ (...args) => {
+ const store = next(...args)
+ const getState = () => ({
+ ...store.getState(),
+ someProperty: 'some value',
+ })
+ return {
+ ...store,
+ getState,
+ }
+ }
+
+ type AnotherStateExtendingEnhancer = StoreEnhancer<
+ {},
+ { anotherProperty: number }
+ >
+
+ const anotherStateExtendingEnhancer: AnotherStateExtendingEnhancer =
+ (next) =>
+ // @ts-expect-error any input on this would be great
+ (...args) => {
+ const store = next(...args)
+ const getState = () => ({
+ ...store.getState(),
+ anotherProperty: 123,
+ })
+ return {
+ ...store,
+ getState,
+ }
+ }
+
+ const store = configureStore({
+ reducer: () => ({ aProperty: 0 }),
+ enhancers: [
+ someStateExtendingEnhancer,
+ anotherStateExtendingEnhancer,
+ // this doesn't work without the as const
+ ] as const,
+ })
+
+ const state = store.getState()
+
+ expectType(state.aProperty)
+ expectType(state.someProperty)
+ expectType(state.anotherProperty)
+
+ const storeWithCallback = configureStore({
+ reducer: () => ({ aProperty: 0 }),
+ enhancers: (dE) =>
+ dE.concat(someStateExtendingEnhancer, anotherStateExtendingEnhancer),
+ })
+
+ const stateWithCallback = storeWithCallback.getState()
+
+ expectType(stateWithCallback.aProperty)
+ expectType(stateWithCallback.someProperty)
+ expectType(stateWithCallback.anotherProperty)
}
}
diff --git a/packages/toolkit/src/tests/createAction.test.ts b/packages/toolkit/src/tests/createAction.test.ts
index b5e8b67b26..5b481b945c 100644
--- a/packages/toolkit/src/tests/createAction.test.ts
+++ b/packages/toolkit/src/tests/createAction.test.ts
@@ -1,4 +1,4 @@
-import { createAction, getType } from '@reduxjs/toolkit'
+import { createAction, getType, isAction } from '@reduxjs/toolkit'
describe('createAction', () => {
it('should create an action', () => {
@@ -122,6 +122,27 @@ describe('createAction', () => {
})
})
+describe('isAction', () => {
+ it('should only return true for plain objects with a type property', () => {
+ const actionCreator = createAction('anAction')
+ class Action {
+ type = 'totally an action'
+ }
+ const testCases: [action: unknown, expected: boolean][] = [
+ [{ type: 'an action' }, true],
+ [{ type: 'more props', extra: true }, true],
+ [actionCreator(), true],
+ [actionCreator, false],
+ [Promise.resolve({ type: 'an action' }), false],
+ [new Action(), false],
+ ['a string', false],
+ ]
+ for (const [action, expected] of testCases) {
+ expect(isAction(action)).toBe(expected)
+ }
+ })
+})
+
describe('getType', () => {
it('should return the action type', () => {
const actionCreator = createAction('A_TYPE')
diff --git a/packages/toolkit/src/tsHelpers.ts b/packages/toolkit/src/tsHelpers.ts
index 3e8dc20f05..5ffc0196a0 100644
--- a/packages/toolkit/src/tsHelpers.ts
+++ b/packages/toolkit/src/tsHelpers.ts
@@ -1,5 +1,5 @@
import type { Middleware, StoreEnhancer } from 'redux'
-import type { MiddlewareArray } from './utils'
+import type { EnhancerArray, MiddlewareArray } from './utils'
/**
* return True if T is `any`, otherwise return False
@@ -101,9 +101,56 @@ export type ExtractDispatchExtensions = M extends MiddlewareArray<
? ExtractDispatchFromMiddlewareTuple<[...M], {}>
: never
-export type ExtractStoreExtensions = E extends any[]
- ? UnionToIntersection ? Ext extends {} ? Ext : {} : {}>
- : {}
+type ExtractStoreExtensionsFromEnhancerTuple<
+ EnhancerTuple extends any[],
+ Acc extends {}
+> = EnhancerTuple extends [infer Head, ...infer Tail]
+ ? ExtractStoreExtensionsFromEnhancerTuple<
+ Tail,
+ Acc & (Head extends StoreEnhancer ? IsAny : {})
+ >
+ : Acc
+
+export type ExtractStoreExtensions = E extends EnhancerArray<
+ infer EnhancerTuple
+>
+ ? ExtractStoreExtensionsFromEnhancerTuple
+ : E extends ReadonlyArray
+ ? UnionToIntersection<
+ E[number] extends StoreEnhancer
+ ? Ext extends {}
+ ? IsAny
+ : {}
+ : {}
+ >
+ : never
+
+type ExtractStateExtensionsFromEnhancerTuple<
+ EnhancerTuple extends any[],
+ Acc extends {}
+> = EnhancerTuple extends [infer Head, ...infer Tail]
+ ? ExtractStateExtensionsFromEnhancerTuple<
+ Tail,
+ Acc &
+ (Head extends StoreEnhancer
+ ? IsAny
+ : {})
+ >
+ : Acc
+
+export type ExtractStateExtensions = E extends EnhancerArray<
+ infer EnhancerTuple
+>
+ ? ExtractStateExtensionsFromEnhancerTuple
+ : E extends ReadonlyArray
+ ? UnionToIntersection<
+ E[number] extends StoreEnhancer
+ ? StateExt extends {}
+ ? IsAny
+ : {}
+ : {}
+ >
+ : never
/**
* Helper type. Passes T out again, but boxes it in a way that it cannot
diff --git a/packages/toolkit/src/utils.ts b/packages/toolkit/src/utils.ts
index 40957c2788..2d3784293c 100644
--- a/packages/toolkit/src/utils.ts
+++ b/packages/toolkit/src/utils.ts
@@ -1,5 +1,5 @@
import createNextState, { isDraftable } from 'immer'
-import type { Middleware } from 'redux'
+import type { Middleware, StoreEnhancer } from 'redux'
export function getTimeMeasureUtils(maxDelay: number, fnName: string) {
let elapsed = 0
@@ -70,6 +70,49 @@ export class MiddlewareArray<
}
}
+/**
+ * @public
+ */
+export class EnhancerArray<
+ Enhancers extends StoreEnhancer[]
+> extends Array {
+ constructor(...items: Enhancers)
+ constructor(...args: any[]) {
+ super(...args)
+ Object.setPrototypeOf(this, EnhancerArray.prototype)
+ }
+
+ static get [Symbol.species]() {
+ return EnhancerArray as any
+ }
+
+ concat>>(
+ items: AdditionalEnhancers
+ ): EnhancerArray<[...Enhancers, ...AdditionalEnhancers]>
+
+ concat>>(
+ ...items: AdditionalEnhancers
+ ): EnhancerArray<[...Enhancers, ...AdditionalEnhancers]>
+ concat(...arr: any[]) {
+ return super.concat.apply(this, arr)
+ }
+
+ prepend>>(
+ items: AdditionalEnhancers
+ ): EnhancerArray<[...AdditionalEnhancers, ...Enhancers]>
+
+ prepend>>(
+ ...items: AdditionalEnhancers
+ ): EnhancerArray<[...AdditionalEnhancers, ...Enhancers]>
+
+ prepend(...arr: any[]) {
+ if (arr.length === 1 && Array.isArray(arr[0])) {
+ return new EnhancerArray(...arr[0].concat(this))
+ }
+ return new EnhancerArray(...arr.concat(this))
+ }
+}
+
export function freezeDraftable(val: T) {
return isDraftable(val) ? createNextState(val, () => {}) : val
}
diff --git a/website/package.json b/website/package.json
index f6c7954d71..f51edfd685 100644
--- a/website/package.json
+++ b/website/package.json
@@ -15,7 +15,7 @@
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-lite-youtube-embed": "^2.0.3",
- "remark-typescript-tools": "^1.0.8",
+ "remark-typescript-tools": "^1.1.0",
"typescript": "~4.2.4"
},
"browserslist": {
diff --git a/yarn.lock b/yarn.lock
index 75cf7af2e1..bbf6061fe8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -23900,9 +23900,9 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"remark-typescript-tools@npm:^1.0.8":
- version: 1.0.8
- resolution: "remark-typescript-tools@npm:1.0.8"
+"remark-typescript-tools@npm:^1.1.0":
+ version: 1.1.0
+ resolution: "remark-typescript-tools@npm:1.1.0"
dependencies:
"@microsoft/tsdoc": ^0.12.21
prettier: ^2.1.1
@@ -23910,7 +23910,7 @@ fsevents@^1.2.7:
unist-util-visit: ^2.0.3
peerDependencies:
typescript: ">=4.0"
- checksum: 6d2c1390e73fc1ed2b2d3816fbea34d72bc822ec3bb0e605cabcbdb3624576196242d0a752e6e6a79be2821a2d335c868fe4ef7dd6bb550c41552b49d391d867
+ checksum: 3f48c77c449461fffb1d19e85b4a81de3327fae5a98c909330b7ffb85f2600359e7070f73f0b57476eae25b32f57906e3f438bb76bb65b6bd176af025e34ce67
languageName: node
linkType: hard
@@ -28100,7 +28100,7 @@ fsevents@^1.2.7:
react: ^18.1.0
react-dom: ^18.1.0
react-lite-youtube-embed: ^2.0.3
- remark-typescript-tools: ^1.0.8
+ remark-typescript-tools: ^1.1.0
typescript: ~4.2.4
languageName: unknown
linkType: soft