Middleware এর ব্যবহার

Redux-এ Middleware মানে হলো → action dispatch হওয়ার পর, reducer এ পৌঁছানোর আগে, আপনি চাইলে কিছু অতিরিক্ত কাজ করতে পারবেন।

📌 ধাপ-5. Store (একটি Middleware সহ)

store.js


import { applyMiddleware, createStore } from "redux";
import { rootReducer } from "./rootReducer";
 
// createStore() এর ১ম প্যারামিটার হবে reducer এবং ২য় প্যারামিটার হিসেবে থাকবে applyMiddleware()
// এই applyMiddleware() এর মধ্যে সকল middleware কমা আকারে থাকবে।
 
const myLogger = (store) => (next) => (action) => {
  console.log(`Prev State: ${JSON.stringify(store.getState())}`);
  console.log(`Action: ${JSON.stringify(action)}`);
 
  return next(action);
};
// এখানে myLogger একটি carry function. অর্থাৎ middleware হবে একটি carry function.
 
export const store = createStore(rootReducer, applyMiddleware(myLogger));

📌 ধাপ-5. একাধিক Middleware এর ব্যবহার


import { applyMiddleware, createStore } from "redux";
import { rootReducer } from "./rootReducer";
import { logger } from "redux-logger";
 
// createStore() এর ১ম প্যারামিটার হবে reducer এবং ২য় প্যারামিটার হিসেবে থাকবে applyMiddleware()
// এই applyMiddleware() এর মধ্যে সকল middleware কমা আকারে থাকবে।
 
// Custom middleware
const myLogger = (store) => (next) => (action) => {
  console.log(`Prev State: ${JSON.stringify(store.getState())}`);
  console.log(`Action: ${JSON.stringify(action)}`);
  
  const result = next(action); // reducer এ action পাঠানো হলো
  
  console.log(`Next State: ${JSON.stringify(store.getState())}`);
  return result;
};
 
 
// এখানে myLogger একটি carry function. অর্থাৎ middleware হবে একটি carry function.
 
export const store = createStore(
  rootReducer,
  applyMiddleware(myLogger, logger)
);