Migrating to RTK 2.0's Enhanced Middleware API

Provide an example of the new middleware API in Redux Toolkit 2.0, focusing on how to inject dependencies into a custom middleware.

import { configureStore, createAction, createReducer } from '@reduxjs/toolkit';

// Define a custom action
const fetchData = createAction('fetch/data');

// Define a simple reducer
const dataReducer = createReducer([], {
  [fetchData]: (state, action) => [...state, action.payload],
});

First, import necessary functions from Redux Toolkit. Define a custom action to fetch data and a simple reducer to handle that action by adding the fetched data to the state.

const myCustomMiddleware = ({ dispatch, getState }) => next => action => {
  // Handle the action in your middleware here
  console.log('Action received:', action);
  return next(action);
};

Create a custom middleware using the curried function format. This middleware simply logs out every action it receives before passing it on to the next middleware in the chain.

import { createMiddleware } from '@reduxjs/toolkit';

const myEnhancedMiddleware = createMiddleware({
  middleware: myCustomMiddleware,
  // ... You can inject dependencies here
});

Using Redux Toolkit 2.0's enhanced middleware API, wrap the custom middleware with `createMiddleware`. This is where you can inject additional dependencies if needed.

const store = configureStore({
  reducer: {
    data: dataReducer,
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(myEnhancedMiddleware),
});

Finally, configure the Redux store by combining the reducer and the enhanced middleware. The default middleware is included by calling `getDefaultMiddleware` and then the custom middleware is appended to the middleware chain using `.concat()`.