如何在Xstate状态机中持久化状态？

Question

我有一个工作中的购物车状态机，可以在我使用reactjs的购物车中添加项目。在刷新页面上，上下文未持久化。我是状态机的新手，想在我的应用程序中保持状态。下面是我的cartMachine。请帮助。谢谢。

export const cartMachine = Machine(
  {
    id: "cart",
    initial: "idle",
    context: {
      ItemsInCart: [],
    },
    states: {
      idle: {
        on: {
          ADD: {
            target: "idle",
            actions: ["addProductsToCart"],
          },
        },
      },
    },
  },
  /* actions */
  {
    actions: {
      addProductToCart: assign((context, event) => {
        const { ItemsInCart } = context;
        const { item } = event;
        let checkIfProductInCart = ItemsInCart.find(({ id }) => id == item.id);
        let canAddToCart = checkIfProductInCart;

        if (!canAddToCart) {
          ItemsInCart.push({ ...item });
        }
      }),
    },
  }
);

Answer 1

您必须将状态上下文保存在浏览器的本地存储中，以便即使在页面刷新时也可以持久保存。它具有非常简单的API，您可以在https://www.w3schools.com/jsref/prop_win_localstorage.asp

上了解更多信息