Merge pull request #1772 from reduxjs/feature/thunk-type-updates

Author: markerikson

packages/action-listener-middleware/src/tests/listenerMiddleware.test.ts

@@ -347,6 +347,8 @@ describe('createActionListenerMiddleware', () => {
         listener,
       })
     )
+    // TODO This hopefully will be resolved in RTK 1.7 / thunk 2.4.1
+    // @ts-expect-error
     expectType<Action<'actionListenerMiddleware/add'>>(unsubscribe)
 
     store.dispatch(testAction1('a'))

packages/toolkit/package.json

@@ -100,14 +100,14 @@
     "query"
   ],
   "dependencies": {
-    "immer": "^9.0.6",
+    "immer": "^9.0.7",
     "redux": "^4.1.2",
-    "redux-thunk": "^2.4.0",
-    "reselect": "^4.1.2"
+    "redux-thunk": "^2.4.1",
+    "reselect": "^4.1.5"
   },
   "peerDependencies": {
-    "react": "^16.9.0 || ^17.0.0",
-    "react-redux": "^7.2.1"
+    "react": "^16.9.0 || ^17.0.0 || 18.0.0-beta",
+    "react-redux": "^7.2.1 || ^8.0.0-beta"
   },
   "peerDependenciesMeta": {
     "react": {

packages/toolkit/src/configureStore.ts

@@ -110,7 +110,7 @@ export interface EnhancedStore<
    *
    * @inheritdoc
    */
-  dispatch: DispatchForMiddlewares<M> & Dispatch<A>
+  dispatch: Dispatch<A> & DispatchForMiddlewares<M>
 }
 
 /**

packages/toolkit/src/entities/state_selectors.ts

@@ -1,3 +1,4 @@
+import type { Selector } from 'reselect'
 import { createDraftSafeSelector } from '../createDraftSafeSelector'
 import type {
   EntityState,
@@ -11,21 +12,20 @@ export function createSelectorsFactory<T>() {
   function getSelectors<V>(
     selectState: (state: V) => EntityState<T>
   ): EntitySelectors<T, V>
-  function getSelectors(
-    selectState?: (state: any) => EntityState<T>
+  function getSelectors<V>(
+    selectState?: (state: V) => EntityState<T>
   ): EntitySelectors<T, any> {
-    const selectIds = (state: any) => state.ids
+    const selectIds = (state: EntityState<T>) => state.ids
 
     const selectEntities = (state: EntityState<T>) => state.entities
 
     const selectAll = createDraftSafeSelector(
       selectIds,
       selectEntities,
-      (ids: readonly T[], entities: Dictionary<T>): any =>
-        ids.map((id: any) => (entities as any)[id])
+      (ids, entities): T[] => ids.map((id) => entities[id]!)
     )
 
-    const selectId = (_: any, id: EntityId) => id
+    const selectId = (_: unknown, id: EntityId) => id
 
     const selectById = (entities: Dictionary<T>, id: EntityId) => entities[id]
 
@@ -46,7 +46,7 @@ export function createSelectorsFactory<T>() {
     }
 
     const selectGlobalizedEntities = createDraftSafeSelector(
-      selectState,
+      selectState as Selector<V, EntityState<T>>,
       selectEntities
     )
 

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

@@ -1,5 +1,5 @@
 import type { AnyAction, ThunkAction, ThunkDispatch } from '@reduxjs/toolkit'
-import { createSelector } from '@reduxjs/toolkit'
+import { createSelector, Selector } from '@reduxjs/toolkit'
 import type { DependencyList } from 'react'
 import {
   useCallback,
@@ -556,7 +556,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
           endpointName,
         })
       )
-      lastResult = undefined
+        lastResult = undefined
     }
 
     // data is the last known good request result we have tracked - or if none has been tracked yet the last good result for the current args
@@ -789,22 +789,24 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
         name
       )
 
+      type ApiRootState = Parameters<ReturnType<typeof select>>[0]
+
       const lastValue = useRef<any>()
 
-      const selectDefaultResult = useMemo(
+      const selectDefaultResult: Selector<ApiRootState, any, [any]> = useMemo(
         () =>
           createSelector(
             [
               select(stableArg),
-              (_: any, lastResult: any) => lastResult,
-              () => stableArg,
+              (_: ApiRootState, lastResult: any) => lastResult,
+              (_: ApiRootState) => stableArg,
             ],
             queryStatePreSelector
           ),
         [select, stableArg]
       )
 
-      const querySelector = useMemo(
+      const querySelector: Selector<ApiRootState, any, [any]> = useMemo(
         () => createSelector([selectDefaultResult], selectFromResult),
         [selectDefaultResult, selectFromResult]
       )

packages/toolkit/src/tests/configureStore.typetest.ts

@@ -2,7 +2,11 @@
 import type { Dispatch, AnyAction, Middleware, Reducer, Store } from 'redux'
 import { applyMiddleware } from 'redux'
 import type { PayloadAction } from '@reduxjs/toolkit'
-import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
+import {
+  configureStore,
+  getDefaultMiddleware,
+  createSlice,
+} from '@reduxjs/toolkit'
 import type { ThunkMiddleware, ThunkAction } from 'redux-thunk'
 import thunk, { ThunkDispatch } from 'redux-thunk'
 import { expectNotAny, expectType } from './helpers'
@@ -187,6 +191,60 @@ const _anyMiddleware: any = () => () => () => {}
     store.dispatch(thunkA())
     // @ts-expect-error
     store.dispatch(thunkB())
+
+    const res = store.dispatch((dispatch, getState) => {
+      return 42
+    })
+
+    const action = store.dispatch({ type: 'foo' })
+  }
+  /**
+   * Test: return type of thunks and actions is inferred correctly
+   */
+  {
+    const slice = createSlice({
+      name: 'counter',
+      initialState: {
+        value: 0,
+      },
+      reducers: {
+        incrementByAmount: (state, action: PayloadAction<number>) => {
+          state.value += action.payload
+        },
+      },
+    })
+
+    const store = configureStore({
+      reducer: {
+        counter: slice.reducer,
+      },
+    })
+
+    const action = slice.actions.incrementByAmount(2)
+
+    const dispatchResult = store.dispatch(action)
+    expectType<{ type: string; payload: number }>(dispatchResult)
+
+    const promiseResult = store.dispatch(async (dispatch) => {
+      return 42
+    })
+
+    expectType<Promise<number>>(promiseResult)
+
+    const store2 = configureStore({
+      reducer: {
+        counter: slice.reducer,
+      },
+      middleware: (gDM) =>
+        gDM({
+          thunk: {
+            extraArgument: 42,
+          },
+        }),
+    })
+
+    const dispatchResult2 = store2.dispatch(action)
+    expectType<{ type: string; payload: number }>(dispatchResult2)
   }
   /**
    * Test: removing the Thunk Middleware

yarn.lock

@@ -5080,7 +5080,7 @@ __metadata:
     eslint-plugin-react: ^7.23.2
     eslint-plugin-react-hooks: ^4.2.0
     fs-extra: ^9.1.0
-    immer: ^9.0.6
+    immer: ^9.0.7
     invariant: ^2.2.4
     jest: ^26.6.3
     json-stringify-safe: ^5.0.1
@@ -5091,8 +5091,8 @@ __metadata:
     prettier: ^2.2.1
     query-string: ^7.0.1
     redux: ^4.1.2
-    redux-thunk: ^2.4.0
-    reselect: ^4.1.2
+    redux-thunk: ^2.4.1
+    reselect: ^4.1.5
     rimraf: ^3.0.2
     rollup: ^2.47.0
     rollup-plugin-strip-code: ^0.2.6
@@ -5104,8 +5104,8 @@ __metadata:
     typescript: ~4.2.4
     yargs: ^15.3.1
   peerDependencies:
-    react: ^16.9.0 || ^17.0.0
-    react-redux: ^7.2.1
+    react: ^16.9.0 || ^17.0.0 || 18.0.0-beta
+    react-redux: ^7.2.1 || ^8.0.0-beta
   peerDependenciesMeta:
     react:
       optional: true
@@ -13923,6 +13923,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"immer@npm:^9.0.7":
+  version: 9.0.7
+  resolution: "immer@npm:9.0.7"
+  checksum: 3655ad64bf5ab5adf2854f7d2a9ad543f2cd995fcd169b6f10294f41fdb2cbcbd44d8beaa3e01b3c0b6149001190e57f6ab2cd735e6a929780b7462f2e973c9b
+  languageName: node
+  linkType: hard
+
 "immutable@npm:^3.8.2":
   version: 3.8.2
   resolution: "immutable@npm:3.8.2"
@@ -21085,7 +21092,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"redux-thunk@npm:^2.3.0, redux-thunk@npm:^2.4.0":
+"redux-thunk@npm:^2.3.0":
   version: 2.4.0
   resolution: "redux-thunk@npm:2.4.0"
   peerDependencies:
@@ -21094,6 +21101,15 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"redux-thunk@npm:^2.4.1":
+  version: 2.4.1
+  resolution: "redux-thunk@npm:2.4.1"
+  peerDependencies:
+    redux: ^4
+  checksum: af5abb425fb9dccda02e5f387d6f3003997f62d906542a3d35fc9420088f550dc1a018bdc246c7d23ee852b4d4ab8b5c64c5be426e45a328d791c4586a3c6b6e
+  languageName: node
+  linkType: hard
+
 "redux@npm:^4.0.0, redux@npm:^4.1.0, redux@npm:^4.1.2":
   version: 4.1.2
   resolution: "redux@npm:4.1.2"
@@ -21482,13 +21498,20 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"reselect@npm:^4.0.0, reselect@npm:^4.1.2":
+"reselect@npm:^4.0.0":
   version: 4.1.2
   resolution: "reselect@npm:4.1.2"
   checksum: 5a702af37e7fa5e58e8b0787b8a1668df2eff527f1eb2cb2bd81416db6947064a922b41f28a522016df6e5e2dbc5f8588ff0749dcf3c06daae0e0cc3baffec99
   languageName: node
   linkType: hard
 
+"reselect@npm:^4.1.5":
+  version: 4.1.5
+  resolution: "reselect@npm:4.1.5"
+  checksum: 54c13c1e795b2ea70cba8384138aebe78adda00cbea303cc94b64da0a70d74c896cc9a03115ae38b8bff990e7a60dcd6452ab68cbec01b0b38c1afda70714cf0
+  languageName: node
+  linkType: hard
+
 "resolve-cwd@npm:^2.0.0":
   version: 2.0.0
   resolution: "resolve-cwd@npm:2.0.0"