How do I pass custom parameters to middleware in a Redux store with TypeScript

1. Define the Middleware Type:
- Use the `Middleware` type from Redux Toolkit to ensure proper typing for the middleware's parameters. This type includes generic arguments for the state (`S`) and dispatch (`D`):

typescript
     import { Middleware } from 'redux';

     export interface MyMiddleware<S, D> {
       (api: MiddlewareAPI<S>): (next: D) => D;
     }
     

2. Create the Middleware Function:
- Define your middleware function using the `MyMiddleware` type. This function will accept the `store` and `next` parameters and return a new function that handles the middleware logic:

typescript
     export const myMiddleware: MyMiddleware<RootState, AppDispatch> = (store) => (next) => (action) => {
       // Your middleware logic here
       return next(action);
     };
     

3. Apply the Middleware to the Store:
- Use the `applyMiddleware` function from Redux Toolkit to apply your middleware to the store:

typescript
     import { createStore, applyMiddleware } from 'redux';
     import { rootReducer } from './rootReducer';
     import { myMiddleware } from './middleware';

     const store = createStore(rootReducer, applyMiddleware(myMiddleware));

     export type RootState = ReturnType<typeof rootReducer>;
     export type AppDispatch = typeof store.dispatch;
     

4. Pass Custom Parameters:
- If you need to pass custom parameters to your middleware, you can do so by modifying the middleware function to accept additional arguments. For example, you can pass a service instance:

typescript
     export const myMiddleware = (store, service: MyService) => (next) => (action) => {
       // Use the service instance here
       return next(action);
     };
     

5. Configure the Store:
- When creating the store, pass the custom parameters to the middleware:

typescript
     const store = createStore(rootReducer, applyMiddleware(myMiddleware, myServiceInstance));
     

By following these steps, you can create a Redux store with custom middleware that accepts and uses custom parameters. This ensures robust and maintainable code quality with TypeScript.

Here is a complete example:

typescript
// Define the middleware type
import { Middleware } from 'redux';

export interface MyMiddleware<S, D> {
  (api: MiddlewareAPI<S>): (next: D) => D;
}

// Create the middleware function
export const myMiddleware: MyMiddleware<RootState, AppDispatch> = (store, service) => (next) => (action) => {
  // Use the service instance here
  return next(action);
};

// Apply the middleware to the store
import { createStore, applyMiddleware } from 'redux';
import { rootReducer } from './rootReducer';
import { myMiddleware } from './middleware';

const myServiceInstance = new MyService();

const store = createStore(rootReducer, applyMiddleware(myMiddleware(myServiceInstance)));

// Define the RootState and AppDispatch types
export type RootState = ReturnType<typeof rootReducer>;
export type AppDispatch = typeof store.dispatch;

This example demonstrates how to define and apply a middleware that accepts a custom service instance. The middleware function is typed correctly using the `MyMiddleware` type from Redux Toolkit, ensuring robust and maintainable code quality with TypeScript.