Skip to content

biowaffeln/zustand-middleware-xstate

Repository files navigation

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 { setup } from "xstate";
import xstate from "zustand-middleware-xstate";

type Events = {
  // ...
};

// create your machine
const machine = setup({
  types: {
    events: {} as Events,
  },
}).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, actor } = 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.

actor options

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

About

An easy way to integrate XState with your zustand store.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published