Update `configureStore` to extract TS types from enhancers (including `dispatch` overrides)

[VldMrgnn]

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

• React: "^18.0.0"
• ReactDOM/React Native: "^18.0.0"
• Redux: "^4.1.2"
• React Redux: "^8.0.0-rc.1"

What is the current behavior?

the store:

...
const sagaMiddleware = createSagaMiddleware(process.env.NODE_ENV !== "production" ? { sagaMonitor: sagaMonitor } : {});
const middlewareSeriesTwo = [reduxClipboardCopy, sagaMiddleware];
//
export const store = configureStore({
	reducer: rootReducer,
	middleware: (getDefaultMiddleware) => getDefaultMiddleware({
		serializableCheck: {
			ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, 'SERVICES2PDF']
		}
	}).concat(middlewareSeriesTwo),
	devTools: process.env.NODE_ENV !== "production",
	enhancers: (defaultEnhancers) => [reduxBatch, ...defaultEnhancers, reduxBatch]
});

on dispatching an array of actions, like:

dispatch([
someAction0(payload),
someAction1(payload) 
])

get type error :

Argument of type '({ payload: string; type: string; } | { payload: object; type: string; })[]' is not assignable to parameter of type 'AnyAction'.
  Property 'type' is missing in type '({ payload: string; type: string; } | { payload: object; type: string; })[]' but required in type 'AnyAction'.ts(2345)
[index.d.ts(19, 3): ]()'type' is declared here.

declaring

dispatch([
someAction0(payload),
someAction1(payload) 
] as any)

solves the problem but I think that is not what we want.

What is the expected behavior?

To infer the array of actions as in previous version.

Which browser and OS are affected by this issue?

Server running on Debian / Client Windows, Chrome

Did this work in previous versions of React Redux?

• Yes

[markerikson]

This isn't a React-Redux issue. If anything, it's related to RTK and how configureStore handles its TS types. (Alternately, you may not be using the correct type for dispatch there.)

Can you provide a sandbox or repo that shows this happening?

[VldMrgnn]

Please see the sandbox (lines 19, 36):
https://codesandbox.io/s/intelligent-resonance-0c00m9?file=/src/App.tsx

Thanks

[markerikson]

Yeah, the first problem is you're not following our guidelines for inferring the type of AppDispatch from store.dispatch and using that in your components:

https://redux.js.org/tutorials/typescript-quick-start

So, const dispatch = useDispatch() is still using the basic Dispatch type, and has no idea that you've customized how dispatch can work.

There may be additional work needed beyond that - I'm not sure how well redux-batch itself is typed. But that's the first blocker you need to fix.

[VldMrgnn]

Yes, Thanks.
Is my bad on AppDispatch as I gradually adopted redux (before @rtk) and now gradually adopting TS while still learning.
So, I did the changes following the guidlines in the sandbox.
Typescript is still unhappy.

https://codesandbox.io/s/intelligent-resonance-0c00m9?file=/src/App.tsx

[markerikson]

If I had to guess, my suspicion is that configureStore doesn't try to grab any potential changes to dispatch from enhancers the way it does for middleware`. That's likely something we'd have to change.

Looking at the TS type of batch itself:

const reduxBatch: StoreEnhancer<{
    dispatch: (actions: AnyAction[]) => AnyAction[];
}, {}>

So, one option here might be to fake it by adding that type in yourself:

import {AnyAction} from '@reduxjs/toolkit'

```ts
export type AppDispatch = typeof store.dispatch & ((actions: AnyAction[]) => AnyAction[])

I just tried that in the sandbox and it seems to work okay.

[VldMrgnn]

Thanks, it works like magic !

[markerikson]

Sweet :)

Okay, so this means we do need to update configureStore itself to pull out the right TS types from enhancers. Low priority, but actual changes needed, so I'll leave this open to reflect that.

[EskiMojo14]

fwiw I was playing around with typing redux batch with RTK the other day, and landed upon this - i complicated it a bit more than the above because i wanted to make sure i'd get the correct return type from thunks and listeners (sadly I don't think there's a way of getting the return type for a certain function call at the moment- e.g. "tell me what the return type would be if i dispatch this thunk")

but yeah essentially configureStore doesn't pick up on enhancer types and add them to the resulting store (which interestingly, redux's createStore seems to do)