how to use custume useDispatch in react .js

Great idea! You can create a custom hook myUseDispatch to replace useDispatch and add extra functionality, such as logging or modifying actions before dispatching.

✅ Step 1: Create myUseDispatch.js

Wrap useDispatch inside a custom hook with added logic:

import { useDispatch } from "react-redux";

const myUseDispatch = () => {
  const dispatch = useDispatch();

  return (action) => {
    console.log("Dispatching action:", action); // ✅ Logs action before dispatching
    dispatch(action);
  };
};

export default myUseDispatch;

✅ Step 2: Use myUseDispatch in Your Component

Replace useDispatch with your custom myUseDispatch:

import myUseDispatch from "./myUseDispatch";
import { setToken } from "./redux/authSlice";

const MyComponent = () => {
  const dispatch = myUseDispatch();

  const handleLogin = () => {
    dispatch(setToken("my-secure-token")); // ✅ Dispatch action using custom hook
  };

  return <button onClick={handleLogin}>Login</button>;
};

🚀 Why Use This Custom Hook?

✅ Adds logging to track dispatched actions ✅ Allows modification of actions before dispatching ✅ Reusable across multiple components

Would you like help adding middleware-like logic to intercept and modify actions before dispatching?