svelte-xactor Svelte Themes

Svelte Xactor

Convert xactor machines into global svelte stores

svelte-xactor

This middleware allows you to easily convert your xactor machines into a global store that implements store contract.

Installation

yarn add svelte-xactor xactor

Usage

// store.ts
import { createSystem, createBehavior } from 'xactor'

const counter = createBehavior(
  (state, message, context) => {
    if (message.type === 'add') {
      return {
        ...state,
        count: state.count + message.value,
      }
    }

    return state
  },
  { count: 0 }
)

export const counterSystem = createSystem(counter, 'counter')
<script lang="ts">
  import toSvelteStore from 'svelte-xactor'
  import { counterSystem } from './store'
  const state = toSvelteStore(counterSystem)
</script>

<button on:click={() => counterSystem.send({type: 'add', value: 1})}>
  Clicks: {$state.count}
</button>

Top categories

Loading Svelte Themes