XState-Skill

# XState v5 State Machine for Order Processing System

```javascript
import { createMachine, assign } from 'xstate';

const orderMachine = createMachine({
  id: 'order',
  initial: 'pending',
  context: {
    orderId: null,
    customer: null,
    items: []
  },
  states: {
    pending: {
      on: {
        CUSTOMER_PLACED_ORDER: {
          target: 'processing',
          actions: assign({
            orderId: (_, event) => event.orderId,
            customer: (_, event) => event.customer,
            items: (_, event) => event.items
          })
        }
      }
    },
    processing: {
      on: {
        ORDER_PROCESSED: 'shipped',
        ORDER_CANCELLED: 'cancelled'
      }
    },
    shipped: {
      type: 'final'
    },
    cancelled: {
      type: 'final'
    }
  }
});
```

## Explanation

This state machine manages the order processing workflow for a retail company. It starts in the 'pending' state, waiting for a customer to place an order. Once an order is placed, it transitions to the 'processing' state, where the order is being prepared for shipment. From there, it can either transition to the 'shipped' state if the order is successfully processed, or to the 'cancelled' state if the order is cancelled.

The machine uses the actor model to handle asynchronous events and state changes. The context object stores the order details, which can be accessed and modified by the actions and guards defined in the state machine.