zustand-middleware-xstate

zustand-middleware-xstate

This middleware allows you to easily put your XState state machines into a global zustand store.

installation

npm install zustand-middleware-xstate zustand xstate

usage

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.

selectors

You can also use zustand's selector feature to get slices of the state and avoid unnecessary re-renders. For example:

const context = useStore(s => s.state.context);

This hook will only re-render when the context changes. See the zustand docs for more details.

interpreter options

You can hand over a second argument to xstate function (from this library). This is forwarded to the interpreter of xstate, thus, things like devTools can be enabled.