Raw RTK With Middleware Concept

Redux Toolkit এ configureStore দিয়ে custom middleware যোগ করা যায়। Default middlewares এর সাথে নতুন middleware concat করতে হয়।

প্রয়োজনীয় প্যাকেজ

terminal


npm install redux-logger

কোড

Store with Middleware



const { configureStore } = require("@reduxjs/toolkit");
const counterReducer = require("../../redux/counter/reducer");
const dynamicCounterSlice = require("../features/dynamicCounter/dynamicCounterSlice");
const { createLogger } = require("redux-logger");

const logger = createLogger();

const store = configureStore({
  reducer: {
    counter: counterReducer,
    dynamicCounter: dynamicCounterSlice,
  },
  middleware: (getDefaultMiddlewares) => getDefaultMiddlewares().concat(logger),
});

module.exports = store;

getDefaultMiddlewares() দিয়ে RTK এর built-in middlewares (redux-thunk, DevTools) রাখতে হবে, তারপর নতুন middleware concat করতে হবে।

Middleware Configuration


 
// একাধিক middleware যোগ করা
const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
  middleware: (getDefaultMiddlewares) => 
    getDefaultMiddlewares().concat(logger, customMiddleware),
});
 
// Default middlewares disable করা
const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
  middleware: [logger], // শুধু logger, default middlewares নেই
});
 
// Conditional middleware
const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
  middleware: (getDefaultMiddlewares) => {
    const middlewares = getDefaultMiddlewares();
    
    if (process.env.NODE_ENV === 'development') {
      middlewares.concat(logger);
    }
    
    return middlewares;
  },
});

Default Middlewares

RTK এর Default Middlewares: - redux-thunk (async actions এর জন্য) - serializableCheck (non-serializable values check) - immutableCheck (mutation detection) - Redux DevTools Extension

getDefaultMiddlewares() ব্যবহার করলে RTK এর সব built-in features পাওয়া যায়।