You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

@xstate/store

Package Overview
Dependencies
2
Maintainers
3
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@xstate/store

Simple stores


Version published
Maintainers
3
Created

Readme

Source

@xstate/store

XState Store is a library for simple event-based state management. If you want a state management library that allows you to update a store's state via events, @xstate/store is a great option. If you need more complex application logic needs, like state machines/statecharts, effects, communicating actors, and more, consider using XState instead.

  • Extremely simple: transitions update state via events, just like Redux, Zustand, Pinia, etc.
  • Extremely small: less than 1kb minified/gzipped
  • XState compatible: use it with (or without) XState, or convert to XState machines when you need to handle more complex logic & effects.
  • Extra type-safe: great typing out of the box, with strong inference and no awkwardness.

[!NOTE] This readme is written for TypeScript users. If you are a JavaScript user, just remove the types.

Installation

# yarn add @xstate/store
# pnpm add @xstate/store
npm install @xstate/store

Quick start

import { createStore } from '@xstate/store';

export const donutStore = createStore(
  { donuts: 0, favoriteFlavor: 'chocolate' },

  {
    addDonut: {
      donuts: (context) => context.donuts + 1
    },
    changeFlavor: {
      favoriteFlavor: (context, event: { flavor: string }) => event.flavor
    },
    eatAllDonuts: {
      donuts: 0
    }
  }
);

donutStore.subscribe((snapshot) => {
  console.log(snapshot.context);
});

donutStore.send({ type: 'addDonut' });
// => { donuts: 1, favoriteFlavor: 'chocolate' }

donutStore.send({
  type: 'changeFlavor',
  flavor: 'strawberry' // Strongly-typed!
});
// => { donuts: 1, favoriteFlavor: 'chocolate' }

Usage with React

Import useSelector from @xstate/store/react. Select the data you want via useSelector(…) and send events using store.send(eventObject):

import { donutStore } from './donutStore.ts';
import { useSelector } from '@xstate/store/react';

function DonutCounter() {
  const donutCount = useSelector(donutStore, (state) => state.context.donuts);

  return (
    <div>
      <button onClick={() => donutStore.send({ type: 'addDonut' })}>
        Add donut ({donutCount})
      </button>
    </div>
  );
}

Usage with Immer

XState Store makes it really to integrate with immutable update libraries like Immer or Mutative. Pass the produce function into createStoreWithProducer(producer, …), and update context in transition functions using the convenient pseudo-mutative API:

import { createStoreWithProducer } from '@xstate/store';
import { produce } from 'immer'; // or { create } from 'mutative'

const donutStore = createStoreWithProducer(
  produce,
  {
    donuts: 0,
    favoriteFlavor: 'chocolate'
  },
  {
    addDonut: (context) => {
      context.donuts++; // "Mutation" (thanks to the producer)
    },
    changeFlavor: (context, event: { flavor: string }) => {
      context.favoriteFlavor = event.flavor;
    },
    eatAllDonuts: (context) => {
      context.donuts = 0;
    }
  }
);

// Everything else is the same!

TypeScript

XState Store is written in TypeScript and provides full type safety, without you having to specify generic type parameters. The context type is inferred from the initial context object, and the event types are inferred from the event object payloads you provide in the transition functions.

import { createStore } from '@xstate/store';

const donutStore = createStore(
  // Inferred as:
  // {
  //   donuts: number;
  //   favoriteFlavor: string;
  // }
  {
    donuts: 0,
    favoriteFlavor: 'chocolate'
  },
  {
    // Event inferred as:
    // {
    //   type: 'changeFlavor';
    //   flavor: string;
    // }
    changeFlavor: (context, event: { flavor: string }) => {
      context.favoriteFlavor = event.flavor;
    }
  }
);

donutStore.getSnapshot().context.favoriteFlavor; // string

donutStore.send({
  type: 'changeFlavor', // Strongly-typed from transition key
  flavor: 'strawberry' // Strongly-typed from { flavor: string }
});

If you want to make the context type more specific, you can strongly type the context outside of createStore(…) and pass it in:

import { createStore } from '@xstate/store';

interface DonutContext {
  donuts: number;
  favoriteFlavor: 'chocolate' | 'strawberry' | 'blueberry';
}

const donutContext: DonutContext = {
  donuts: 0,
  favoriteFlavor: 'chocolate'
};

const donutStore = createStore(donutContext, {
  // ... (transitions go here)
});

Keywords

FAQs

Package last updated on 12 Jun 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc