diff --git a/.changeset/perfect-keys-roll.md b/.changeset/perfect-keys-roll.md new file mode 100644 index 0000000000..2a0975d52e --- /dev/null +++ b/.changeset/perfect-keys-roll.md @@ -0,0 +1,5 @@ +--- +'@xstate/store': patch +--- + +Update README.md diff --git a/packages/xstate-store/README.md b/packages/xstate-store/README.md index 08c159e9da..834ca87077 100644 --- a/packages/xstate-store/README.md +++ b/packages/xstate-store/README.md @@ -1 +1,176 @@ # `@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](https://github.com/statelyai/xstate). + +- **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](#typescript) users. If you are a JavaScript user, just remove the types. + +## Installation + +```bash +# yarn add @xstate/store +# pnpm add @xstate/store +npm install @xstate/store +``` + +## Quick start + +```ts +import { createStore } from '@xstate/store'; + +// 1. Create a 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 + } + } +); + +console.log(store.getSnapshot()); +// { +// status: 'active', +// context: { +// donuts: 0, +// favoriteFlavor: 'chocolate' +// } +// } + +// 2. Subscribe to the store +store.subscribe((snapshot) => { + console.log(snapshot.context); +}); + +// 3. Send events +store.send({ type: 'addDonut' }); +// logs { donuts: 1, favoriteFlavor: 'chocolate' } + +store.send({ + type: 'changeFlavor', + flavor: 'strawberry' // Strongly-typed! +}); +// logs { donuts; 1, favoriteFlavor: 'strawberry' } +``` + +## Usage with React + +Import `useSelector` from `@xstate/store/react`. Select the data you want via `useSelector(…)` and send events using `store.send(eventObject)`: + +```tsx +import { donutStore } from './donutStore.ts'; +import { useSelector } from '@xstate/store/react'; + +function DonutCounter() { + const donutCount = useSelector(donutStore, (state) => state.context.donuts); + + return ( +