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

@ muhammad-ali的答案回答了您的特定问题。当您执行浏览器刷新时，内存中的所有数据/应用程序状态都消失了。您将需要找到其他解决方案来永久刷新之间的数据。不过，这与XState或React无关。由于您的目标似乎是将商品存储在购物车中，因此，如果用户返回该站点时他仍然拥有相同的购物车，则您将不得不使用localStorage或使用后端+数据存储永久保存数据并在加载应用程序/购物车页面时通过API检索数据。

其余答案与原始问题有些偏离，但也许可以提供一些有关使用XState机器如何将机器状态实际上持久保存在内存中的见解。

机器本身不会保持状态（即使在内存中也不会保持一定程度）。显示此示例的示例是，如果您操作机器transition（传递初始状态和要执行的操作），然后读取机器状态，则该机器状态仍将保持原始状态。 XState机器基本上只是可以执行操作（作为过渡）的事物，而这种过渡会将新状态返回给您。

在问题中使用您的机器：

const cartMachine = Machine({ ... })

const newState1 = cartMachine.transition(cartMachine.initialState, {type: 'ADD', item: {...})
console.log(newState1.context.ItemsInCart)  // Will contain item

const newState2 = cartMachine.transition(cartMachine.initialState, {type: 'ADD', item: {...})
console.log(newState2.context.ItemsInCart)  // Will still only contain one item (from the last ADD operation)

// can not read the current state from machine, only initialState is available
console.log(cartMachine.initialState.context.ItemsInCart)  // will still be []

// You will have to persist state yourself
const newState1 = cartMachine.transition(cartMachine.initialState, {type: 'ADD', item: {...})
// Pass the new state into the machine
const newState2 = cartMachine.transition(newState1, {type: 'ADD', item: {...})
console.log(newState2.context.ItemsInCart)  // Will now contain two items

因此，机器永远不会保持状态。不过，您有两种选择可以实现此目的。

在每次转换后将新状态存储在React状态中的某个位置。 XState机器状态是JSON可序列化的，因此您可以毫无问题地存储在React状态。
使用机器服务来保持状态（https://xstate.js.org/docs/guides/interpretation.html）。只要您使用该服务的相同实例，每个过渡都会保留在内存中，直到服务停止。您的计算机的示例：

import { Machine, assign, interpret } from 'xstate'

const cartMachine = Machine({ ... })

const cartService = interpret(cartMachine)
cartService.start()

cartService.send({type: 'ADD', item: {...})
console.log(cartService.state.context.ItemsInCart)  // contains item

cartService.send({type: 'ADD', item: {...})
console.log(cartService.state.context.ItemsInCart)  // contains 2 items

Answer 2

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

上找到有关它的更多信息。

Answer 3

xState documentation 中有一个很好的例子，展示了他们如何建议使用 localStorage：

<块引用>

您可以通过 options.state 使用 useMachine(...) 保持和重新水化状态：

// ...

// Get the persisted state config object from somewhere, e.g. localStorage
const persistedState = 
  JSON.parse(localStorage.getItem('some-persisted-state-key') || 
  someMachine.initialState;

const App = () => {
  const [state, send] = useMachine(someMachine, {
    state: persistedState // provide persisted state config object here
  });

  // state will initially be that persisted state, not the machine's initialState

  return (/* ... */)
}

如何在Xstate状态机中保持状态反应？

3 个答案: