Feature implementation from commits 0bf074a..97f96ad

docs/rtk-query/api/fetchBaseQuery.mdx

@@ -83,14 +83,60 @@ type FetchBaseQueryResult = Promise<
       meta?: { request: Request; response: Response }
     }
   | {
-      error: {
-        status: number
-        data: any
-      }
+      error: FetchBaseQueryError
       data?: undefined
       meta?: { request: Request; response: Response }
     }
 >
+
+type FetchBaseQueryError =
+  | {
+      /**
+       * * `number`:
+       *   HTTP status code
+       */
+      status: number
+      data: unknown
+    }
+  | {
+      /**
+       * * `"FETCH_ERROR"`:
+       *   An error that occurred during execution of `fetch` or the `fetchFn` callback option
+       **/
+      status: 'FETCH_ERROR'
+      data?: undefined
+      error: string
+    }
+  | {
+      /**
+       * * `"PARSING_ERROR"`:
+       *   An error happened during parsing.
+       *   Most likely a non-JSON-response was returned with the default `responseHandler` "JSON",
+       *   or an error occurred while executing a custom `responseHandler`.
+       **/
+      status: 'PARSING_ERROR'
+      originalStatus: number
+      data: string
+      error: string
+    }
+  | {
+      /**
+       * * `"TIMEOUT_ERROR"`:
+       *   Request timed out
+       **/
+      status: 'TIMEOUT_ERROR'
+      data?: undefined
+      error: string
+    }
+  | {
+      /**
+       * * `"CUSTOM_ERROR"`:
+       *   A custom error type that you can return from your `queryFn` where another error might not make sense.
+       **/
+      status: 'CUSTOM_ERROR'
+      data?: unknown
+      error: string
+    }
 ```
 
 ## Parameters

examples/query/react/basic/package.json

@@ -13,7 +13,8 @@
     "react-scripts": "5.0.1"
   },
   "devDependencies": {
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.1",
     "@types/jest": "^26.0.23",
     "@types/react": "^18.0.5",
     "@types/react-dom": "^18.0.5",

examples/query/react/kitchen-sink/package.json

@@ -15,8 +15,9 @@
     "react-scripts": "5.0.1"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/react": "^16.0.1",
     "@types/jest": "^26.0.23",
     "@types/node": "^14.14.6",
     "@types/react": "^18.0.5",

packages/toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reduxjs/toolkit",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "The official, opinionated, batteries-included toolset for efficient Redux development",
   "author": "Mark Erikson <[email protected]>",
   "license": "MIT",
@@ -56,8 +56,9 @@
     "@phryneas/ts-version": "^1.0.2",
     "@size-limit/file": "^11.0.1",
     "@size-limit/webpack": "^11.0.1",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^13.1.5",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/babel__core": "^7.20.5",
     "@types/babel__helper-module-imports": "^7.18.3",
     "@types/json-stringify-safe": "^5.0.0",

packages/toolkit/src/combineSlices.ts

@@ -8,7 +8,7 @@ import type {
   UnionToIntersection,
   WithOptionalProp,
 } from './tsHelpers'
-import { emplace } from './utils'
+import { getOrInsertComputed } from './utils'
 
 type SliceLike<ReducerPath extends string, State> = {
   reducerPath: ReducerPath
@@ -324,8 +324,10 @@ const createStateProxy = <State extends object>(
   state: State,
   reducerMap: Partial<Record<string, Reducer>>,
 ) =>
-  emplace(stateProxyMap, state, {
-    insert: () =>
+  getOrInsertComputed(
+    stateProxyMap,
+    state,
+    () =>
       new Proxy(state, {
         get: (target, prop, receiver) => {
           if (prop === ORIGINAL_STATE) return target
@@ -350,7 +352,7 @@ const createStateProxy = <State extends object>(
           return result
         },
       }),
-  }) as State
+  ) as State
 
 const original = (state: any) => {
   if (!isStateProxy(state)) {

packages/toolkit/src/createSlice.ts

@@ -26,7 +26,7 @@ import { createReducer } from './createReducer'
 import type { ActionReducerMapBuilder, TypedActionCreator } from './mapBuilders'
 import { executeReducerBuilderCallback } from './mapBuilders'
 import type { Id, TypeGuard } from './tsHelpers'
-import { emplace } from './utils'
+import { getOrInsertComputed } from './utils'
 
 const asyncThunkSymbol = /* @__PURE__ */ Symbol.for(
   'rtk-slice-createasyncthunk',
@@ -769,25 +769,25 @@ export function buildCreateSlice({ creators }: BuildCreateSliceConfig = {}) {
       function getSelectors(
         selectState: (rootState: any) => State = selectSelf,
       ) {
-        const selectorCache = emplace(injectedSelectorCache, injected, {
-          insert: () => new WeakMap(),
-        })
-
-        return emplace(selectorCache, selectState, {
-          insert: () => {
-            const map: Record<string, Selector<any, any>> = {}
-            for (const [name, selector] of Object.entries(
-              options.selectors ?? {},
-            )) {
-              map[name] = wrapSelector(
-                selector,
-                selectState,
-                getInitialState,
-                injected,
-              )
-            }
-            return map
-          },
+        const selectorCache = getOrInsertComputed(
+          injectedSelectorCache,
+          injected,
+          () => new WeakMap(),
+        )
+
+        return getOrInsertComputed(selectorCache, selectState, () => {
+          const map: Record<string, Selector<any, any>> = {}
+          for (const [name, selector] of Object.entries(
+            options.selectors ?? {},
+          )) {
+            map[name] = wrapSelector(
+              selector,
+              selectState,
+              getInitialState,
+              injected,
+            )
+          }
+          return map
         }) as any
       }
       return {

packages/toolkit/src/dynamicMiddleware/index.ts

@@ -3,7 +3,7 @@ import { compose } from 'redux'
 import { createAction } from '../createAction'
 import { isAllOf } from '../matchers'
 import { nanoid } from '../nanoid'
-import { emplace, find } from '../utils'
+import { getOrInsertComputed } from '../utils'
 import type {
   AddMiddleware,
   DynamicMiddleware,
@@ -23,7 +23,6 @@ const createMiddlewareEntry = <
 >(
   middleware: Middleware<any, State, DispatchType>,
 ): MiddlewareEntry<State, DispatchType> => ({
-  id: nanoid(),
   middleware,
   applied: new Map(),
 })
@@ -38,7 +37,10 @@ export const createDynamicMiddleware = <
   DispatchType extends Dispatch<UnknownAction> = Dispatch<UnknownAction>,
 >(): DynamicMiddlewareInstance<State, DispatchType> => {
   const instanceId = nanoid()
-  const middlewareMap = new Map<string, MiddlewareEntry<State, DispatchType>>()
+  const middlewareMap = new Map<
+    Middleware<any, State, DispatchType>,
+    MiddlewareEntry<State, DispatchType>
+  >()
 
   const withMiddleware = Object.assign(
     createAction(
@@ -58,22 +60,15 @@ export const createDynamicMiddleware = <
       ...middlewares: Middleware<any, State, DispatchType>[]
     ) {
       middlewares.forEach((middleware) => {
-        let entry = find(
-          Array.from(middlewareMap.values()),
-          (entry) => entry.middleware === middleware,
-        )
-        if (!entry) {
-          entry = createMiddlewareEntry(middleware)
-        }
-        middlewareMap.set(entry.id, entry)
+        getOrInsertComputed(middlewareMap, middleware, createMiddlewareEntry)
       })
     },
     { withTypes: () => addMiddleware },
   ) as AddMiddleware<State, DispatchType>
 
   const getFinalMiddleware: Middleware<{}, State, DispatchType> = (api) => {
     const appliedMiddleware = Array.from(middlewareMap.values()).map((entry) =>
-      emplace(entry.applied, api, { insert: () => entry.middleware(api) }),
+      getOrInsertComputed(entry.applied, api, entry.middleware),
     )
     return compose(...appliedMiddleware)
   }

packages/toolkit/src/dynamicMiddleware/types.ts

@@ -59,7 +59,6 @@ export type MiddlewareEntry<
   State = unknown,
   DispatchType extends Dispatch<UnknownAction> = Dispatch<UnknownAction>,
 > = {
-  id: string
   middleware: Middleware<any, State, DispatchType>
   applied: Map<
     MiddlewareAPI<DispatchType, State>,

packages/toolkit/src/listenerMiddleware/index.ts

@@ -4,7 +4,6 @@ import type { ThunkDispatch } from 'redux-thunk'
 import { createAction } from '../createAction'
 import { nanoid } from '../nanoid'
 
-import { find } from '../utils'
 import {
   TaskAbortError,
   listenerCancelled,
@@ -221,9 +220,8 @@ export const createListenerEntry: TypedCreateListenerEntry<unknown> =
     (options: FallbackAddListenerOptions) => {
       const { type, predicate, effect } = getListenerEntryPropsFrom(options)
 
-      const id = nanoid()
       const entry: ListenerEntry<unknown> = {
-        id,
+        id: nanoid(),
         effect,
         type,
         predicate,
@@ -238,6 +236,22 @@ export const createListenerEntry: TypedCreateListenerEntry<unknown> =
     { withTypes: () => createListenerEntry },
   ) as unknown as TypedCreateListenerEntry<unknown>
 
+const findListenerEntry = (
+  listenerMap: Map<string, ListenerEntry>,
+  options: FallbackAddListenerOptions,
+) => {
+  const { type, effect, predicate } = getListenerEntryPropsFrom(options)
+
+  return Array.from(listenerMap.values()).find((entry) => {
+    const matchPredicateOrType =
+      typeof type === 'string'
+        ? entry.type === type
+        : entry.predicate === predicate
+
+    return matchPredicateOrType && entry.effect === effect
+  })
+}
+
 const cancelActiveListeners = (
   entry: ListenerEntry<unknown, Dispatch<UnknownAction>>,
 ) => {
@@ -330,7 +344,7 @@ export const createListenerMiddleware = <
   assertFunction(onError, 'onError')
 
   const insertEntry = (entry: ListenerEntry) => {
-    entry.unsubscribe = () => listenerMap.delete(entry!.id)
+    entry.unsubscribe = () => listenerMap.delete(entry.id)
 
     listenerMap.set(entry.id, entry)
     return (cancelOptions?: UnsubscribeListenerOptions) => {
@@ -342,14 +356,9 @@ export const createListenerMiddleware = <
   }
 
   const startListening = ((options: FallbackAddListenerOptions) => {
-    let entry = find(
-      Array.from(listenerMap.values()),
-      (existingEntry) => existingEntry.effect === options.effect,
-    )
-
-    if (!entry) {
-      entry = createListenerEntry(options as any)
-    }
+    const entry =
+      findListenerEntry(listenerMap, options) ??
+      createListenerEntry(options as any)
 
     return insertEntry(entry)
   }) as AddListenerOverloads<any>
@@ -361,16 +370,7 @@ export const createListenerMiddleware = <
   const stopListening = (
     options: FallbackAddListenerOptions & UnsubscribeListenerOptions,
   ): boolean => {
-    const { type, effect, predicate } = getListenerEntryPropsFrom(options)
-
-    const entry = find(Array.from(listenerMap.values()), (entry) => {
-      const matchPredicateOrType =
-        typeof type === 'string'
-          ? entry.type === type
-          : entry.predicate === predicate
-
-      return matchPredicateOrType && entry.effect === effect
-    })
+    const entry = findListenerEntry(listenerMap, options)
 
     if (entry) {
       entry.unsubscribe()

packages/toolkit/src/listenerMiddleware/tests/listenerMiddleware.test.ts

@@ -117,6 +117,7 @@ describe('createListenerMiddleware', () => {
   const testAction1 = createAction<string>('testAction1')
   type TestAction1 = ReturnType<typeof testAction1>
   const testAction2 = createAction<string>('testAction2')
+  type TestAction2 = ReturnType<typeof testAction2>
   const testAction3 = createAction<string>('testAction3')
 
   beforeAll(() => {
@@ -339,6 +340,27 @@ describe('createListenerMiddleware', () => {
       ])
     })
 
+    test('subscribing with the same effect but different predicate is allowed', () => {
+      const effect = vi.fn((_: TestAction1 | TestAction2) => {})
+
+      startListening({
+        actionCreator: testAction1,
+        effect,
+      })
+      startListening({
+        actionCreator: testAction2,
+        effect,
+      })
+
+      store.dispatch(testAction1('a'))
+      store.dispatch(testAction2('b'))
+
+      expect(effect.mock.calls).toEqual([
+        [testAction1('a'), middlewareApi],
+        [testAction2('b'), middlewareApi],
+      ])
+    })
+
     test('unsubscribing via callback', () => {
       const effect = vi.fn((_: TestAction1) => {})