title: How to persist state in Xstate state machines in react?
body: <p>I have a working cart state machine to add items in cart I'm using reactjs. On refreshing page, context is not persisted.I`m new to state machines and would like to persist state in my app.Below is my cartMachine .Please help.Thank you.</p>
  
  <pre><code>export const cartMachine = Machine(
    {
      id: "cart",
      initial: "idle",
      context: {
        ItemsInCart: [],
      },
      states: {
        idle: {
          on: {
            ADD: {
              target: "idle",
              actions: ["addProductsToCart"],
            },
          },
        },
      },
    },
    /* actions */
    {
      actions: {
        addProductToCart: assign((context, event) =&gt; {
          const { ItemsInCart } = context;
          const { item } = event;
          let checkIfProductInCart = ItemsInCart.find(({ id }) =&gt; id == item.id);
          let canAddToCart = checkIfProductInCart;
  
          if (!canAddToCart) {
            ItemsInCart.push({ ...item });
          }
        }),
      },
    }
  );
  </code></pre>