Architectural Diagram

User Interaction Flow:

• User interacts with the ProductCreationForm.tsx (Presentation Layer).

• The component calls actorRef.send({ type: 'SUBMIT' }).

• The event is processed by the productCreationMachine Actor (Use Case Layer), which is managed by the ProductCreationProvider.

• The machine transitions to the submitting state.

Data Orchestration Flow:

• The submitting state invokes the createProduct actor.

• The provided implementation for this actor calls the productApiService.createProduct method (Gateway Layer).

• The ProductApiService interacts with the QueryClient (@tanstack/query-core) to perform an optimistic update on the cache.

• The service then makes a network request to the Backend API (External Layer).

• The API responds. The service updates the QueryClient cache with the final data or rolls back on error.

• The promise resolves or rejects.

State Update Flow:

• The invoke in the machine receives the result via an onDone or onError transition.

• The machine transitions to the success or editing (with error) state and uses assign to update its own context.

• The ProductCreationContext.useSelector hook in ProductCreationForm.tsx detects the state change.

• The React component re-renders to reflect the new state (e.g., showing a success message or an error).