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

Author: aryaemami59

.codesandbox/ci.json

@@ -2,7 +2,6 @@
   "sandboxes": [
     "vanilla",
     "vanilla-ts",
-    "github/reduxjs/rtk-github-issues-example",
     "/examples/query/react/basic",
     "/examples/query/react/advanced",
     "/examples/action-listener/counter",

.github/workflows/tests.yml

@@ -106,7 +106,7 @@ jobs:
       fail-fast: false
       matrix:
         node: ['20.x']
-        ts: ['4.7', '4.8', '4.9', '5.0', '5.1', '5.2', '5.3']
+        ts: ['4.7', '4.8', '4.9', '5.0', '5.1', '5.2', '5.3', '5.4']
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4

examples/query/react/graphql-codegen/package.json

@@ -42,9 +42,6 @@
     "ts-node": "^10.0.0",
     "typescript": "4.1.3"
   },
-  "resolutions": {
-    "@typescript-eslint/parser": "4.4.1"
-  },
   "scripts": {
     "develop": "cross-env CHOKIDAR_USEPOLLING=true yarn start",
     "start": "concurrently --restart-tries 20 'npm:watch-*'",

package.json

@@ -24,10 +24,18 @@
     "packages/configs/*"
   ],
   "devDependencies": {
+    "@babel/code-frame": "^7.24.2",
+    "@babel/core": "^7.24.3",
+    "@babel/generator": "^7.24.1",
+    "@babel/helper-compilation-targets": "^7.23.6",
+    "@babel/traverse": "^7.24.1",
+    "@babel/types": "^7.24.0",
     "@reduxjs/eslint-config": "workspace:^",
     "@reduxjs/prettier-config": "workspace:^",
     "@reduxjs/tsconfig": "workspace:^",
     "@reduxjs/vitest-config": "workspace:^",
+    "@types/react": "^18.2.77",
+    "@types/react-dom": "^18.2.25",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
     "eslint": "^7.25.0",
@@ -41,36 +49,17 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "netlify-plugin-cache": "^1.0.3",
     "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-redux": "^9.1.0",
     "release-it": "^14.12.5",
     "serve": "^14.2.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.2.2"
+    "typescript": "^5.4.3"
   },
   "resolutions": {
-    "@babel/core": "7.19.3",
-    "@babel/code-frame": "7.18.6",
-    "@babel/generator": "7.19.3",
-    "@babel/helper-compilation-targets": "7.19.3",
-    "@babel/traverse": "7.19.3",
-    "@babel/types": "7.19.3",
     "esbuild": "0.19.7",
     "jest-snapshot": "29.3.1",
-    "react": "npm:^18.2.0",
-    "react-dom": "npm:18.2.0",
-    "resolve": "1.22.1",
-    "@types/react": "npm:^18.0.12",
-    "@types/react-dom": "npm:18.0.5",
-    "@types/inquirer": "npm:8.2.1",
-    "website/react": "npm:17.0.2",
-    "website/react-dom": "npm:17.0.2",
-    "website/@types/react-dom": "npm:17.0.11",
-    "website/@types/react": "npm:17.0.11",
-    "docs/react": "npm:17.0.2",
-    "docs/react-dom": "npm:17.0.2",
-    "docs/@types/react-dom": "npm:17.0.11",
-    "docs/@types/react": "npm:17.0.11",
-    "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"
   },
   "scripts": {

packages/toolkit/.size-limit.cjs

@@ -5,9 +5,9 @@ const esmSuffixes = ['modern.mjs' /*, 'browser.mjs', 'legacy-esm.js'*/]
 const cjsSuffixes = [/*'development.cjs',*/ 'production.min.cjs']
 
 /**
-   * @param {string} suffix
-   * @param {boolean} cjs
-   */
+ * @param {string} suffix
+ * @param {boolean} cjs
+ */
 function withRtkPath(suffix, cjs = false) {
   /**
    * @param {string} name

packages/toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reduxjs/toolkit",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "The official, opinionated, batteries-included toolset for efficient Redux development",
   "author": "Mark Erikson <[email protected]>",
   "license": "MIT",
@@ -89,7 +89,7 @@
     "tslib": "^1.10.0",
     "tsup": "^7.2.0",
     "tsx": "^3.12.2",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.5",
     "vitest": "^1.5.2",
     "yargs": "^15.3.1"
   },

packages/toolkit/src/createAsyncThunk.ts

@@ -115,7 +115,7 @@ export const miniSerializeError = (value: any): SerializedError => {
 
 export interface AsyncThunkConfig {
   state?: unknown
-  dispatch?: Dispatch
+  dispatch?: ThunkDispatch<unknown, unknown, UnknownAction>
   extra?: unknown
   rejectValue?: unknown
   serializedErrorType?: unknown
@@ -239,7 +239,7 @@ export type AsyncThunkAction<
   ThunkArg,
   ThunkApiConfig extends AsyncThunkConfig,
 > = (
-  dispatch: GetDispatch<ThunkApiConfig>,
+  dispatch: NonNullable<GetDispatch<ThunkApiConfig>>,
   getState: () => GetState<ThunkApiConfig>,
   extra: GetExtra<ThunkApiConfig>,
 ) => SafePromise<
@@ -576,7 +576,7 @@ export const createAsyncThunk = /* @__PURE__ */ (() => {
 
     function actionCreator(
       arg: ThunkArg,
-    ): AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig> {
+    ): AsyncThunkAction<Returned, ThunkArg, Required<ThunkApiConfig>> {
       return (dispatch, getState, extra) => {
         const requestId = options?.idGenerator
           ? options.idGenerator(arg)

packages/toolkit/src/createSlice.ts

@@ -433,15 +433,7 @@ export interface ReducerCreators<State> {
  * @public
  */
 export type SliceCaseReducers<State> =
-  | Record<
-      string,
-      | CaseReducerDefinition<State, PayloadAction<any>>
-      | CaseReducerWithPrepareDefinition<
-          State,
-          PayloadAction<any, string, any, any>
-        >
-      | AsyncThunkSliceReducerDefinition<State, any, any, any>
-    >
+  | Record<string, ReducerDefinition>
   | Record<
       string,
       | CaseReducer<State, PayloadAction<any>>
@@ -699,7 +691,7 @@ export function buildCreateSlice({ creators }: BuildCreateSliceConfig = {}) {
       } else {
         handleNormalReducerDefinition<State>(
           reducerDetails,
-          reducerDefinition,
+          reducerDefinition as any,
           contextMethods,
         )
       }

packages/toolkit/src/entities/sorted_state_adapter.ts

@@ -1,3 +1,4 @@
+import { current } from 'immer'
 import type {
   Comparer,
   DraftableEntityState,
@@ -10,13 +11,48 @@ import { createStateOperator } from './state_adapter'
 import { createUnsortedStateAdapter } from './unsorted_state_adapter'
 import {
   ensureEntitiesArray,
+  getCurrent,
   selectIdValue,
   splitAddedUpdatedEntities,
 } from './utils'
 
+// Borrowed from Replay
+export function findInsertIndex<T>(
+  sortedItems: T[],
+  item: T,
+  comparisonFunction: Comparer<T>,
+): number {
+  let lowIndex = 0
+  let highIndex = sortedItems.length
+  while (lowIndex < highIndex) {
+    const middleIndex = (lowIndex + highIndex) >>> 1
+    const currentItem = sortedItems[middleIndex]
+    const res = comparisonFunction(item, currentItem)
+    if (res >= 0) {
+      lowIndex = middleIndex + 1
+    } else {
+      highIndex = middleIndex
+    }
+  }
+
+  return lowIndex
+}
+
+export function insert<T>(
+  sortedItems: T[],
+  item: T,
+  comparisonFunction: Comparer<T>,
+): T[] {
+  const insertAtIndex = findInsertIndex(sortedItems, item, comparisonFunction)
+
+  sortedItems.splice(insertAtIndex, 0, item)
+
+  return sortedItems
+}
+
 export function createSortedStateAdapter<T, Id extends EntityId>(
   selectId: IdSelector<T, Id>,
-  sort: Comparer<T>,
+  comparer: Comparer<T>,
 ): EntityStateAdapter<T, Id> {
   type R = DraftableEntityState<T, Id>
 
@@ -30,15 +66,20 @@ export function createSortedStateAdapter<T, Id extends EntityId>(
   function addManyMutably(
     newEntities: readonly T[] | Record<Id, T>,
     state: R,
+    existingIds?: Id[],
   ): void {
     newEntities = ensureEntitiesArray(newEntities)
 
+    const existingKeys = new Set<Id>(
+      existingIds ?? (current(state.ids) as Id[]),
+    )
+
     const models = newEntities.filter(
-      (model) => !(selectIdValue(model, selectId) in state.entities),
+      (model) => !existingKeys.has(selectIdValue(model, selectId)),
     )
 
     if (models.length !== 0) {
-      merge(models, state)
+      mergeFunction(state, models)
     }
   }
 
@@ -52,7 +93,10 @@ export function createSortedStateAdapter<T, Id extends EntityId>(
   ): void {
     newEntities = ensureEntitiesArray(newEntities)
     if (newEntities.length !== 0) {
-      merge(newEntities, state)
+      for (const item of newEntities) {
+        delete (state.entities as Record<Id, T>)[selectId(item)]
+      }
+      mergeFunction(state, newEntities)
     }
   }
 
@@ -64,7 +108,7 @@ export function createSortedStateAdapter<T, Id extends EntityId>(
     state.entities = {} as Record<Id, T>
     state.ids = []
 
-    addManyMutably(newEntities, state)
+    addManyMutably(newEntities, state, [])
   }
 
   function updateOneMutably(update: Update<T, Id>, state: R): void {
@@ -76,6 +120,7 @@ export function createSortedStateAdapter<T, Id extends EntityId>(
     state: R,
   ): void {
     let appliedUpdates = false
+    let replacedIds = false
 
     for (const update of updates) {
       const entity: T | undefined = (state.entities as Record<Id, T>)[update.id]
@@ -87,14 +132,20 @@ export function createSortedStateAdapter<T, Id extends EntityId>(
 
       Object.assign(entity, update.changes)
       const newId = selectId(entity)
+
       if (update.id !== newId) {
+        // We do support the case where updates can change an item's ID.
+        // This makes things trickier - go ahead and swap the IDs in state now.
+        replacedIds = true
         delete (state.entities as Record<Id, T>)[update.id]
+        const oldIndex = (state.ids as Id[]).indexOf(update.id)
+        state.ids[oldIndex] = newId
         ;(state.entities as Record<Id, T>)[newId] = entity
       }
     }
 
     if (appliedUpdates) {
-      resortEntities(state)
+      mergeFunction(state, [], appliedUpdates, replacedIds)
     }
   }
 
@@ -106,14 +157,18 @@ export function createSortedStateAdapter<T, Id extends EntityId>(
     newEntities: readonly T[] | Record<Id, T>,
     state: R,
   ): void {
-    const [added, updated] = splitAddedUpdatedEntities<T, Id>(
+    const [added, updated, existingIdsArray] = splitAddedUpdatedEntities<T, Id>(
       newEntities,
       selectId,
       state,
     )
 
-    updateManyMutably(updated, state)
-    addManyMutably(added, state)
+    if (updated.length) {
+      updateManyMutably(updated, state)
+    }
+    if (added.length) {
+      addManyMutably(added, state, existingIdsArray)
+    }
   }
 
   function areArraysEqual(a: readonly unknown[], b: readonly unknown[]) {
@@ -130,27 +185,65 @@ export function createSortedStateAdapter<T, Id extends EntityId>(
     return true
   }
 
-  function merge(models: readonly T[], state: R): void {
+  type MergeFunction = (
+    state: R,
+    addedItems: readonly T[],
+    appliedUpdates?: boolean,
+    replacedIds?: boolean,
+  ) => void
+
+  const mergeInsertion: MergeFunction = (
+    state,
+    addedItems,
+    appliedUpdates,
+    replacedIds,
+  ) => {
+    const currentEntities = getCurrent(state.entities) as Record<Id, T>
+    const currentIds = getCurrent(state.ids) as Id[]
+
+    const stateEntities = state.entities as Record<Id, T>
+
+    let ids = currentIds
+    if (replacedIds) {
+      ids = Array.from(new Set(currentIds))
+    }
+
+    let sortedEntities: T[] = []
+    for (const id of ids) {
+      const entity = currentEntities[id]
+      if (entity) {
+        sortedEntities.push(entity)
+      }
+    }
+    const wasPreviouslyEmpty = sortedEntities.length === 0
+
     // Insert/overwrite all new/updated
-    models.forEach((model) => {
-      ;(state.entities as Record<Id, T>)[selectId(model)] = model
-    })
+    for (const item of addedItems) {
+      stateEntities[selectId(item)] = item
 
-    resortEntities(state)
-  }
+      if (!wasPreviouslyEmpty) {
+        // Binary search insertion generally requires fewer comparisons
+        insert(sortedEntities, item, comparer)
+      }
+    }
 
-  function resortEntities(state: R) {
-    const allEntities = Object.values(state.entities) as T[]
-    allEntities.sort(sort)
+    if (wasPreviouslyEmpty) {
+      // All we have is the incoming values, sort them
+      sortedEntities = addedItems.slice().sort(comparer)
+    } else if (appliedUpdates) {
+      // We should have a _mostly_-sorted array already
+      sortedEntities.sort(comparer)
+    }
 
-    const newSortedIds = allEntities.map(selectId)
-    const { ids } = state
+    const newSortedIds = sortedEntities.map(selectId)
 
-    if (!areArraysEqual(ids, newSortedIds)) {
+    if (!areArraysEqual(currentIds, newSortedIds)) {
       state.ids = newSortedIds
     }
   }
 
+  const mergeFunction: MergeFunction = mergeInsertion
+
   return {
     removeOne,
     removeMany,