Reading global state

ApiTables table state lives in a local Redux store. Global app state (auth, cart, loaders, locale-driven slices) lives in @/store/store.

getExternalState()

File: ./ApiTables/table-providers/store.tsx

import { getExternalState } from '@/app/ApiTables/table-providers/store';

const globalState = getExternalState();
const user = globalState.auth?.user;

Returns a one-time snapshot — not reactive. For UI that must re-render on global changes, use useSelector on the global store (outside table slices) or pass props from the parent page.

ApiTablesController imports getExternalState() but does not currently use the result; prefer explicit patterns below.

useSelector on global store

Valid outside table Redux keys:

import { useSelector } from 'react-redux';

// In ApiTablesProvider — app slice for remount key
const { outScopeTableRefresher } = useSelector((s: any) => s.app);

// In a custom control modal
const user = useSelector((s: any) => s.auth?.user);

Invalid inside table subtree for table data:

// Wrong — tableCore is not on global store
useSelector((s) => s.tableCore);

Use table useSelector only under ApiTablesProvider.

Direct store dispatch (imperative)

useUtilsProvider and some modals use:

import { store } from '@/store/store';
import { _setMainLoader } from '@/store/slices/appSlice';

store.dispatch(_setMainLoader({ status: true, msg: '...' }));

Use when a table action should show the app-wide loader or update cart count without coupling components to props.

Patterns by need

Passing data into the table

Use the params prop on ReactApiTable / ApiTablesController:

<ReactApiTable
  table={structure}
  tableStructureLoading={loading}
  params={{ warehouseId }}
/>

Merged into query POST body as params alongside filters and sorts.

Related

• Out-of-scope refresher
• ApiTablesProvider