Custom Redux Hooks for Micro Frontends Complete Guide

# The "Every Remote Re-Imports Six Things" Problem
# ──────────────────────────────────────────────────
#
#   BEFORE — every component in every remote does this:
#
#   ┌──────────────────────────────────────────────────────────┐
#   │  apps/Cart/src/components/CartHeader.jsx                 │
#   │                                                          │
#   │  import { useSelector, useDispatch } from '@myapp/store' │
#   │  import {                                                │
#   │    selectUser, selectIsLoggedIn, selectUserName,         │
#   │    selectAccessToken, selectAddress, setUser,            │
#   │    setIsLoggedIn, setAddress, clearUser,                 │
#   │  } from '@myapp/store';                                  │
#   │                                                          │
#   │  function CartHeader() {                                 │
#   │    const isLoggedIn = useSelector(selectIsLoggedIn);     │
#   │    const name       = useSelector(selectUserName);       │
#   │    const address    = useSelector(selectAddress);        │
#   │    const dispatch   = useDispatch();                     │
#   │    // ... 30 lines of business logic                     │
#   │  }                                                       │
#   └──────────────────────────────────────────────────────────┘
#
#   PROBLEMS THIS CAUSES IN AN MFE:
#     - Every remote (Cart, Products, Orders, Account, Support)
#       writes the SAME six lines of import + useSelector boilerplate
#     - When userSlice renames selectUserName → selectName,
#       SIX remotes need to update imports in one coordinated PR
#     - Junior devs hand-wire selectors and miss createSelector,
#       causing re-renders on unrelated state changes
#     - A new field added to the user surface (e.g. avatarUrl)
#       requires every consumer to add another useSelector call
#
#   THE FIX (this article):
#     One custom hook per concern, exported from @myapp/store:
#       useCurrentUser()        → { isLoggedIn, name, email, address, login, logout, updateAddress }
#       useCart()               → { items, totals, addItem, removeItem, updateQuantity }
#       useHeaderViewModel()    → { displayName, cartBadge, openTickets }
#     Every remote imports ONE hook per concern. Slice renames
#     change the hook implementation; consumers stay untouched.

// File: packages/core/store/src/hooks.js
// The two foundation hooks. Every other custom hook in the
// federated store package builds on top of these — never on
// react-redux directly.
import { useDispatch, useSelector } from 'react-redux';

// useAppDispatch — a typed wrapper around useDispatch.
// In JavaScript it is a thin pass-through; in TypeScript it
// returns AppDispatch (the typed version of dispatch).
// Wrapping useDispatch is what gives the @myapp/store package
// the freedom to change Redux internals later (e.g. migrate to
// a custom middleware stack) without forcing every remote to
// update its imports.
export const useAppDispatch = () => useDispatch();

// useAppSelector — same idea, typed against RootState.
// Every selector in every remote runs through this single
// alias so a future change to the store shape only touches
// this file — not the 200+ useSelector call sites scattered
// across the workspace.
export const useAppSelector = useSelector;

// WHY NOT IMPORT react-redux DIRECTLY?
//   - In a federated workspace, react-redux is declared as a
//     singleton in every remote's webpack.config.js shared block.
//     Importing it through @myapp/store keeps every remote on the
//     SAME copy at runtime.
//   - A remote that does 'import { useSelector } from "react-redux"'
//     accidentally pulls in its own bundled copy if the singleton
//     is misconfigured — the resulting hook reads from a different
//     React context and returns stale state.

// File: packages/core/store/src/hooks/useCurrentUser.js
// One hook, complete user surface. Every remote that needs
// the current user imports useCurrentUser ONLY — not the eight
// individual selectors and four individual actions.
import { useCallback } from 'react';
import { useAppDispatch, useAppSelector } from '../hooks';
import {
  selectUser,
  selectIsLoggedIn,
  selectUserName,
  selectEmail,
  selectPhoneNumber,
  selectAccessToken,
  selectAddress,
} from '../slices/userSlice';
import {
  setUser,
  setIsLoggedIn,
  setAddress,
  clearUser,
} from '../slices/userSlice';

export const useCurrentUser = () => {
  const dispatch = useAppDispatch();

  // ── Reads ─────────────────────────────────────────────────
  // Each useAppSelector subscribes independently. React-Redux
  // bails out of re-renders when the returned reference is
  // unchanged, so reading seven primitive fields costs less
  // than reading one bulk selectUser() object.
  const user        = useAppSelector(selectUser);
  const isLoggedIn  = useAppSelector(selectIsLoggedIn);
  const name        = useAppSelector(selectUserName);
  const email       = useAppSelector(selectEmail);
  const phoneNumber = useAppSelector(selectPhoneNumber);
  const accessToken = useAppSelector(selectAccessToken);
  const address     = useAppSelector(selectAddress);

  // ── Writes ────────────────────────────────────────────────
  // Wrapped in useCallback so the returned functions keep a
  // stable reference across renders. Without useCallback, a
  // parent passing { login } down as a prop would trigger a
  // re-render in every child on every state change.
  const login = useCallback((payload) => {
    dispatch(setUser(payload));
    dispatch(setIsLoggedIn({ isLoggedIn: true }));
  }, [dispatch]);

  const logout = useCallback(() => {
    dispatch(clearUser());
  }, [dispatch]);

  const updateAddress = useCallback((address) => {
    dispatch(setAddress({ address }));
  }, [dispatch]);

  // The returned object is the public contract of the hook.
  // EVERY remote in the workspace destructures from this
  // shape — adding a field is a MINOR semver bump, renaming
  // one is a MAJOR.
  return {
    // data
    user, isLoggedIn, name, email, phoneNumber, accessToken, address,
    // actions
    login, logout, updateAddress,
  };
};

// File: apps/Cart/src/components/CartHeader.jsx
// AFTER — the same component using the custom hook.
// One import. Three destructured fields. No raw selector wiring.
import { useCurrentUser } from '@myapp/store';

export default function CartHeader() {
  const { isLoggedIn, name, logout } = useCurrentUser();

  if (!isLoggedIn) {
    return <a href="/login">Sign in to view your bag</a>;
  }

  return (
    <header className="cart-header">
      <h2>Hi, {name}</h2>
      <button onClick={logout}>Sign out</button>
    </header>
  );
}

// COMPARE WITH THE BEFORE VERSION:
//   - Imports went from 5 → 1
//   - useSelector calls went from 3 → 0 (hidden inside the hook)
//   - useDispatch + dispatch(clearUser()) → onClick={logout}
//   - When userSlice renames selectUserName → selectName,
//     this file does NOT change. Only useCurrentUser updates.

// File: packages/core/store/src/hooks/useCart.js
// Read + write surface for the cart. Owned by Cart + Products
// remotes; read by Header (item count badge) and Checkout
// (totals). Every consumer imports useCart — never the raw
// selectors or action creators.
import { useCallback, useMemo } from 'react';
import { useAppDispatch, useAppSelector } from '../hooks';
import {
  addToCart,
  removeFromCart,
  updateQuantity,
  selectItem,
  deselectItem,
  selectAllItems,
  deselectAllItems,
  applyCoupon,
  removeCoupon,
  clearCart,
} from '../slices/cartSlice';

// Single-field selectors live next to the slice. Defining them
// inline here would create new function references on every
// render and bust useAppSelector's referential equality bailout.
const selectItems         = (state) => state.cart.items;
const selectSelectedItems = (state) => state.cart.selectedItems;
const selectTotals        = (state) => ({
  totalItems:    state.cart.totalItems,
  totalMRP:      state.cart.totalMRP,
  totalDiscount: state.cart.totalDiscount,
  totalAmount:   state.cart.totalAmount,
});
const selectAppliedCoupon = (state) => state.cart.appliedCoupon;

export const useCart = () => {
  const dispatch = useAppDispatch();

  const items         = useAppSelector(selectItems);
  const selectedItems = useAppSelector(selectSelectedItems);
  const totals        = useAppSelector(selectTotals);
  const appliedCoupon = useAppSelector(selectAppliedCoupon);

  // Derived values stay inside useMemo so the same reference
  // survives renders when the inputs do not change. Without
  // useMemo, isEmpty / hasCoupon would be recomputed every
  // render (cheap), but any object/array derivation would
  // cause downstream useEffect dependencies to re-fire.
  const isEmpty    = useMemo(() => items.length === 0, [items]);
  const hasCoupon  = useMemo(() => appliedCoupon !== null, [appliedCoupon]);

  // ── Actions ──────────────────────────────────────────────
  const addItem      = useCallback((product) => dispatch(addToCart(product)),     [dispatch]);
  const removeItem   = useCallback((id)      => dispatch(removeFromCart(id)),     [dispatch]);
  const setQuantity  = useCallback((id, qty) => dispatch(updateQuantity({ id, qty })), [dispatch]);
  const toggleItem   = useCallback((id, on)  =>
    dispatch(on ? selectItem(id) : deselectItem(id)),                              [dispatch]);
  const selectAll    = useCallback((on)      =>
    dispatch(on ? selectAllItems() : deselectAllItems()),                          [dispatch]);
  const applyCode    = useCallback((code, discount) =>
    dispatch(applyCoupon({ code, discount })),                                     [dispatch]);
  const removeCode   = useCallback(()        => dispatch(removeCoupon()),          [dispatch]);
  const emptyCart    = useCallback(()        => dispatch(clearCart()),             [dispatch]);

  return {
    // data
    items, selectedItems, totals, appliedCoupon,
    // computed
    isEmpty, hasCoupon,
    // actions
    addItem, removeItem, setQuantity, toggleItem, selectAll,
    applyCode, removeCode, emptyCart,
  };
};

// File: packages/core/store/src/hooks/useHeaderViewModel.js
// VIEW-MODEL HOOK — composes data from THREE slices (user, cart,
// tickets) into the exact shape the Header remote needs. This is
// the most useful hook shape in an MFE because it isolates the
// Header from changes in any of the three underlying slices.
import { useAppSelector } from '../hooks';
import { selectHeaderViewModel } from '../selectors/header';

export const useHeaderViewModel = () => {
  // ONE selector. The selectHeaderViewModel is built with
  // createSelector — see the redux-toolkit-slices article
  // for the full implementation. The memoization is what makes
  // this hook safe to call on every render in the Header remote.
  return useAppSelector(selectHeaderViewModel);
};

// The returned shape (defined in selectors/header.js):
//   {
//     isLoggedIn:     boolean,
//     displayName:    'Sign in' | <user.name>,
//     cartBadge:      string,         // '99+' when count > 99
//     openTickets:    number,
//     showSupportDot: boolean,
//   }
//
// USAGE IN THE HEADER REMOTE:
//   const vm = useHeaderViewModel();
//   <CartBadge>{vm.cartBadge}</CartBadge>
//   <NotificationDot show={vm.showSupportDot} />
//
// WHY THIS BEATS THREE useSelector CALLS:
//   - One subscription to the store, not three
//   - createSelector memoization → no re-render when ticket data
//     changes but user/cart stay the same
//   - The Header remote is decoupled from userSlice, cartSlice,
//     and ticketSlice — it depends only on the view-model shape
//   - Refactoring any of the three slices does not touch Header

// File: packages/core/store/src/hooks/useIsLoggedIn.js
// READ-ONLY HOOK — the smallest possible shape. Returns the
// single boolean every gated route, header, and protected
// component reads. Defining a hook for one field is justified
// when the field is read in 10+ places across the workspace.

import { useAppSelector } from '../hooks';
import { selectIsLoggedIn } from '../slices/userSlice';

export const useIsLoggedIn = () => useAppSelector(selectIsLoggedIn);

// Usage everywhere:
//   const isLoggedIn = useIsLoggedIn();
//   if (!isLoggedIn) return <Redirect to="/login" />;
//
// WHY NOT JUST useSelector(selectIsLoggedIn) DIRECTLY?
//   1. ONE place to change if the slice field renames
//      (isLoggedIn → isAuthenticated → loggedInAt).
//   2. The hook name reads better at the call site than
//      the selector reference — useIsLoggedIn() is self-
//      documenting, useSelector(selectIsLoggedIn) requires
//      readers to know what selectIsLoggedIn returns.
//   3. Federated remotes import ONE thing instead of two
//      (the hook and the selector). Smaller surface = fewer
//      breaking-change vectors.

# Three Hook Shapes — Pick the Right One Per Concern
# ────────────────────────────────────────────────────
#
#   ┌─────────────────────┬──────────────────────────────────┐
#   │ Hook shape          │ When to reach for it             │
#   ├─────────────────────┼──────────────────────────────────┤
#   │ READ-ONLY HOOK      │ Multiple components need the     │
#   │ useIsLoggedIn()     │ same single read.                │
#   │ → boolean           │ Returns a primitive or shallow   │
#   │                     │ value. Zero actions.             │
#   ├─────────────────────┼──────────────────────────────────┤
#   │ READ + WRITE HOOK   │ One feature has BOTH reads and   │
#   │ useCurrentUser()    │ writes that always travel        │
#   │ useCart()           │ together. Returns { data,        │
#   │ → { data, actions } │ actions } in one object.         │
#   ├─────────────────────┼──────────────────────────────────┤
#   │ VIEW-MODEL HOOK     │ A single remote needs a precise  │
#   │ useHeaderViewModel()│ projection of multiple slices.   │
#   │ → { displayName,    │ Wraps a createSelector that      │
#   │     cartBadge,      │ composes 2-N slices into one     │
#   │     openTickets }   │ shape. Read-only — writes belong │
#   │                     │ in the per-slice hooks above.    │
#   └─────────────────────┴──────────────────────────────────┘
#
#   ANTI-PATTERNS:
#     - useState wrappers that re-derive Redux state outside Redux
#     - Hooks that fetch network data — that belongs in RTK Query
#       or a dedicated useXxxQuery hook, not the slice hooks
#     - Hooks returning a brand-new object literal every render
#       without useMemo → breaks every downstream useEffect dep
#     - One mega hook (useStore) that returns the entire state tree
#       → defeats the purpose; consumers re-render on every dispatch

# Custom Hooks Folder Layout in the Federated Store Package
# ──────────────────────────────────────────────────────────
#
#   packages/core/store/
#   ├── package.json
#   ├── index.js                 ← public re-exports (read by remotes)
#   ├── index.d.ts
#   └── src/
#       ├── store.js
#       ├── hooks.js             ← useAppDispatch / useAppSelector (foundation)
#       ├── slices/
#       │   ├── userSlice.js
#       │   ├── cartSlice.js
#       │   ├── ticketSlice.js
#       │   └── chatSlice.js
#       ├── selectors/
#       │   ├── header.js        ← cross-slice memoized selectors
#       │   ├── checkout.js
#       │   └── notifications.js
#       └── hooks/
#           ├── useCurrentUser.js    ← user reads + writes
#           ├── useIsLoggedIn.js     ← single-field read
#           ├── useCart.js           ← cart reads + writes
#           ├── useTickets.js        ← ticket reads + writes
#           ├── useChat.js           ← chat reads + writes
#           ├── useHeaderViewModel.js   ← cross-slice view model
#           ├── useCheckoutViewModel.js ← cross-slice view model
#           └── index.js             ← re-exports every hook
#
#   THREE FOLDER RULES:
#     1. ONE hook file per hook. No mega-files. A file named
#        useCart.js holds ONLY useCart and its private helpers.
#     2. Hooks NEVER import from another hook file. Each hook
#        composes from selectors + actions directly. Hook-to-hook
#        composition belongs INSIDE the consuming component.
#     3. View-model hooks live next to read+write hooks, not in
#        a separate folder. A flat folder is easier to grep when
#        the package grows to 30+ hooks.

// File: packages/core/store/index.js
// PUBLIC SURFACE — every remote imports from here only.
// The hooks section grew alongside the slices. Re-exporting
// from one entry point means a remote does:
//
//   import { useCurrentUser, useCart, useHeaderViewModel } from '@myapp/store';
//
// instead of the more brittle:
//
//   import { useCurrentUser }     from '@myapp/store/src/hooks/useCurrentUser';
//   import { useCart }            from '@myapp/store/src/hooks/useCart';
//   import { useHeaderViewModel } from '@myapp/store/src/hooks/useHeaderViewModel';

// ── Store + foundation hooks ─────────────────────────────────
export { store, makeStore }                from './src/store';
export { useAppDispatch, useAppSelector }  from './src/hooks';

// ── Slice surfaces (actions + raw selectors) ─────────────────
// Kept for advanced consumers and tests. Application code
// should prefer the custom hooks below.
export * from './src/slices/userSlice';
export * from './src/slices/cartSlice';
export * from './src/slices/ticketSlice';
export * from './src/slices/chatSlice';

// ── Custom hooks (the preferred consumer API) ────────────────
export { useCurrentUser }      from './src/hooks/useCurrentUser';
export { useIsLoggedIn }       from './src/hooks/useIsLoggedIn';
export { useCart }             from './src/hooks/useCart';
export { useTickets }          from './src/hooks/useTickets';
export { useChat }             from './src/hooks/useChat';
export { useHeaderViewModel }  from './src/hooks/useHeaderViewModel';
export { useCheckoutViewModel }from './src/hooks/useCheckoutViewModel';

// ── react-redux primitives (singleton-safe re-exports) ───────
// Components SHOULD prefer the custom hooks. These two are
// here as escape hatches for tests and one-off selector reads.
export { Provider, useSelector, useDispatch } from 'react-redux';

// File: packages/core/store/src/hooks/useCart.js
// TWO SUBTLE PERFORMANCE TRAPS — both have shipped to production
// in real federated stores. Both look correct at code review.
//
// TRAP 1 — selector defined INSIDE the hook
// ─────────────────────────────────────────
// Looks innocent. The selector returns a new array reference on
// every call because the arrow function itself is recreated
// inside the hook on every render. useAppSelector compares the
// previous and current return values with shallow equality, sees
// "different reference", and re-renders the consumer EVERY time.
//
// export const useCart = () => {
//   const items = useAppSelector((state) =>
//     state.cart.items.filter(i => i.selected)   // <- BAD
//   );
//   return { items };
// };
//
// FIX — define the selector once at module scope, OR wrap it in
// createSelector so the result reference stays stable.
//
// const selectSelectedItems = createSelector(
//   [(state) => state.cart.items],
//   (items) => items.filter(i => i.selected),
// );
//
// export const useCart = () => {
//   const items = useAppSelector(selectSelectedItems);
//   return { items };
// };
//
//
// TRAP 2 — returning a new object literal without useMemo
// ──────────────────────────────────────────────────────
// The hook returns { items, totals, ...actions } as a new object
// on every render. A consumer that does
//
//   const cart = useCart();
//   useEffect(() => { /* ... */ }, [cart]);
//
// sees 'cart' change on every render and the effect re-fires.
// Destructuring at the consumer ({ items, totals } = useCart())
// is the simple fix — primitive references stay stable. For hooks
// that MUST return one object and are read into useEffect deps,
// wrap the return in useMemo of the data fields only.

# Before / After — Same Component, Two Worlds
# ──────────────────────────────────────────────
#
#   BEFORE — raw react-redux primitives (5 imports, 4 hooks):
#
#     import { useSelector, useDispatch } from '@myapp/store';
#     import {
#       selectIsLoggedIn, selectUserName, selectTotalCartItems,
#       setIsLoggedIn, clearUser,
#     } from '@myapp/store';
#
#     function Header() {
#       const isLoggedIn = useSelector(selectIsLoggedIn);
#       const name       = useSelector(selectUserName);
#       const cartCount  = useSelector(selectTotalCartItems);
#       const dispatch   = useDispatch();
#       const logout     = () => dispatch(clearUser());
#       ...
#     }
#
#   AFTER — one custom hook (1 import, 1 hook):
#
#     import { useHeaderViewModel, useCurrentUser } from '@myapp/store';
#
#     function Header() {
#       const vm = useHeaderViewModel();
#       const { logout } = useCurrentUser();
#       ...
#     }
#
#   WHAT YOU GAINED:
#     - 5 imports → 2 imports
#     - 4 hook calls → 2 hook calls
#     - One createSelector subscription instead of three
#     - Header is decoupled from userSlice + cartSlice +
#       ticketSlice — a rename anywhere does not touch Header
#     - The 'logout' button does not know clearUser exists
#     - The unit test mocks useHeaderViewModel + useCurrentUser
#       instead of mocking the entire react-redux Provider tree

// File: packages/core/store/src/hooks/__tests__/useCurrentUser.test.js
// Custom hooks in the federated package MUST be unit tested.
// A subtle bug in useCurrentUser breaks every remote in the
// workspace silently — the test suite is the contract enforcement.
import { renderHook, act } from '@testing-library/react';
import { Provider } from 'react-redux';
import { makeStore } from '../../store';
import { useCurrentUser } from '../useCurrentUser';

const wrapWithStore = () => {
  const store = makeStore();
  const wrapper = ({ children }) => (
    <Provider store={store}>{children}</Provider>
  );
  return { store, wrapper };
};

describe('useCurrentUser', () => {
  it('returns initial state with isLoggedIn=false', () => {
    const { wrapper } = wrapWithStore();
    const { result } = renderHook(() => useCurrentUser(), { wrapper });

    expect(result.current.isLoggedIn).toBe(false);
    expect(result.current.name).toBe('');
    expect(result.current.email).toBe('');
  });

  it('login() updates user data and isLoggedIn', () => {
    const { wrapper } = wrapWithStore();
    const { result } = renderHook(() => useCurrentUser(), { wrapper });

    act(() => {
      result.current.login({
        firstName: 'Asha',
        lastName:  'Rao',
        name:      'Asha Rao',
        email:     'asha@example.com',
      });
    });

    expect(result.current.isLoggedIn).toBe(true);
    expect(result.current.name).toBe('Asha Rao');
    expect(result.current.email).toBe('asha@example.com');
  });

  it('logout() clears the user', () => {
    const { wrapper } = wrapWithStore();
    const { result } = renderHook(() => useCurrentUser(), { wrapper });

    act(() => {
      result.current.login({ name: 'X', email: 'x@y.z' });
    });
    act(() => {
      result.current.logout();
    });

    expect(result.current.isLoggedIn).toBe(false);
    expect(result.current.name).toBe('');
  });

  it('returns stable action references across re-renders', () => {
    const { wrapper } = wrapWithStore();
    const { result, rerender } = renderHook(() => useCurrentUser(), { wrapper });

    const firstLogin = result.current.login;
    rerender();
    const secondLogin = result.current.login;

    expect(firstLogin).toBe(secondLogin); // useCallback keeps it stable
  });
});