How to use the xstate.send function in xstate

To help you get started, we’ve selected a few xstate examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github coodoo / xstate-examples / _old / fsm-service-3-actor / src / fsm / workerActions.js View on Github external
import { assign } from '../xstate-custom/xstateImmer'
import { send, sendParent } from 'xstate'
import { CompServiceTypes } from './compressionService'
import { MainTypes } from './mainMachine'

export const onEntry = assign((ctx, e) => {
	// console.log('[WorkerMachine ctx]', ctx.name)
})

export const startJobAssign = assign((ctx, e) => {
	// console.log('[SubMachine startJob]', e)
})

export const startJobSend = send(
	(ctx, e) => ({
		type: CompServiceTypes.compressSong,
		data: ctx,
	}),
	{ to: 'CompressionService' },
)


export const workerProgressAssign = assign((ctx, e) => {
	const { progress } = e.job
	// console.log( `workerMachine ${id}: ${progress}` )
	ctx.progress = progress
	return ctx
})

export const workerDoneAssign = assign((ctx, e) => {
github coodoo / xstate-examples / crud-v1-services / src / fsm / actions.js View on Github external
})

export const createNewItem = assign((ctx, e) => {
	// config which screen to exit to from creating new item screen
	ctx.exitNewItemTo = e.exitTo
})

// optimistic update, insert the item with local id
export const preSubmitNewItem = assign((ctx, e) => {
	const newItem = e.payload
	ctx.items.push(newItem)
	ctx.selectedItemId = newItem.id
})

// then invoke service to persist new item via external api call
export const submitNewItem = send(
	(ctx, e) => ({
		type: 'ServiceCreateItems',
		payload: e.payload,
		forceFail: e.forceFail,
	}),
	{ to: 'ItemService' },
)

// after data was persisted to server, replace local item id with the official one sent back from the server
export const newItemSuccess = assign((ctx, e) => {
	const {
		result: { info, serverItem, localItem },
	} = e
	// console.log( '[NEW_ITEM_SUCCESS]', serverItem )

	ctx.items = ctx.items.map(it => (it.id === localItem.id ? serverItem : it))
github coodoo / xstate-examples / _old / fsm-service-3-actor / src / fsm / workerActions.js View on Github external
// console.log( '\t[workerDone]', ctx, e )
	const { progress } = e.job
	ctx.progress = progress
	return ctx
})

export const workerDoneSend = sendParent((ctx, e) => ({
	type: MainTypes.updateJob,
	song: ctx,
}))

export const pauseFileAssign = assign((ctx, e) => {
	// console.log('\t[pauseFile]', e.id)
})

export const pauseFileSend = send(
	(ctx, e) => ({
		type: CompServiceTypes.pauseSong,
		data: ctx.id,
	}),
	{ to: 'CompressionService' },
)

export const resumeFileSend = send(
	(ctx, e) => ({
		type: CompServiceTypes.resumeSong,
		data: { id: ctx.id, progress: ctx.progress },
	}),
	{ to: 'CompressionService' },
)

export const cancelFileSend = send(
github coodoo / xstate-examples / _old / fsm-service-3-actor / src / fsm / workerActions.js View on Github external
song: ctx,
}))

export const pauseFileAssign = assign((ctx, e) => {
	// console.log('\t[pauseFile]', e.id)
})

export const pauseFileSend = send(
	(ctx, e) => ({
		type: CompServiceTypes.pauseSong,
		data: ctx.id,
	}),
	{ to: 'CompressionService' },
)

export const resumeFileSend = send(
	(ctx, e) => ({
		type: CompServiceTypes.resumeSong,
		data: { id: ctx.id, progress: ctx.progress },
	}),
	{ to: 'CompressionService' },
)

export const cancelFileSend = send(
	(ctx, e) => ({
		type: CompServiceTypes.cancelSong,
		data: ctx.id,
	}),
	{ to: 'CompressionService' },
)

export const cancelFileSendParent = sendParent((ctx, e) => ({
github coodoo / xstate-examples / crud-v1-services / src / fsm / actions.js View on Github external
import { send, assign } from 'xstate'

export const reloadItems = send(
	{ type: 'ServiceLoadItems' }, // the event to be sent
	{ to: 'ItemService' }, // the target servcie to receive that event
)

export const listDataSuccess = assign((ctx, evt) => {
	ctx.items = evt.data
	ctx.notify('Data fetched 1')
	ctx.notify('Data fetched 2')
	ctx.notify('Data fetched 3')
})

export const listDataError = assign((ctx, e) => {
	console.log('\n[listDataError]', e.data)
	//
	ctx.modalData = {
		type: 'MODAL_ERROR',
github coodoo / xstate-examples / _old / fsm-service-3-actor / src / fsm / mainActions.js View on Github external
import { assign } from '../xstate-custom/xstateImmer'
import { send, spawn } from 'xstate'
import { WorkerMachine, WorkerTypes } from './workerMachine'

export const addJobAssign = assign((ctx, e) => {
	const { song } = e
	// feeding in inital context for the child actor
	// notice it's not `machine.withConfig()`
	song.actor = spawn( WorkerMachine.withContext(song) )
	ctx.songs.push(song)
	return ctx
})

export const addFileSend = send(
	{ type: WorkerTypes.startJob },
	{ to: (ctx, e) => ctx.songs.find(it => it.id === e.song.id).actor },
)

export const updateJob = assign((ctx, e) => {
	ctx.completed.push(e.song.id)
	return ctx
})

// fix: when songs were completed and deleted, they need to be removed from `completed[]` too
export const cancelJob = assign((ctx, e) => {
	ctx.songs = ctx.songs.filter(it => it.id !== e.id)
	ctx.completed = ctx.completed.filter(it => it !== e.id)
	return ctx
})
github coodoo / xstate-examples / crud-v3-promises / src / fsm / actions.js View on Github external
import { send, assign } from 'xstate'
import { getItemById } from '../utils/helpers'
import toaster from 'toasted-notes'
import 'toasted-notes/src/styles.css'

// helper: toaster invocation as a side effect
const notify = msg => toaster.notify(msg, {
	position: 'bottom-right',
})

/* read item
-------------------------------------------------- */

export const reloadItems = send(
	{ type: 'SERVICE.LOAD.ITEMS' }, // the event to be sent
	{ to: 'ItemService' }, // the target servcie to receive that event
)

export const listDataSuccess = assign((ctx, evt) => {
	ctx.items = evt.data
})

export const listDataError = assign((ctx, e) => {
	ctx.modalData = {
		title: 'Fetching list data failed.',
		content: `Details: ${e.data}`,
		data: e.data,
	}
})
github kyleshevlin / intro-to-state-machines-and-xstate-course / lessons / how-to-invoke-another-machine / after.js View on Github external
const parentMachine = Machine({
  id: 'parent',
  initial: 'idle',
  states: {
    idle: {
      on: { ACTIVATE: 'active' },
    },
    active: {
      invoke: {
        id: 'child',
        src: childMachine,
        onDone: 'done',
      },
      on: {
        STEP: {
          actions: send('STEP', { to: 'child' }),
        },
      },
    },
    done: {},
  },
})
github nordnet / ui / src / Molecules / Input / Select / machine.ts View on Github external
target: 'selection.unknown',
      },
    },
    states: {
      open: {
        initial: 'unknown',
        on: {
          [ACTION_TYPES.OPEN]: {
            target: '.on',
            actions: 'restoreFocusOrFocusFirst',
            cond: ctx => ctx.actions.length > 0 || ctx.visibleOptions.length > 0,
          },
          [ACTION_TYPES.CLOSE]: { target: '.off', actions: 'cleanSearch' },
          [ACTION_TYPES.TOGGLE]: [
            { actions: send(ACTION_TYPES.CLOSE), cond: ctx => ctx.open },
            { actions: send(ACTION_TYPES.OPEN) },
          ],
          [ACTION_TYPES.BLUR]: {
            actions: send(ACTION_TYPES.CLOSE),
          },
          [ACTION_TYPES.SELECT_ITEM]: {
            actions: send(ACTION_TYPES.CLOSE),
            cond: (ctx, e) => e.payload && !e.payload.disabled && !ctx.multiselect,
          },
          [ACTION_TYPES.DESELECT_ITEM]: {
            actions: send(ACTION_TYPES.CLOSE),
            cond: (ctx, e) => e.payload && !e.payload.disabled && !ctx.multiselect,
          },
        },
        states: {
          unknown: {
            on: {
github nordnet / ui / src / Molecules / Input / Select / machine.ts View on Github external
on: {
          [ACTION_TYPES.OPEN]: {
            target: '.on',
            actions: 'restoreFocusOrFocusFirst',
            cond: ctx => ctx.actions.length > 0 || ctx.visibleOptions.length > 0,
          },
          [ACTION_TYPES.CLOSE]: { target: '.off', actions: 'cleanSearch' },
          [ACTION_TYPES.TOGGLE]: [
            { actions: send(ACTION_TYPES.CLOSE), cond: ctx => ctx.open },
            { actions: send(ACTION_TYPES.OPEN) },
          ],
          [ACTION_TYPES.BLUR]: {
            actions: send(ACTION_TYPES.CLOSE),
          },
          [ACTION_TYPES.SELECT_ITEM]: {
            actions: send(ACTION_TYPES.CLOSE),
            cond: (ctx, e) => e.payload && !e.payload.disabled && !ctx.multiselect,
          },
          [ACTION_TYPES.DESELECT_ITEM]: {
            actions: send(ACTION_TYPES.CLOSE),
            cond: (ctx, e) => e.payload && !e.payload.disabled && !ctx.multiselect,
          },
        },
        states: {
          unknown: {
            on: {
              '': [
                {
                  target: 'on',
                  cond: ctx => ctx.open,
                },
                {