Zustand stores reference

Global state management using Zustand with localStorage persistence and TTL expiration. All stores persist to localStorage with TTL expiration, are TypeScript type-safe, sync automatically across tabs via localStorage, and expose tree-shakeable selectors.

Available stores: useStoreSelectionStore (selected store(s) state, used by the store selector), useTranslationStore (translation state, used by TranslationProvider), and useStoresCache (cached list of all Nike stores, used by StoreCountrySelector).

Looking for store info / config / athletes? Those are not exposed as a raw Zustand store. Use NikeStoreProvider and the useNikeStore() hook — see NikeStoreProvider.

useStoreSelectionStore

Manages selected store(s) for filtering and display. Supports both single and multi-select modes.

import {
  useStoreSelectionStore,
  useStoreIds,
  useStoreNumbers,
  useSelectedStore,
  useUserStore,
  useIsStoreSelected,
} from '@nike/whisker-component-library';

State

Property	Type	Description
country	string	Selected country
selectedStores	SelectedStoreDetails[]	Selected stores (for filtering)
userStore	SelectedStoreDetails | null	User’s active store (single)
lastUpdated	number | null	Timestamp of last update

Actions

Action	Parameters	Description
setSelection	country: string, stores: SelectedStoreDetails[]	Update selection
setUserStore	store: SelectedStoreDetails	Update user’s store
clearSelection	—	Clear selection
clearUserStore	—	Clear user’s store

Data schema

interface SelectedStoreDetails {
  storeId: string; // UUID
  storeNumber: string; // Human-readable number
  country: string; // Country code
  language: string; // Language code
}

Storage: localStorage with 24-hour expiration.

Built-in selectors

const storeIds = useStoreIds(); // string[]
const storeNumbers = useStoreNumbers(); // string[]
const store = useSelectedStore(); // SelectedStoreDetails | null
const userStore = useUserStore(); // SelectedStoreDetails | null
const isSelected = useIsStoreSelected('store-123'); // boolean

Examples

Basic selection

import { useStoreSelectionStore } from '@nike/whisker-component-library';

function StoreFilter() {
  const { country, selectedStores, setSelection } = useStoreSelectionStore();

  const handleSelect = (stores: SelectedStoreDetails[]) => {
    setSelection('USA', stores);
  };

  return (
    <div>
      <p>Country: {country}</p>
      <p>Selected: {selectedStores.length} stores</p>
    </div>
  );
}

With StoreCountrySelector

import { StoreCountrySelector, useStoreSelectionStore } from '@nike/whisker-component-library';

function StoreFilter() {
  const { selectedStores } = useStoreSelectionStore();

  return (
    <>
      <StoreCountrySelector
        onSelectionChange={(stores) => {
          console.log('Selected stores:', stores);
        }}
      />
      <p>You selected {selectedStores.length} stores</p>
    </>
  );
}

User’s active store

import { useStoreSelectionStore } from '@nike/whisker-component-library';

function UserStoreDisplay() {
  const { userStore, setUserStore } = useStoreSelectionStore();

  const changeStore = (store: SelectedStoreDetails) => {
    setUserStore(store);
  };

  return (
    <div>{userStore ? <p>Active Store: {userStore.storeNumber}</p> : <p>No active store</p>}</div>
  );
}

useTranslationStore

Manages translation state and language preferences. In most modules, prefer useTranslation() (see TranslationProvider) over touching this store directly.

import { useTranslationStore } from '@nike/whisker-component-library';

State

Property	Type	Description
language	string	Current language code (e.g., 'en-US')
translations	Record<string, string>	Translation key-value pairs
isLoading	boolean	Loading state
error	Error | null	Loading error

Actions

Action	Parameters	Description
setLanguage	language: string	Set current language
setTranslations	translations: Record<string, string>	Update translations
setLoading	loading: boolean	Set loading state
setError	error: Error | null	Set error state
clearTranslations	—	Clear all translations

Example

import { useTranslationStore } from '@nike/whisker-component-library';

function LanguageSelector() {
  const { language, setLanguage } = useTranslationStore();

  return (
    <select value={language} onChange={(e) => setLanguage(e.target.value)}>
      <option value="en-US">English</option>
      <option value="es-ES">Spanish</option>
      <option value="fr-FR">French</option>
    </select>
  );
}

Best practices

DO

• Use selectors for derived state.
• Clear stores on logout.
• Handle loading and error states.
• Leverage localStorage persistence.
• Use TypeScript types.

DON’T

• Don’t store sensitive data (passwords, tokens).
• Don’t exceed the 5MB localStorage limit.
• Don’t mutate state directly — use actions.
• Don’t ignore error states.
• Don’t bypass TTL expiration.

TypeScript

import type {
  StoreInfo,
  StoreConfig,
  SelectedStoreDetails,
  StoreSelectionState,
} from '@nike/whisker-component-library';

Related

• NikeStoreProvider — provider component for store data
• StoreCountrySelector — component for store selection
• Zustand documentation