Merge branch 'master' of https://github.com/reduxjs/redux-toolkit into combineslices-example

Author: aryaemami59

docs/introduction/why-rtk-is-redux-today.md

@@ -29,7 +29,7 @@ See these pages to learn how to use "modern Redux" with Redux Toolkit:
 
 :::
 
-## How Redux Toolkit Is Different Than the Redux Core
+## How Redux Toolkit Is Different From the Redux Core
 
 ### What Is "Redux"?
 

docs/rtk-query/usage/customizing-create-api.mdx

@@ -48,6 +48,27 @@ const customCreateApi = buildCreateApi(
 )
 ```
 
+## Customizing `createSelector` for RTKQ
+
+Both `coreModule` and `reactHooksModule` accept a `createSelector` option which should be a selector creator instance from Reselect or with an equivalent signature.
+
+```ts
+import * as React from 'react'
+import { createSelectorCreator, lruMemoize } from '@reduxjs/toolkit'
+import {
+  buildCreateApi,
+  coreModule,
+  reactHooksModule,
+} from '@reduxjs/toolkit/query/react'
+
+const createLruSelector = createSelectorCreator(lruMemoize)
+
+const customCreateApi = buildCreateApi(
+  coreModule({ createSelector: createLruSelector }),
+  reactHooksModule({ createSelector: createLruSelector })
+)
+```
+
 ## Creating your own module
 
 If you want to create your own module, you should review [the react-hooks module](https://github.com/reduxjs/redux-toolkit/blob/b74a52935a5840bebca5acdc8e2265e3b6497afa/src/query/react/module.ts) to see what an implementation would look like.

package.json

@@ -38,7 +38,7 @@
     "prettier": "^2.2.1",
     "release-it": "^14.12.5",
     "serve": "^14.2.0",
-    "typescript": "5.2"
+    "typescript": "^5.2.2"
   },
   "resolutions": {
     "@babel/core": "7.19.3",
@@ -69,8 +69,7 @@
     "type-fest": "2.19.0",
     "[email protected]": "patch:console-testing-library@npm%3A0.6.1#./.yarn/patches/console-testing-library-npm-0.6.1-4d9957d402.patch",
     "@typescript-eslint/eslint-plugin": "6.12.0",
-    "@typescript-eslint/parser": "6.12.0",
-    "typescript": "5.2.2"
+    "@typescript-eslint/parser": "6.12.0"
   },
   "scripts": {
     "build": "yarn build:packages",

packages/toolkit/package.json

@@ -49,7 +49,7 @@
     }
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.13.1",
+    "@arethetypeswrong/cli": "^0.13.5",
     "@microsoft/api-extractor": "^7.13.2",
     "@phryneas/ts-version": "^1.0.2",
     "@size-limit/preset-small-lib": "^4.11.0",

packages/toolkit/src/createSlice.ts

@@ -88,22 +88,21 @@ export interface Slice<
   /**
    * Get localised slice selectors (expects to be called with *just* the slice's state as the first parameter)
    */
-  getSelectors(this: this): Id<SliceDefinedSelectors<State, Selectors, State>>
+  getSelectors(): Id<SliceDefinedSelectors<State, Selectors, State>>
 
   /**
    * Get globalised slice selectors (`selectState` callback is expected to receive first parameter and return slice state)
    */
   getSelectors<RootState>(
-    this: this,
-    selectState: (this: this, rootState: RootState) => State
+    selectState: (rootState: RootState) => State
   ): Id<SliceDefinedSelectors<State, Selectors, RootState>>
 
   /**
    * Selectors that assume the slice's state is `rootState[slice.reducerPath]` (which is usually the case)
    *
    * Equivalent to `slice.getSelectors((state: RootState) => state[slice.reducerPath])`.
    */
-  selectors: Id<
+  get selectors(): Id<
     SliceDefinedSelectors<State, Selectors, { [K in ReducerPath]: State }>
   >
 
@@ -126,7 +125,7 @@ export interface Slice<
    *
    * Will throw an error if slice is not found.
    */
-  selectSlice(this: this, state: { [K in ReducerPath]: State }): State
+  selectSlice(state: { [K in ReducerPath]: State }): State
 }
 
 /**
@@ -153,15 +152,15 @@ interface InjectedSlice<
    * Get globalised slice selectors (`selectState` callback is expected to receive first parameter and return slice state)
    */
   getSelectors<RootState>(
-    selectState: (this: this, rootState: RootState) => State | undefined
+    selectState: (rootState: RootState) => State | undefined
   ): Id<SliceDefinedSelectors<State, Selectors, RootState>>
 
   /**
    * Selectors that assume the slice's state is `rootState[slice.name]` (which is usually the case)
    *
    * Equivalent to `slice.getSelectors((state: RootState) => state[slice.name])`.
    */
-  selectors: Id<
+  get selectors(): Id<
     SliceDefinedSelectors<
       State,
       Selectors,
@@ -740,8 +739,8 @@ export function buildCreateSlice({ creators }: BuildCreateSliceConfig = {}) {
 
     const selectSelf = (state: State) => state
 
-    const injectedSelectorCache = new WeakMap<
-      Slice<State, CaseReducers, Name, ReducerPath, Selectors>,
+    const injectedSelectorCache = new Map<
+      boolean,
       WeakMap<
         (rootState: any) => State | undefined,
         Record<string, (rootState: any) => any>
@@ -750,23 +749,42 @@ export function buildCreateSlice({ creators }: BuildCreateSliceConfig = {}) {
 
     let _reducer: ReducerWithInitialState<State>
 
-    const slice: Slice<State, CaseReducers, Name, ReducerPath, Selectors> = {
-      name,
-      reducerPath,
-      reducer(state, action) {
-        if (!_reducer) _reducer = buildReducer()
+    function reducer(state: State | undefined, action: UnknownAction) {
+      if (!_reducer) _reducer = buildReducer()
 
-        return _reducer(state, action)
-      },
-      actions: context.actionCreators as any,
-      caseReducers: context.sliceCaseReducersByName as any,
-      getInitialState() {
-        if (!_reducer) _reducer = buildReducer()
+      return _reducer(state, action)
+    }
 
-        return _reducer.getInitialState()
-      },
-      getSelectors(selectState: (rootState: any) => State = selectSelf) {
-        const selectorCache = emplace(injectedSelectorCache, this, {
+    function getInitialState() {
+      if (!_reducer) _reducer = buildReducer()
+
+      return _reducer.getInitialState()
+    }
+
+    function makeSelectorProps<CurrentReducerPath extends string = ReducerPath>(
+      reducerPath: CurrentReducerPath,
+      injected = false
+    ): Pick<
+      Slice<State, CaseReducers, Name, CurrentReducerPath, Selectors>,
+      'getSelectors' | 'selectors' | 'selectSlice' | 'reducerPath'
+    > {
+      function selectSlice(state: { [K in CurrentReducerPath]: State }) {
+        let sliceState = state[reducerPath]
+        if (typeof sliceState === 'undefined') {
+          if (injected) {
+            sliceState = getInitialState()
+          } else if (process.env.NODE_ENV !== 'production') {
+            throw new Error(
+              'selectSlice returned undefined for an uninjected slice reducer'
+            )
+          }
+        }
+        return sliceState
+      }
+      function getSelectors(
+        selectState: (rootState: any) => State = selectSelf
+      ) {
+        const selectorCache = emplace(injectedSelectorCache, injected, {
           insert: () => new WeakMap(),
         })
 
@@ -777,39 +795,39 @@ export function buildCreateSlice({ creators }: BuildCreateSliceConfig = {}) {
               options.selectors ?? {}
             )) {
               map[name] = wrapSelector(
-                this,
                 selector,
                 selectState,
-                this !== slice
+                getInitialState,
+                injected
               )
             }
             return map
           },
         }) as any
-      },
-      selectSlice(state) {
-        let sliceState = state[this.reducerPath]
-        if (typeof sliceState === 'undefined') {
-          // check if injectInto has been called
-          if (this !== slice) {
-            sliceState = this.getInitialState()
-          } else if (process.env.NODE_ENV !== 'production') {
-            throw new Error(
-              'selectSlice returned undefined for an uninjected slice reducer'
-            )
-          }
-        }
-        return sliceState
-      },
-      get selectors() {
-        return this.getSelectors(this.selectSlice)
-      },
+      }
+      return {
+        reducerPath,
+        getSelectors,
+        get selectors() {
+          return getSelectors(selectSlice)
+        },
+        selectSlice,
+      }
+    }
+
+    const slice: Slice<State, CaseReducers, Name, ReducerPath, Selectors> = {
+      name,
+      reducer,
+      actions: context.actionCreators as any,
+      caseReducers: context.sliceCaseReducersByName as any,
+      getInitialState,
+      ...makeSelectorProps(reducerPath),
       injectInto(injectable, { reducerPath: pathOpt, ...config } = {}) {
-        const reducerPath = pathOpt ?? this.reducerPath
-        injectable.inject({ reducerPath, reducer: this.reducer }, config)
+        const newReducerPath = pathOpt ?? reducerPath
+        injectable.inject({ reducerPath: newReducerPath, reducer }, config)
         return {
-          ...this,
-          reducerPath,
+          ...slice,
+          ...makeSelectorProps(newReducerPath, true),
         } as any
       },
     }
@@ -818,16 +836,16 @@ export function buildCreateSlice({ creators }: BuildCreateSliceConfig = {}) {
 }
 
 function wrapSelector<State, NewState, S extends Selector<State>>(
-  slice: Slice,
   selector: S,
   selectState: Selector<NewState, State>,
+  getInitialState: () => State,
   injected?: boolean
 ) {
   function wrapper(rootState: NewState, ...args: any[]) {
-    let sliceState = selectState.call(slice, rootState)
+    let sliceState = selectState(rootState)
     if (typeof sliceState === 'undefined') {
       if (injected) {
-        sliceState = slice.getInitialState()
+        sliceState = getInitialState()
       } else if (process.env.NODE_ENV !== 'production') {
         throw new Error(
           'selectState returned undefined for an uninjected slice reducer'

packages/toolkit/src/listenerMiddleware/index.ts

@@ -46,6 +46,7 @@ import {
   addAbortSignalListener,
   assertFunction,
   catchRejection,
+  noop,
 } from './utils'
 export { TaskAbortError } from './exceptions'
 export type {
@@ -115,7 +116,7 @@ const createFork = (
     )
 
     if (opts?.autoJoin) {
-      parentBlockingPromises.push(result)
+      parentBlockingPromises.push(result.catch(noop))
     }
 
     return {
@@ -440,7 +441,7 @@ export const createListenerMiddleware = <
         })
       }
     } finally {
-      await Promise.allSettled(autoJoinPromises)
+      await Promise.all(autoJoinPromises)
 
       abortControllerWithReason(internalTaskController, listenerCompleted) // Notify that the task has completed
       entry.pending.delete(internalTaskController)

packages/toolkit/src/query/core/buildMiddleware/cacheLifecycle.ts

@@ -253,7 +253,9 @@ export const buildCacheLifecycleHandler: InternalHandlerBuilder = ({
 
   function getCacheKey(action: any) {
     if (isQueryThunk(action)) return action.meta.arg.queryCacheKey
-    if (isMutationThunk(action)) return action.meta.requestId
+    if (isMutationThunk(action)) {
+      return action.meta.arg.fixedCacheKey ?? action.meta.requestId
+    }
     if (api.internalActions.removeQueryResult.match(action))
       return action.payload.queryCacheKey
     if (api.internalActions.removeMutationResult.match(action))

packages/toolkit/src/query/core/buildSelectors.ts

@@ -1,4 +1,5 @@
-import { createNextState, createSelector } from './rtkImports'
+import type { createSelector as _createSelector } from './rtkImports'
+import { createNextState } from './rtkImports'
 import type {
   MutationSubState,
   QuerySubState,
@@ -123,9 +124,11 @@ export function buildSelectors<
 >({
   serializeQueryArgs,
   reducerPath,
+  createSelector,
 }: {
   serializeQueryArgs: InternalSerializeQueryArgs
   reducerPath: ReducerPath
+  createSelector: typeof _createSelector
 }) {
   type RootState = _RootState<Definitions, string, string>
 

packages/toolkit/src/query/core/module.ts

@@ -49,6 +49,7 @@ import type { ReferenceCacheLifecycle } from './buildMiddleware/cacheLifecycle'
 import type { ReferenceQueryLifecycle } from './buildMiddleware/queryLifecycle'
 import type { ReferenceCacheCollection } from './buildMiddleware/cacheCollection'
 import { enablePatches } from 'immer'
+import { createSelector as _createSelector } from './rtkImports'
 
 /**
  * `ifOlderThan` - (default: `false` | `number`) - _number is value in seconds_
@@ -431,6 +432,13 @@ export type ListenerActions = {
 
 export type InternalActions = SliceActions & ListenerActions
 
+export interface CoreModuleOptions {
+  /**
+   * A selector creator (usually from `reselect`, or matching the same signature)
+   */
+  createSelector?: typeof _createSelector
+}
+
 /**
  * Creates a module containing the basic redux logic for use with `buildCreateApi`.
  *
@@ -439,7 +447,9 @@ export type InternalActions = SliceActions & ListenerActions
  * const createBaseApi = buildCreateApi(coreModule());
  * ```
  */
-export const coreModule = (): Module<CoreModule> => ({
+export const coreModule = ({
+  createSelector = _createSelector,
+}: CoreModuleOptions = {}): Module<CoreModule> => ({
   name: coreModuleName,
   init(
     api,
@@ -548,6 +558,7 @@ export const coreModule = (): Module<CoreModule> => ({
     } = buildSelectors({
       serializeQueryArgs: serializeQueryArgs as any,
       reducerPath,
+      createSelector,
     })
 
     safeAssign(api.util, { selectInvalidatedBy, selectCachedArgsForQuery })

packages/toolkit/src/query/react/buildHooks.ts

@@ -4,7 +4,6 @@ import type {
   ThunkAction,
   ThunkDispatch,
 } from '@reduxjs/toolkit'
-import { createSelector } from '@reduxjs/toolkit'
 import type { DependencyList } from 'react'
 import {
   useCallback,
@@ -53,10 +52,7 @@ import { UNINITIALIZED_VALUE } from './constants'
 import { useShallowStableValue } from './useShallowStableValue'
 import type { BaseQueryFn } from '../baseQueryTypes'
 import { defaultSerializeQueryArgs } from '../defaultSerializeQueryArgs'
-import {
-  InternalMiddlewareState,
-  SubscriptionSelectors,
-} from '../core/buildMiddleware/types'
+import type { SubscriptionSelectors } from '../core/buildMiddleware/types'
 
 // Copy-pasted from React-Redux
 export const useIsomorphicLayoutEffect =
@@ -582,6 +578,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
     batch,
     hooks: { useDispatch, useSelector, useStore },
     unstable__sideEffectsInRender,
+    createSelector,
   },
   serializeQueryArgs,
   context,