State Selectors

/**
 * Get the complete router state from Redux store
 * @param state - Redux root state object (must contain 'router' key)
 * @returns Complete router state with location and action
 * @throws Error if router reducer not found in state tree
 */
function getRouter<S extends RouterRootState<LS>, LS = LocationState>(state: S): RouterState<LS>;

interface RouterRootState<S = LocationState> {
  /** Router state (required key name) */
  router: RouterState<S>;
}

interface RouterState<S = LocationState> {
  /** Current location with query object */
  location: RouterLocation<S>;
  /** Current navigation action type */
  action: RouterActionType;
}

import { getRouter } from 'connected-react-router';

// In a component with connect
const mapStateToProps = (state) => ({
  router: getRouter(state),
});

// In a selector
const selectRouterInfo = (state) => {
  const router = getRouter(state);
  return {
    currentPath: router.location.pathname,
    navigationAction: router.action,
  };
};

/**
 * Get current location object from router state
 * @param state - Redux root state object
 * @returns Current location with query, pathname, search, hash, state
 */
function getLocation<S extends RouterRootState<LS>, LS = LocationState>(state: S): RouterLocation<LS>;

interface RouterLocation<S> extends Location<S> {
  /** Parsed query parameters as object */
  query: Record<string, string>;
  /** URL pathname */
  pathname: string;
  /** URL search string */
  search: string;
  /** URL hash */
  hash: string;
  /** Navigation state */
  state?: S;
  /** Unique location key */
  key?: string;
}

import { getLocation } from 'connected-react-router';

// Get current location
const mapStateToProps = (state) => ({
  location: getLocation(state),
  currentPath: getLocation(state).pathname,
  queryParams: getLocation(state).query,
});

// Check current route in selector
const selectIsHomePage = (state) => {
  return getLocation(state).pathname === '/';
};

// Access location state
const selectLocationState = (state) => {
  return getLocation(state).state;
};

/**
 * Get current navigation action type
 * @param state - Redux root state object
 * @returns Current action type ('PUSH', 'REPLACE', or 'POP')
 */
function getAction<S extends RouterRootState>(state: S): RouterActionType;

type RouterActionType = 'PUSH' | 'REPLACE' | 'POP';

import { getAction } from 'connected-react-router';

// Track navigation method
const mapStateToProps = (state) => ({
  navigationAction: getAction(state),
});

// Conditional logic based on navigation type
const selectShouldShowBackButton = (state) => {
  const action = getAction(state);
  return action === 'PUSH'; // Only show back button for pushed routes
};

/**
 * Get current URL search string
 * @param state - Redux root state object
 * @returns Search string (e.g., "?param=value")
 */
function getSearch<S extends RouterRootState>(state: S): Search;

/**
 * Get current URL hash
 * @param state - Redux root state object
 * @returns Hash string (e.g., "#section")
 */
function getHash<S extends RouterRootState>(state: S): Hash;

type Search = string;
type Hash = string;

import { getSearch, getHash } from 'connected-react-router';

// Get URL components
const mapStateToProps = (state) => ({
  searchParams: getSearch(state),
  urlHash: getHash(state),
});

// Parse search parameters
const selectSearchParams = (state) => {
  const search = getSearch(state);
  return new URLSearchParams(search);
};

// Check for specific hash
const selectActiveSection = (state) => {
  const hash = getHash(state);
  return hash.replace('#', ''); // Remove # prefix
};

/**
 * Create a memoized selector for route matching
 * Returns same match object when pathname hasn't changed for performance
 * @param path - Path pattern to match against (string or object)
 * @returns Selector function that returns match object or null
 */
function createMatchSelector<
  S extends RouterRootState, 
  Params extends { [K in keyof Params]?: string }
>(path: PathParam): matchSelectorFn<S, Params>;

type matchSelectorFn<
  S extends RouterRootState, 
  Params extends { [K in keyof Params]?: string }
> = (state: S) => match<Params> | null;

type PathParam = string | {
  path?: string;
  exact?: boolean;
  strict?: boolean;
  sensitive?: boolean;
};

interface match<Params = {}> {
  params: Params;
  isExact: boolean;
  path: string;
  url: string;
}

import { createMatchSelector } from 'connected-react-router';

// Create matcher for user profile route
const selectUserMatch = createMatchSelector('/users/:userId');

// Use in component
const mapStateToProps = (state) => {
  const userMatch = selectUserMatch(state);
  return {
    isUserPage: !!userMatch,
    userId: userMatch?.params.userId,
  };
};

// Advanced path matching with options
const selectExactHomeMatch = createMatchSelector({
  path: '/',
  exact: true,
});

// Multiple route parameters
const selectPostMatch = createMatchSelector('/users/:userId/posts/:postId');

const mapStateToProps = (state) => {
  const match = selectPostMatch(state);
  return {
    userId: match?.params.userId,
    postId: match?.params.postId,
    isExactMatch: match?.isExact,
  };
};

// Reselect integration for complex selectors
import { createSelector } from 'reselect';

const selectUserMatch = createMatchSelector('/users/:userId');

const selectCurrentUser = createSelector(
  [selectUserMatch, selectUsers],
  (match, users) => {
    if (!match) return null;
    return users.find(user => user.id === match.params.userId);
  }
);