Typing Redux Thunk with middleware in TypeScript: A comprehensive guide

Question

Typing Redux Thunk with middleware in TypeScript: A comprehensive guide

I recently integrated Redux into my SPFx webpart (using TypeScript), and everything seems to be working fine. However, I'm struggling with typing the thunk functions and could use some guidance on how to properly type them.

Here's an example of the action I'm trying to dispatch:

  export const setListByMiddelware:any = (listId:string) => (dispatch, getState) => {
    dispatch(listIdAdded(listId));
    dispatch(spApiCallBegan({
        method: GET_LIST_ITEMS,
        options: {
            listId
        },
        onSuccess: itemsAdded.type
    }));
  }

Additionally, here is the SharePoint middleware responsible for making the SP call:

import SP from '../../services/SharePointService';
import * as actions from '../SP_API';

const api = store => next => async action => {
    if(action.type !== actions.spApiCallBegan.type) {
        next(action);
        return;
    }

    const { method, options, onSuccess, onError, onStart } = action.payload;

    if(onStart)  {
        store.dispatch({ type: onStart });
    }

    next(action);

    try {
        const result = await SP[method](options);

        store.dispatch(actions.spApiCallSuccess(result));
        if(onSuccess) {
            store.dispatch({
                type: onSuccess,
                payload: result
            });
        }
    } catch(ex) {
        store.dispatch(actions.spApiCallFailed(ex.message));
        if(onError) {
            store.dispatch({ 
                type: onError,  
                payload: ex.message 
            });
        }
    }
}

export default api;

While I've managed to make things work by simply typing the thunks as any, I'd prefer to strongly type them since they play a crucial role in my components.

If you're curious about the tools I'm using: [email protected]
[email protected]
@reduxjs/[email protected]

Despite my efforts, I have encountered difficulties in typing Redux elements, as evidenced by the struggles described above. Any advice or resources would be greatly appreciated.

For TypeScript specifics, I believe I am currently utilizing TS 3.3 within SPFx version 1.11.0.

Edit
After consulting with markerikson, I have explored the official Redux documentation on typing with TypeScript, which can be found here: https://redux.js.org/recipes/usage-with-typescript#type-checking-middleware

However, despite following the suggested implementations, I encountered errors such as: Type '(listId: string) => (dispatch: any, getState: any) => void' is not assignable to type 'ThunkAction<void, IListSate, unknown, AnyAction>'. Types of parameters 'listId' and 'dispatch' are incompatible. Type 'ThunkDispatch<IListSate, unknown, AnyAction>' is not assignable to type 'string'. regarding the thunk function and 'api' is referenced directly or indirectly in its own type annotation. related to the middleware.

Below is the configuration of my store:

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import listRedurcer, { IListSate} from './lists';
import SP_API from './middleware/SP_API';


const store = configureStore({
    reducer: listRedurcer,
    middleware: [
        ...getDefaultMiddleware(),
        SP_API
    ],
    devTools : {
        name: 'ReduxList'
    }
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

export default store;

In attempting to address the thunk issue, I also experimented with

ThunkAction<void, RootState, string, AnyAction>

but encountered the same error message.

typescript redux

Answer 1

Answer №1

The Redux documentation for "Usage with TypeScript" specifically delves into how to type middleware and thunks:

When creating a custom middleware, the code would resemble:

import { Middleware } from 'redux'

import { RootState } from '../store'

export const exampleMiddleware: Middleware<
  {}, // Most middleware do not modify the dispatch return value
  RootState
> = storeApi => next => action => {
  const state = storeApi.getState() // correctly typed as RootState
}

For handling thunks, consider the following code snippet:

import { AnyAction } from 'redux'
import { sendMessage } from './store/chat/actions'
import { RootState } from './store'
import { ThunkAction } from 'redux-thunk'

export const thunkSendMessage = (
  message: string
): ThunkAction<void, RootState, unknown, AnyAction> => async dispatch => {
  const asyncResp = await exampleAPI()
  dispatch(
    sendMessage({
      message,
      user: asyncResp,
      timestamp: new Date().getTime()
    })
  )
}

function exampleAPI() {
  return Promise.resolve('Async Chat Bot')
}

Update

If you are attempting to use ThunkAction in this manner:

export const setListByMiddelware : ThunkAction = (listId:string) => (dispatch, getState) => {}

This approach is incorrect. setListByMiddelware does not act as a ThunkAction itself - it actually produces a ThunkAction. The correct usage would be:

export const setListByMiddelware = (listId:string) : ThunkAction => (dispatch, getState) => {}

Furthermore, ensure that your middleware parameter within the store configuration is properly defined:

The middleware parameter should accept getDefaultMiddleware as an argument callback
You need to invoke it and utilize the array's prepend and concat methods for configuring accurate types:

const store = configureStore({
    reducer: listRedurcer,
    middleware: getDefaultMiddleware => getDefaultMiddleware().concat(SP_API),
    devTools : {
        name: 'ReduxList'
    }
});

Refer to https://redux-toolkit.js.org/usage/usage-with-typescript#correct-typings-for-the-dispatch-type

Answer 2

The Redux documentation for "Usage with TypeScript" specifically delves into how to type middleware and thunks:

When creating a custom middleware, the code would resemble:

import { Middleware } from 'redux'

import { RootState } from '../store'

export const exampleMiddleware: Middleware<
  {}, // Most middleware do not modify the dispatch return value
  RootState
> = storeApi => next => action => {
  const state = storeApi.getState() // correctly typed as RootState
}

For handling thunks, consider the following code snippet:

import { AnyAction } from 'redux'
import { sendMessage } from './store/chat/actions'
import { RootState } from './store'
import { ThunkAction } from 'redux-thunk'

export const thunkSendMessage = (
  message: string
): ThunkAction<void, RootState, unknown, AnyAction> => async dispatch => {
  const asyncResp = await exampleAPI()
  dispatch(
    sendMessage({
      message,
      user: asyncResp,
      timestamp: new Date().getTime()
    })
  )
}

function exampleAPI() {
  return Promise.resolve('Async Chat Bot')
}

Update

If you are attempting to use ThunkAction in this manner:

export const setListByMiddelware : ThunkAction = (listId:string) => (dispatch, getState) => {}

This approach is incorrect. setListByMiddelware does not act as a ThunkAction itself - it actually produces a ThunkAction. The correct usage would be:

export const setListByMiddelware = (listId:string) : ThunkAction => (dispatch, getState) => {}

Furthermore, ensure that your middleware parameter within the store configuration is properly defined:

The middleware parameter should accept getDefaultMiddleware as an argument callback
You need to invoke it and utilize the array's prepend and concat methods for configuring accurate types:

const store = configureStore({
    reducer: listRedurcer,
    middleware: getDefaultMiddleware => getDefaultMiddleware().concat(SP_API),
    devTools : {
        name: 'ReduxList'
    }
});

Refer to https://redux-toolkit.js.org/usage/usage-with-typescript#correct-typings-for-the-dispatch-type

Answer 3

Answer №2

ThunkAction<void, RootState, string, AnyAction>

might be suitable if you have created your thunk all at once, like

setListByMiddelware=(dispatch, getState, listId:string)=>{}

, however, setListByMiddelware is not exactly a thunk itself, but more of a thunk factory. In order to accurately reflect its type, consider using:

const setListByMiddelware:(listId:string)=>ThunkAction<void, RootState, never, AnyAction> = 
  (listId:string) => (dispatch, getState) => {

Answer 4

ThunkAction<void, RootState, string, AnyAction>

might be suitable if you have created your thunk all at once, like

setListByMiddelware=(dispatch, getState, listId:string)=>{}

, however, setListByMiddelware is not exactly a thunk itself, but more of a thunk factory. In order to accurately reflect its type, consider using:

const setListByMiddelware:(listId:string)=>ThunkAction<void, RootState, never, AnyAction> = 
  (listId:string) => (dispatch, getState) => {

Answer 5

Answer №3

'api' is mentioned directly or indirectly within its own type annotation.

This error occurs due to the interdependence between the middleware type and the RootState type, which is derived from the store. This creates a circular typing issue as the store type relies on the middleware and vice versa.

To resolve this, one solution is to define the RootState type without involving the store. If your entire reducer is listReducer, you can achieve this by:

export type RootState = ReturnType<typeof listReducer>;

This approach will align with the api type recommended by @markerikson

const api: Middleware<{}, RootState> = store => next => async action => {

The function setListByMiddleware has a return type of ThunkAction, but the function itself is not a ThunkAction.

export const setListByMiddelware = (
  listId: string
): ThunkAction<void, RootState, never, AnyAction> => (dispatch, getState) => {
  dispatch(listIdAdded(listId));
  dispatch(
    spApiCallBegan({
      method: GET_LIST_ITEMS,
      options: {
        listId
      },
      onSuccess: itemsAdded.type
    })
  );
};

Answer 6

'api' is mentioned directly or indirectly within its own type annotation.

This error occurs due to the interdependence between the middleware type and the RootState type, which is derived from the store. This creates a circular typing issue as the store type relies on the middleware and vice versa.

To resolve this, one solution is to define the RootState type without involving the store. If your entire reducer is listReducer, you can achieve this by:

export type RootState = ReturnType<typeof listReducer>;

This approach will align with the api type recommended by @markerikson

const api: Middleware<{}, RootState> = store => next => async action => {

The function setListByMiddleware has a return type of ThunkAction, but the function itself is not a ThunkAction.

export const setListByMiddelware = (
  listId: string
): ThunkAction<void, RootState, never, AnyAction> => (dispatch, getState) => {
  dispatch(listIdAdded(listId));
  dispatch(
    spApiCallBegan({
      method: GET_LIST_ITEMS,
      options: {
        listId
      },
      onSuccess: itemsAdded.type
    })
  );
};

Typing Redux Thunk with middleware in TypeScript: A comprehensive guide

Answer №1

Answer №2

Answer №3

Similar questions

Clickable Angular Material card

Exploring the best practices for utilizing the error prop and CSS with the Input API in Material UI while utilizing context

What is the correct way to trigger an event specified as a string parameter in the emit() function?

How to Extract the Specific Parameter Type from a Function in Typescript

The continuous re-rendering is being triggered by the Async/Await Function

Tips on resolving the 404 path error in Angular2/TypeScript ASP.NET 4.6.1 on Visual Studio 2015

The mysterious appearance of the <v-*> custom element in Vuetify Jest

Increasing a number after a delay in an Angular 2 AppComponent using TypeScript

Troubleshooting the issue with mocking the useTranslation function for i18n in JEST

Issue: Inadequate parameters have been supplied for the localized pathname (getPathname()). This problem arose after the inclusion of "next-intl/routing" module

What does the typeof keyword return when used with a variable in Typescript?

The Angular4 HTTP POST method fails to send data to the web API

Implement TypeScript to include type annotations on functions' parameters using destructuring and the rest syntax

What is the best way to access the data being sent to a router link in Angular?

Experiencing a bug in my express application: TypeError - Unable to access properties of undefined (reading 'prototype')

Locate the minimum and maximum values between two inputted dates

What is the best way to interact with and modify the relationships of "many-to-many" fields in my database table?

After compilation, what happens to the AngularJS typescript files?

Ways to steer clear of utilizing subscriptions and BehaviorSubject.value through a declarative method within rxjs

Struggling to set up the connection between React-Redux connect and the Provider store