How can you extend thunk MiddlewareApi?

[Eonfuzz]

Heyo Redux team / community!

Right now I'm looking at implementing a hybrid of offline/online first design for an app, and wondering if there's a nice way I can extend the middlewareApi object to include refs to my DB and offline status.

I want to do something like this:

If not, how would you go about injecting objects into every thunk, or would you recommend a different approach?

[EskiMojo14]

you can provide an extra argument to thunks when initialising your store, which would be thunkApi.extra:
https://redux-toolkit.js.org/api/getDefaultMiddleware#customizing-the-included-middleware

[Eonfuzz]

Awesome, can we inject into that object via DyanmicMiddleware too?

[EskiMojo14]

if you save the reference, you can mutate it as needed

const thunkExtra = {} as { service?: Service }

const store = configureStore({
  reducer,
  middleware: gDM => gDM({ thunk: { extraArgument: thunkExtra } })
})

function initService() {
  thunkExtra.service = new Service()
}