État et appels API

Le frontend web centralise son état dans un store Redux Toolkit. Les données du serveur passent par RTK Query, qui gère le cache, les états de chargement et l'invalidation. Trois slices classiques gardent ce qui n'est pas une réponse d'API : la session, l'état temps réel de la loterie et les modales globales.

Le store est créé par makeStore dans frontend-web/src/store/index.ts et instancié une seule fois dans Providers. Les hooks typés useAppDispatch et useAppSelector sont exportés depuis ce fichier.

flowchart LR
  subgraph Store
    API["blockluckyApi : cache RTK Query"]
    AUTH["auth"]
    LOT["lottery"]
    UI["ui"]
  end
  P["Pages et hooks"] -->|"useXxxQuery, useXxxMutation"| API
  API -->|"fetch + Bearer"| B["Backend /api"]
  S["Socket.IO"] -->|"dispatch"| LOT
  S -->|"invalidateTags"| API
  P -->|"dispatch"| UI
  H["useAuth"] --> AUTH

#Le client de base

frontend-web/src/store/api/baseApi.ts déclare un seul createApi (reducerPath: 'blockluckyApi'). Les cinq fichiers d'endpoints l'étendent avec injectEndpoints, si bien que tout le cache vit sous une seule clé.

Aucune requête n'envoie d'en-tête Idempotency-Key, bien que POST /lottery/buy et POST /lottery/gift acceptent le middleware d'idempotence du backend. La protection contre le double envoi repose sur le bouton désactivé pendant la requête (voir Portefeuille et loterie).

#Les tags de cache

baseApi déclare douze types de tags. Une requête qui fournit un tag est rejouée automatiquement quand une mutation l'invalide, si un composant l'observe encore.

Le tag Notifications n'est jamais invalidé : la liste des notifications ne change qu'au rechargement ou par refetchNotifications.

#Endpoints par fichier

Les hooks sont générés par RTK Query : useXxxQuery pour une lecture, useXxxMutation pour une écriture. Les types de réponse sont dans frontend-web/src/types. Toutes les réponses suivent l'enveloppe ApiResponse<T> du backend (success, message, data), décrite dans Réponses et erreurs.

#authApi

frontend-web/src/store/api/authApi.ts

exportGdprData est déclaré en mutation alors que la route est un GET : l'export ne se lance qu'au clic et n'est jamais mis en cache.

#lotteryApi

frontend-web/src/store/api/lotteryApi.ts

#marketplaceApi

frontend-web/src/store/api/marketplaceApi.ts

#adminApi

frontend-web/src/store/api/adminApi.ts

#partnersApi

frontend-web/src/store/api/partnersApi.ts

La liste exhaustive des routes du backend, avec leurs schémas, est dans Référence de l'API.

#Rafraîchissement

RTK Query garde une réponse en cache tant qu'un composant l'utilise, puis 60 secondes après (réglage par défaut, non modifié). Certaines pages ajoutent un pollingInterval :

Les requêtes liées à la session (getPointsBalance, getNotifications) utilisent skip: !isAuthenticated. getPartnerConsumption attend qu'un établissement soit choisi (skip: !selectedId). Les autres changements arrivent par les événements Socket.IO décrits dans Temps réel.

#Les slices Redux

#auth

frontend-web/src/store/slices/authSlice.ts

Actions : hydrateSession, setCredentials, setPendingTwoFactor, updateUserPoints, updateUserProfile, logout. Le parcours complet est dans Authentification et routes protégées.

#lottery

frontend-web/src/store/slices/lotterySlice.ts

#ui

frontend-web/src/store/slices/uiSlice.ts pilote les feuilles modales rendues par GlobalOverlays :

La feuille de file d'attente affiche toujours la position 245 : la valeur est codée en dur dans showQueueModal(245), le backend n'envoie aucune position.

#Gestion des erreurs

Une mutation appelée avec .unwrap() rejette avec un objet FetchBaseQueryError. Deux formes coexistent :

getErrorMessage(err, fallback) dans baseApi.ts renvoie, dans l'ordre : data.message du backend, un message fixe « Serveur injoignable » pour FETCH_ERROR et TIMEOUT_ERROR, sinon le texte de repli. Les pages l'utilisent pour leurs Alert.

Les erreurs des transactions de loterie suivent une table plus fine (402, 409, 429, 503, disjoncteur) dans useBlockLuckyWallet, décrite dans Portefeuille et loterie.

Les messages du backend sont rédigés en français. Ils s'affichent tels quels même quand l'interface est en anglais.