feat: support extra thunk argument

docs/api/configureStore.md

@@ -22,10 +22,12 @@ function configureStore({
     middleware?: MiddlewareFunction[],
     // Enable support for the Redux DevTools Extension. Defaults to true.
     devTools?: boolean | EnhancerOptions,
-    // Same as current createStore.
+    // Same as current createStore
     preloadedState?: State,
     // An optional array of Redux store enhancers
     enhancers?: ReduxStoreEnhancer[],
+    // Inject a custom thunk argument
+    extraThunkArgument?: any,
 })
 ```
 
@@ -75,6 +77,10 @@ An optional array of Redux store enhancers. If included, these will be passed to
 This should _not_ include `applyMiddleware()` or
 the Redux DevTools Extension `composeWithDevTools`, as those are already handled by `configureStore`.
 
+### `extraThunkArgument`
+
+See [Redux Thunk | Injecting a Custom Argument](https://github.com/reduxjs/redux-thunk#injecting-a-custom-argument)
+
 ## Usage
 
 ### Basic Example
@@ -107,7 +113,10 @@ const reducer = {
   visibility: visibilityReducer
 }
 
-const middleware = [...getDefaultMiddleware(), logger]
+const middleware = [
+  ...getDefaultMiddleware(/* extraThunkArgument */),
+  logger,
+]
 
 const preloadedState = {
   todos: [
@@ -128,7 +137,11 @@ const store = configureStore({
   middleware,
   devTools: process.env.NODE_ENV !== 'production',
   preloadedState,
-  enhancers: [reduxBatch]
+  enhancers: [reduxBatch],
+  /**
+   * Cannot provide both a middleware and an extraThunkArgument
+   */
+  // extraThunkArgument: { api, whatever }
 })
 
 // The store has been created with these options:

src/configureStore.ts

@@ -30,11 +30,13 @@ const IS_PRODUCTION = process.env.NODE_ENV === 'production'
  *
  * @return The default middleware used by `configureStore()`.
  */
-export function getDefaultMiddleware<S = any, A extends Action = AnyAction>(): [
-  ThunkMiddleware<S, A>,
+export function getDefaultMiddleware<S = any, A extends Action = AnyAction, E = any>(extraThunkArgument?: E): [
+  ThunkMiddleware<S, A, E>,
   ...Middleware<{}, S>[]
 ] {
-  let middlewareArray: [ThunkMiddleware<S, A>, ...Middleware<{}, S>[]] = [thunk]
+  let middlewareArray: [ThunkMiddleware<S, A, E>, ...Middleware<{}, S>[]] = [
+    extraThunkArgument ? thunk.withExtraArgument(extraThunkArgument) : thunk,
+  ]
 
   if (process.env.NODE_ENV !== 'production') {
     /* START_REMOVE_UMD */
@@ -52,12 +54,12 @@ export function getDefaultMiddleware<S = any, A extends Action = AnyAction>(): [
 /**
  * Options for `configureStore()`.
  */
-export interface ConfigureStoreOptions<S = any, A extends Action = AnyAction> {
+export interface ConfigureStoreOptions<S = any, A extends Action = AnyAction, E = any> {
   /**
    * A single reducer function that will be used as the root reducer, or an
    * object of slice reducers that will be passed to `combineReducers()`.
    */
-  reducer: Reducer<S, A> | ReducersMapObject<S, A>
+  reducer?: Reducer<S, A> | ReducersMapObject<S, A>
 
   /**
    * An array of Redux middleware to install. If not supplied, defaults to
@@ -90,6 +92,12 @@ export interface ConfigureStoreOptions<S = any, A extends Action = AnyAction> {
    * need to add middleware, you can use the `middleware` parameter instaead.
    */
   enhancers?: StoreEnhancer[]
+
+  /**
+   * Inject a custom thunk argument.
+   * @see https://github.com/reduxjs/redux-thunk#injecting-a-custom-argument
+   */
+  extraThunkArgument?: E
 }
 
 /**
@@ -107,16 +115,22 @@ export interface EnhancedStore<S = any, A extends Action = AnyAction>
  * @param config The store configuration.
  * @returns A configured Redux store.
  */
-export function configureStore<S = any, A extends Action = AnyAction>(
-  options: ConfigureStoreOptions<S, A>
-): EnhancedStore<S, A> {
+export function configureStore<S = any, A extends Action = AnyAction, E = any>(
+  options: ConfigureStoreOptions<S, A, E> = {}
+) {
   const {
-    reducer = undefined,
-    middleware = getDefaultMiddleware(),
+    reducer,
     devTools = true,
-    preloadedState = undefined,
-    enhancers = []
-  } = options || {}
+    preloadedState,
+    enhancers = [],
+    extraThunkArgument,
+  } = options
+
+  if (options.middleware && extraThunkArgument) {
+    throw new Error('Cannot supply both a middleware and an extraThunkArgument')
+  }
+
+  const middleware = options.middleware || getDefaultMiddleware(extraThunkArgument)
 
   let rootReducer: Reducer<S, A>
 
@@ -144,11 +158,11 @@ export function configureStore<S = any, A extends Action = AnyAction>(
 
   const storeEnhancers = [middlewareEnhancer, ...enhancers]
 
-  const composedEnhancer = finalCompose(...storeEnhancers) as StoreEnhancer
+  const composedEnhancer = finalCompose(...storeEnhancers)
 
-  return createStore(
+  return createStore<S, A, { dispatch: ThunkDispatch<S, E, A> }, unknown>(
     rootReducer,
-    preloadedState as DeepPartial<S>,
-    composedEnhancer
+    preloadedState,
+    composedEnhancer as StoreEnhancer<{ dispatch: ThunkDispatch<S, E, A> }>
   )
 }