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

Author: aryaemami59

.github/workflows/tests.yml

@@ -99,6 +99,60 @@ jobs:
           TEST_DIST: true
         run: yarn test
 
+      - name: Run type tests with `moduleResolution Bundler`
+        run: rm -rf dist && yarn tsc -p . --moduleResolution Bundler --module ESNext --noEmit false --declaration --emitDeclarationOnly --outDir dist --target ESNext && rm -rf dist
+
+  test-type-portability:
+    name: Test Type Portability with TypeScript ${{ matrix.ts }} and Node.js ${{ matrix.node }}
+    needs: [build]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node: ['20.x']
+        ts: ['5.0', '5.1', '5.2', '5.3', '5.4', '5.5', 'next']
+        example:
+          [
+            { name: 'bundler', moduleResolution: 'Bundler' },
+            { name: 'nodenext-cjs', moduleResolution: 'NodeNext' },
+            { name: 'nodenext-esm', moduleResolution: 'NodeNext' },
+          ]
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Use node ${{ matrix.node }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'yarn'
+
+      - name: Install deps
+        run: yarn install
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: package
+          path: packages/toolkit
+
+      - name: Install build artifact
+        run: yarn workspace @examples-type-portability/${{ matrix.example.name }} add $(pwd)/package.tgz
+
+      - name: Install TypeScript ${{ matrix.ts }}
+        run: yarn workspace @examples-type-portability/${{ matrix.example.name }} add -D typescript@${{ matrix.ts }}
+
+      - name: Test type portability with `moduleResolution ${{ matrix.example.moduleResolution }}`
+        run: yarn workspace @examples-type-portability/${{ matrix.example.name }} run test
+
+      - name: Test type portability with `moduleResolution Node10`
+        run: yarn workspace @examples-type-portability/${{ matrix.example.name }} run test --module CommonJS --moduleResolution Node10 --preserveSymLinks --verbatimModuleSyntax false
+
+      - name: Test type portability with `moduleResolution Node10` and `type module` in `package.json`
+        if: matrix.example.name == 'nodenext-esm' || matrix.example.name == 'bundler'
+        run: |
+          npm --workspace=@examples-type-portability/${{ matrix.example.name }} pkg set type=module
+          yarn workspace @examples-type-portability/${{ matrix.example.name }} run test --module ESNext --moduleResolution Node10 --preserveSymLinks --verbatimModuleSyntax false
+
   test-types:
     name: Test Types with TypeScript ${{ matrix.ts }}
 

.yarn/patches/console-testing-library-npm-0.6.1-4d9957d402.patch

@@ -1,11 +1,38 @@
+diff --git a/package.json b/package.json
+index b924e066ecfdb30917b9c1056b360834da357698..15e155bd84f9d16537ffe36f9a87debcb0ec3591 100644
+--- a/package.json
++++ b/package.json
+@@ -8,12 +8,15 @@
+   "type": "module",
+   "main": "dist/index.js",
+   "typings": "index.d.ts",
++  "types": "index.d.ts",
+   "exports": {
+     ".": {
++      "types": "./index.d.ts",
+       "require": "./dist/index.js",
+       "default": "./src/index.js"
+     },
+     "./pure": {
++      "types": "./pure.d.ts",
+       "require": "./dist/pure.js",
+       "default": "./src/pure.js"
+     }
+diff --git a/pure.d.ts b/pure.d.ts
+index b13bb4eb87d0b316bb51bd6094b2353c6fc8527d..ee01cc9bd3233f5e67b050d48e22202b495a4a0a 100644
+--- a/pure.d.ts
++++ b/pure.d.ts
+@@ -1 +1 @@
+-export * from './';
++export * from './index.js';
 diff --git a/src/index.js b/src/index.js
 index 90ff7fa3d7d4fa62dbbf638958ae4e28abd089a8..28434687b5163b7472e86bdb11bed69e0868e660 100644
 --- a/src/index.js
 +++ b/src/index.js
 @@ -1,4 +1,4 @@
 -import { mockConsole, createConsole } from './pure';
 +import { mockConsole, createConsole } from './pure.js';
- 
+
  // Keep an instance of the original console and export it
  const originalConsole = global.console;
 diff --git a/src/pure.js b/src/pure.js
@@ -15,7 +42,7 @@ index b00ea2abbaea833e336676aa46e7ced2d59d6d88..42b83ed83fa16cf2234571500fe09868
 @@ -228,10 +228,11 @@ export function restore() {
    global.console = global.originalConsole;
  }
- 
+
 +/*
  if (typeof expect === 'function' && typeof expect.extend === 'function') {
    expect.extend({
@@ -24,13 +51,13 @@ index b00ea2abbaea833e336676aa46e7ced2d59d6d88..42b83ed83fa16cf2234571500fe09868
 +      // Workaround for custom inline snapshot matchers
        const error = new Error();
        const stacks = error.stack.split('\n');
- 
+
 @@ -245,7 +246,6 @@ if (typeof expect === 'function' && typeof expect.extend === 'function') {
        error.stack = stacks.join('\n');
- 
+
        const context = Object.assign(this, { error });
 -      /* -------------------------------------------------------------- */
- 
+
        const testingConsoleInstance =
          (received && received.testingConsole) || received;
 @@ -270,3 +270,4 @@ if (typeof expect === 'function' && typeof expect.extend === 'function') {

docs/api/createListenerMiddleware.mdx

@@ -488,11 +488,14 @@ To fix this, the middleware provides types for defining "pre-typed" versions of
 import { createListenerMiddleware, addListener } from '@reduxjs/toolkit'
 import type { RootState, AppDispatch } from './store'
 
+declare type ExtraArgument = {foo: string};
+
 export const listenerMiddleware = createListenerMiddleware()
 
 export const startAppListening = listenerMiddleware.startListening.withTypes<
   RootState,
-  AppDispatch
+  AppDispatch,
+  ExtraArgument
 >()
 
 export const addAppListener = addListener.withTypes<RootState, AppDispatch>()

docs/rtk-query/internal/buildMiddleware/invalidationByTags.mdx

@@ -64,7 +64,7 @@ const handler: ApiMiddlewareInternalHandler = (action, mwApi) => {
    1. invalidateTags function is called with a list of tags generated from the action metadata
    2. in the case of a [queryThunk] resolution an empty set of tags is always provided
 2. The tags calculated are added to the list of pending tags to invalidate (see [delayed](#Delayed))
-3. (optional: 'Delayed') the invalidateTags function is ended if the `apiSlice.invalidationBehaviour` is set to "delayed" and there are any pending thunks/queries running in that `apiSlice`
+3. (optional: 'Delayed') the invalidateTags function is ended if the `apiSlice.invalidationBehavior` is set to "delayed" and there are any pending thunks/queries running in that `apiSlice`
 4. Pending tags are reset to an empty list, if there are no tags the function ends here
 5. Selects all `{ endpointName, originalArgs, queryCacheKey }` combinations that would be invalidated by a specific set of tags.
 6. Iterates through queryCacheKeys selected and performs one of two actions if the query exists\*
@@ -102,7 +102,7 @@ Step 6 is performed within a `context.batch()` call.
 
 RTKQ now has internal logic to delay tag invalidation briefly, to allow multiple invalidations to get handled together. This is controlled by a new `invalidationBehavior: 'immediate' | 'delayed'` flag on `createApi`. The new default behavior is `'delayed'`. Set it to `'immediate'` to revert to the behavior in RTK 1.9.
 
-The `'delayed'` behaviour enables a check inside `invalidationByTags` that will cause any invalidation that is triggered while a query/mutation is still pending to batch the invalidation until no query/mutation is running.
+The `'delayed'` behavior enables a check inside `invalidationByTags` that will cause any invalidation that is triggered while a query/mutation is still pending to batch the invalidation until no query/mutation is running.
 
 ```ts no-transpile
 function invalidateTags(

examples/publish-ci/react-native/App.test.tsx

@@ -1,4 +1,10 @@
+import type { Action, Dispatch } from "@reduxjs/toolkit"
+import { configureStore } from "@reduxjs/toolkit"
 import { screen, waitFor } from "@testing-library/react-native"
+import { Component, PureComponent, type PropsWithChildren } from "react"
+import type { TextStyle } from "react-native"
+import { Button, Text, View } from "react-native"
+import { connect, Provider } from "react-redux"
 import { App } from "./App"
 import { renderWithProviders } from "./src/utils/test-utils"
 
@@ -103,3 +109,207 @@ test("Add If Odd should work as expected", async () => {
   await user.press(screen.getByText("Add If Odd"))
   expect(screen.getByLabelText("Count")).toHaveTextContent("4")
 })
+
+test("React-Redux issue #2150: Nested component updates should be properly batched when using connect", async () => {
+  // Original Issue: https://github.com/reduxjs/react-redux/issues/2150
+  // Solution: https://github.com/reduxjs/react-redux/pull/2156
+
+  // Actions
+  const ADD = "ADD"
+  const DATE = "DATE"
+
+  // Action types
+  interface AddAction extends Action<string> {}
+  interface DateAction extends Action<string> {
+    payload?: { date: number }
+  }
+
+  // Reducer states
+  interface DateState {
+    date: number | null
+  }
+
+  interface CounterState {
+    count: number
+  }
+
+  // Reducers
+  const dateReducer = (
+    state: DateState = { date: null },
+    action: DateAction,
+  ) => {
+    switch (action.type) {
+      case DATE:
+        return {
+          ...state,
+          date: action.payload?.date ?? null,
+        }
+      default:
+        return state
+    }
+  }
+
+  const counterReducer = (
+    state: CounterState = { count: 0 },
+    action: AddAction,
+  ) => {
+    switch (action.type) {
+      case ADD:
+        return {
+          ...state,
+          count: state.count + 1,
+        }
+      default:
+        return state
+    }
+  }
+
+  // Store
+  const store = configureStore({
+    reducer: {
+      counter: counterReducer,
+      dates: dateReducer,
+    },
+  })
+
+  // ======== COMPONENTS =========
+  interface CounterProps {
+    count?: number
+    date?: number | null
+    dispatch: Dispatch<AddAction | DateAction>
+    testID?: string
+  }
+
+  class CounterRaw extends PureComponent<CounterProps> {
+    handleIncrement = () => {
+      this.props.dispatch({ type: ADD })
+    }
+
+    handleDate = () => {
+      this.props.dispatch({ type: DATE, payload: { date: Date.now() } })
+    }
+
+    render() {
+      return (
+        <View style={{ paddingVertical: 20 }}>
+          <Text testID={`${this.props.testID}-child`}>
+            Counter Value: {this.props.count}
+          </Text>
+          <Text>date Value: {this.props.date}</Text>
+        </View>
+      )
+    }
+  }
+
+  class ButtonsRaw extends PureComponent<CounterProps> {
+    handleIncrement = () => {
+      this.props.dispatch({ type: ADD })
+    }
+
+    handleDate = () => {
+      this.props.dispatch({ type: DATE, payload: { date: Date.now() } })
+    }
+
+    render() {
+      return (
+        <View>
+          <Button title="Update Date" onPress={this.handleDate} />
+          <View style={{ height: 20 }} />
+          <Button title="Increment Counter" onPress={this.handleIncrement} />
+        </View>
+      )
+    }
+  }
+
+  const mapStateToProps = (state: {
+    counter: CounterState
+    dates: DateState
+  }) => {
+    return { count: state.counter.count, date: state.dates.date }
+  }
+
+  const mapDispatchToProps = (dispatch: Dispatch<AddAction | DateAction>) => ({
+    dispatch,
+  })
+
+  const Buttons = connect(null, mapDispatchToProps)(ButtonsRaw)
+  const Counter = connect(mapStateToProps, mapDispatchToProps)(CounterRaw)
+
+  class Container extends PureComponent<PropsWithChildren> {
+    render() {
+      return this.props.children
+    }
+  }
+
+  const mapStateToPropsBreaking = (_state: any) => ({})
+
+  const ContainerBad = connect(mapStateToPropsBreaking, null)(Container)
+
+  const mapStateToPropsNonBlocking1 = (state: { counter: CounterState }) => ({
+    count: state.counter.count,
+  })
+
+  const ContainerNonBlocking1 = connect(
+    mapStateToPropsNonBlocking1,
+    null,
+  )(Container)
+
+  const mapStateToPropsNonBlocking2 = (state: any) => ({ state })
+
+  const ContainerNonBlocking2 = connect(
+    mapStateToPropsNonBlocking2,
+    null,
+  )(Container)
+
+  class MainApp extends Component {
+    render() {
+      const $H1: TextStyle = { fontSize: 20 }
+      return (
+        <Provider store={store}>
+          <Buttons />
+          <Text style={$H1}>=Expected=</Text>
+          <View>
+            <Text>
+              I don't have a parent blocking state updates so I should behave as
+              expected
+            </Text>
+            <Counter />
+          </View>
+
+          <Text style={$H1}>=Undesired behavior with react-redux 9.x=</Text>
+          <ContainerBad>
+            <Text>All redux state updates blocked</Text>
+            <Counter testID="undesired" />
+          </ContainerBad>
+
+          <Text style={$H1}>=Partially working in 9.x=</Text>
+          <ContainerNonBlocking1>
+            <Text>
+              I'm inconsistent, if date updates first I don't see it, but once
+              count updates I rerender with count or date changes
+            </Text>
+            <Counter testID="inconsistent" />
+          </ContainerNonBlocking1>
+
+          <Text style={$H1}>=Poor workaround for 9.x?=</Text>
+          <ContainerNonBlocking2>
+            <Text>I see all state changes</Text>
+            <Counter />
+          </ContainerNonBlocking2>
+        </Provider>
+      )
+    }
+  }
+
+  const { user, getByTestId, getByText } = renderWithProviders(<MainApp />)
+
+  expect(getByTestId("undesired-child")).toHaveTextContent("Counter Value: 0")
+
+  await user.press(getByText("Increment Counter"))
+
+  expect(getByTestId("inconsistent-child")).toHaveTextContent(
+    "Counter Value: 1",
+  )
+
+  expect(getByTestId("undesired-child")).toHaveTextContent("Counter Value: 1")
+})