Better generic argument for default Thunk Middleware (#329)

* fix #321

* better type for AppThunk in advanced tutorial

* keep backwards-compatiblity with ThunkActions with a `null` ExtraArgument

* small tweak, add type test

* lint

Author: phryneas

docs/tutorials/advanced-tutorial.md

@@ -541,7 +541,7 @@ Before we go any further, let's add a type declaration we can reuse instead.
 
 export type AppDispatch = typeof store.dispatch
 
-+export type AppThunk = ThunkAction<void, RootState, null, Action<string>>
++export type AppThunk = ThunkAction<void, RootState, unknown, Action<string>>
 ```
 
 The `AppThunk` type declares that the "action" that we're using is specifically a thunk function. The thunk is customized with some additional type parameters:

etc/redux-toolkit.api.md

@@ -81,7 +81,7 @@ export type CaseReducerWithPrepare<State, Action extends PayloadAction> = {
 export type ConfigureEnhancersCallback = (defaultEnhancers: StoreEnhancer[]) => StoreEnhancer[];
 
 // @public
-export function configureStore<S = any, A extends Action = AnyAction, M extends Middlewares<S> = [ThunkMiddleware<S>]>(options: ConfigureStoreOptions<S, A, M>): EnhancedStore<S, A, M>;
+export function configureStore<S = any, A extends Action = AnyAction, M extends Middlewares<S> = [ThunkMiddlewareFor<S>]>(options: ConfigureStoreOptions<S, A, M>): EnhancedStore<S, A, M>;
 
 // @public
 export interface ConfigureStoreOptions<S = any, A extends Action = AnyAction, M extends Middlewares<S> = Middlewares<S>> {

src/configureStore.ts

@@ -17,10 +17,12 @@ import {
   composeWithDevTools,
   EnhancerOptions as DevToolsOptions
 } from 'redux-devtools-extension'
-import { ThunkMiddleware } from 'redux-thunk'
 
 import isPlainObject from './isPlainObject'
-import { getDefaultMiddleware } from './getDefaultMiddleware'
+import {
+  getDefaultMiddleware,
+  ThunkMiddlewareFor
+} from './getDefaultMiddleware'
 import { DispatchForMiddlewares } from './tsHelpers'
 
 const IS_PRODUCTION = process.env.NODE_ENV === 'production'
@@ -120,7 +122,7 @@ export interface EnhancedStore<
 export function configureStore<
   S = any,
   A extends Action = AnyAction,
-  M extends Middlewares<S> = [ThunkMiddleware<S>]
+  M extends Middlewares<S> = [ThunkMiddlewareFor<S>]
 >(options: ConfigureStoreOptions<S, A, M>): EnhancedStore<S, A, M> {
   const {
     reducer = undefined,

src/getDefaultMiddleware.ts

@@ -28,13 +28,18 @@ interface GetDefaultMiddlewareOptions {
   serializableCheck?: boolean | SerializableStateInvariantMiddlewareOptions
 }
 
-type ThunkMiddlewareFor<S, O extends GetDefaultMiddlewareOptions> = O extends {
+export type ThunkMiddlewareFor<
+  S,
+  O extends GetDefaultMiddlewareOptions = {}
+> = O extends {
   thunk: false
 }
   ? never
   : O extends { thunk: { extraArgument: infer E } }
   ? ThunkMiddleware<S, AnyAction, E>
-  : ThunkMiddleware<S>
+  :
+      | ThunkMiddleware<S, AnyAction, null> //The ThunkMiddleware with a `null` ExtraArgument is here to provide backwards-compatibility.
+      | ThunkMiddleware<S, AnyAction>
 
 /**
  * Returns any array containing the default middleware installed by

type-tests/files/configureStore.typetest.ts

@@ -254,4 +254,20 @@ import thunk, { ThunkMiddleware, ThunkAction, ThunkDispatch } from 'redux-thunk'
     const result2: 'B' = store.dispatch('b')
     const result3: Promise<'A'> = store.dispatch(thunkA())
   }
+  /**
+   * Accepts thunk with `unknown`, `undefined` or `null` ThunkAction extraArgument per default
+   */
+  {
+    const store = configureStore({ reducer: {} })
+    // undefined is the default value for the ThunkMiddleware extraArgument
+    store.dispatch(function() {} as ThunkAction<void, {}, undefined, AnyAction>)
+    // null was previously documented in the redux docs
+    store.dispatch(function() {} as ThunkAction<void, {}, null, AnyAction>)
+    // unknown is the best way to type a ThunkAction if you do not care
+    // about the value of the extraArgument, as it will always work with every
+    // ThunkMiddleware, no matter the actual extraArgument type
+    store.dispatch(function() {} as ThunkAction<void, {}, unknown, AnyAction>)
+    // typings:expect-error
+    store.dispatch(function() {} as ThunkAction<void, {}, boolean, AnyAction>)
+  }
 }