Estoy tratando de crear una máquina de estado que pueda conservar los detalles del estado de la máquina en un momento dado y luego restaurar la máquina con el estado persistente y los valores de contexto al volver a visitar la página. Los documentos de Xstate mencionan la persistencia de datos y la rehidratación mediante el almacenamiento local, pero no puedo hacerlo. He hecho un enlace de sandbox para intentar replicar el problema. ¿Alguien puede ayudarme o orientarme sobre lo que puedo estar haciendo mal?
Gracias por adelantado
Enlace de Codesandbox: https://codesandbox.io/s/green-snow-ortw6?file=/src/App.js
Debe pasar el estado persistente la primera vez que invoque a useMachine , no olvide que useMachine es un cierre, de esa manera funcionará, por ejemplo
import { useMachine } from "@xstate/react"; import { createMachine } from "xstate"; import { optionsConfig } from "./machine/machineDefinition"; import { machineConfig } from "./machine/machineDefinition"; import "./styles.css"; const machine = createMachine(machineConfig, optionsConfig); export default function App() { const [state, notifyMachine] = useMachine(machine, { state: JSON.parse(localStorage.getItem("per_ste")) }); const { context, value } = state; const onNextClick = () => { notifyMachine("NEXT"); }; const onPrevClick = () => { notifyMachine("BACK"); }; const onEventAClick = () => { notifyMachine("SEND_BUTTON_CLICKED", { data: "A" }); }; const onEventBClick = () => { notifyMachine("SEND_BUTTON_CLICKED", { data: "B" }); }; const onLogContextButtonClick = () => { console.log("CONTEXT:", context.eventTriggeredList); }; const onLogStateButtonClick = () => { console.log("CONTEXT:", value); }; const onPersistClick = () => { localStorage.setItem("per_ste", JSON.stringify(state)); }; const onRehydrateClick = () => { const persistedState = localStorage.getItem("per_ste"); const parsedState = JSON.parse(persistedState); setPersistedState(parsedState); }; return ( <div className="App"> <h1>Step Machine</h1> <h3>Start clicking to see some magic happen!</h3> <h2>{`Current Step: ${context.currentStepIndex}`}</h2> <div> <button onClick={onNextClick}>NEXT</button> <button onClick={onPrevClick}>PREV</button> <button onClick={onEventAClick}>SEND EVENT A</button> <button onClick={onEventBClick}>SEND EVENT B</button> </div> <br /> <div> <button onClick={onLogContextButtonClick}>console Events</button> <button onClick={onLogStateButtonClick}>console Current State</button> </div> <br /> <br /> <div> <button onClick={onPersistClick}>PERSIST STATE</button> <button onClick={onRehydrateClick}>REHYDRATE STATE</button> </div> </div> ); }