This middleware allows you to easily put your XState state machines into a global zustand store.
npm install zustand-middleware-xstate zustand xstate
import create from "zustand";
import { createMachine } from "xstate";
import xstate from "zustand-middleware-xstate";
// create your machine
const machine = createMachine({
id: "machine",
states: {
// ...
},
});
// create a hook using the xstate middleware
const useStore = create(xstate(machine));
// use the store in your components
const App = () => {
const { state, send, service } = useStore();
return <div>{state.value}</div>;
};
Or check out the demo for a working example.