Using Redux Middleware with Typed Actions

Demonstrate how to write custom middleware for Redux that operates on typed actions instead of AnyAction.
// Define a custom action type
interface MyAction {
  type: 'MY_ACTION_TYPE';
  payload: string;

// Custom middleware that only operates on MyAction
const myMiddleware: Middleware<{}, any, Dispatch<MyAction>> = store => next => action => {
  // Check if the action is the right type
  if (action.type === 'MY_ACTION_TYPE') {
    console.log('Payload for MY_ACTION_TYPE:', action.payload);
    // Perform some middleware logic here...
  // Continue to the next middleware or reducer
  return next(action);
This code defines a custom action interface (MyAction) with a type and payload. The myMiddleware function is an example of a Redux middleware that checks if the incoming action is of type 'MY_ACTION_TYPE', then logs its payload and optionally performs some logic before passing the action to the next middleware or reducer.
// Another example with a typed action
interface AnotherAction {
  data: number;

// Middleware that operates on AnotherAction
const anotherMiddleware: Middleware<{}, any, Dispatch<AnotherAction>> = ({ dispatch }) => next => action => {
  if (action.type === 'ANOTHER_ACTION_TYPE') {
    // Handle the action or dispatch another action
    dispatch({ type: 'ANOTHER_ACTION_RESULT', data: * 2 });
  return next(action);
This code snippet showcases another middleware definition, this time for actions of type 'ANOTHER_ACTION_TYPE'. It intercepts actions of that type, processes the data (e.g., doubling it), and dispatches a new action with modified data.
// Applying the middleware to the Redux store
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';

// Combine your middleware into an array
const middlewares = [myMiddleware, anotherMiddleware];

// Create a Redux store and apply the middleware
const store = createStore(
This final piece of code demonstrates how to import the `createStore` and `applyMiddleware` functions from Redux, combine the custom middlewares into an array, and finally create the Redux store with the `rootReducer` and the array of middlewares.