What are some examples of reusable middleware with custom parameters

1. Logging Middleware:
- This middleware logs every action that passes through the middleware pipeline. It can be reused across multiple Redux applications with different logging configurations:

typescript
     import { Middleware } from 'redux';

     interface LoggingMiddleware<S, D> {
       (store: MiddlewareAPI<S>): (next: D) => D;
     }

     const loggingMiddleware: LoggingMiddleware<RootState, AppDispatch> = (store) => (next) => (action) => {
       console.log('Dispatching:', action);
       return next(action);
     };

     export default loggingMiddleware;
     

2. Error Handling Middleware:
- This middleware catches and handles any errors that occur during the dispatch of actions. It can be reused across multiple Redux applications with different error handling configurations:

typescript
     import { Middleware } from 'redux';

     interface ErrorHandlingMiddleware<S, D> {
       (store: MiddlewareAPI<S>): (next: D) => D;
     }

     const errorHandlingMiddleware: ErrorHandlingMiddleware<RootState, AppDispatch> = (store) => (next) => (action) => {
       try {
         return next(action);
       } catch (error) {
         console.error('Error handling:', error);
         return next(action);
       }
     };

     export default errorHandlingMiddleware;
     

3. Authentication Middleware:
- This middleware checks if the user is authenticated before allowing actions to pass through. It can be reused across multiple Redux applications with different authentication configurations:

typescript
     import { Middleware } from 'redux';

     interface AuthenticationMiddleware<S, D> {
       (store: MiddlewareAPI<S>): (next: D) => D;
     }

     const authenticationMiddleware: AuthenticationMiddleware<RootState, AppDispatch> = (store) => (next) => (action) => {
       if (!store.getState().authenticated) {
         console.log('Unauthorized action:', action);
         return next(action);
       }
       return next(action);
     };

     export default authenticationMiddleware;
     

4. Rate Limiting Middleware:
- This middleware limits the frequency of actions based on a specific rate. It can be reused across multiple Redux applications with different rate limiting configurations:

typescript
     import { Middleware } from 'redux';

     interface RateLimitingMiddleware<S, D> {
       (store: MiddlewareAPI<S>): (next: D) => D;
     }

     const rateLimitingMiddleware: RateLimitingMiddleware<RootState, AppDispatch> = (store) => (next) => (action) => {
       if (store.getState().rateLimitReached) {
         console.log('Rate limit reached:', action);
         return next(action);
       }
       return next(action);
     };

     export default rateLimitingMiddleware;
     

These middleware examples demonstrate how to create reusable middleware with custom parameters. They can be applied to different Redux applications with different configurations, ensuring robust and maintainable code quality with TypeScript.

Here is a complete example of how to use these middleware functions:

typescript
import { createStore, applyMiddleware } from 'redux';
import { rootReducer } from './rootReducer';
import { loggingMiddleware } from './middleware/loggingMiddleware';
import { errorHandlingMiddleware } from './middleware/errorHandlingMiddleware';
import { authenticationMiddleware } from './middleware/authenticationMiddleware';
import { rateLimitingMiddleware } from './middleware/rateLimitingMiddleware';

const store = createStore(rootReducer, applyMiddleware(
  loggingMiddleware,
  errorHandlingMiddleware,
  authenticationMiddleware,
  rateLimitingMiddleware,
));

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

This example shows how to create a Redux store with multiple middleware functions applied. Each middleware function handles specific tasks, such as logging, error handling, authentication, and rate limiting. This ensures that your application remains robust and maintainable while handling different scenarios.