Skip to content

Better generic argument for default Thunk Middleware #329

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 9, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/tutorials/advanced-tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion etc/redux-toolkit.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>> {
Expand Down
8 changes: 5 additions & 3 deletions src/configureStore.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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,
Expand Down
9 changes: 7 additions & 2 deletions src/getDefaultMiddleware.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
16 changes: 16 additions & 0 deletions type-tests/files/configureStore.typetest.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>)
}
}