Redux DevTools এর ব্যবহার

Redux DevTools ব্রাউজার এক্সটেনশন ব্যবহার করার জন্য @redux-devtools/extension প্যাকেজ ইনস্টল করতে হবে।

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

terminal


npm install @redux-devtools/extension

📌 ধাপ-5. Store (DevTools সহ)


 
// createStore() এর ১ম প্যারামিটার হবে reducer এবং ২য় প্যারামিটার হিসেবে থাকবে composeWithDevTools()
// এই composeWithDevTools() এর মধ্যে থাকবে applyMiddleware(), এর মধ্যে সকল middleware কমা আকারে থাকবে।
 
import { applyMiddleware, createStore } from "redux";
import { rootReducer } from "./rootReducer";
import { logger } from "redux-logger";
import { composeWithDevTools } from "@redux-devtools/extension";
 
 
// 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,composeWithDevTools(applyMiddleware(myLogger, logger)));
);