score:5

I can initially think of a few different ways you could consider going about this depending on how much effort you feel like putting into it, how true to the vanilla implementation you'd like, and how accurate of typings you want.

  1. The easiest implementation and truest to the API (but with poor typings):

    // create your own dispatch function reference with custom typings
    export const dispatchStore = store.dispatch as typeof store.dispatch | Dispatch<any>
    
    // use custom typed dispatch (unfortunately, you can pass it almost `any`thing)
    dispatchStore(myThunk('id123'))
    
  2. An easy implementation but requires typing each call (and still has poor typings):

    // optional
    export const dispatchStore = store.dispatch
    
    // type each dispatch as any (not good if you need to use 'abort', etc)
    dispatchStore(myThunk('id123') as any)
    
  3. This bullet is specific to Redux Toolkit but could easily apply to most TypeScript typing issues with third-party libraries (e.g. Redux). In the case of using redux-toolkit, one could create a reference to either configureStore or createSlice and manipulate the typings as you choose. In the following code, I wrapped the createSlice function in createSlicePlus, added a bunch of convenience logic behind the scenes, and enhanced the args and return types.

    // convenience `request` wrapper around store `dispatch` that abstracts the rest
    const promise = counter.request.decrementThunk(500)
    // even the RTK thunk promise is typed appropriately
    promise.abort()
    

The code for 3rd example can be found here on Github.


Related Query

More Query from same tag